For use both in lilypond text and in my own html, I'm defining inline markups of several individual notes like this:
opts = { \magnifyStaff #2/3 \omit Staff.Clef \omit
Staff.TimeSignature }
inlineC = \markup { \pad-x #0.5 \raise #1 \score { { \opts c'4 }
} }
inlineA = \markup { \pad-x #0.5 \raise #1 \score { { \opts a'4 }
} }
For html use, I save them as separate svg files (see attached).
- inlineC.svg
- inlineA.svg
The vertical extents of these images differ, from the notehead bottom of middle C to the stem top of the A.
So using these images in the same line of html text, with underbars to show the baseline, like this:
- __<img src=""> <img src="">__
causes them to align on their bottom extents, instead of aligning the staff lines, like this:
- __
__
I would like them to have the same vertical extents so that the staff lines would match up, without having to use different CSS properties for each such image. They line up nicely within a lilypond PDF when used as inline markups, not svgs, so I don't want to lose that alignment by changing markup alignments for the different notes.
Things I have considered but didn't know how to implement are
- including invisible notes that force the vertical extents to be the same, but without adding blank horizontal space
- including some other invisible grob for the same effect
- defining an SVG group attribute to set vertical extents
- editing the SVG files to force extents
Is there an easy (uniform) way to make all these note definitions line up when rendered as svg images in html?
Jeff
