Better not try to play this
Some better font-sizes are 28px, 35px and 55px, among others. Here it is again:
Now for anyone who doesn't have the font, musicalsymbols.ttf, or who is
using a browser that no longer supports symbol fonts, this all looks like junk,
and the only fixups I know of are here.
The essential task of getting the notes to appear where they belong on the staves
involves both horizontal and vertical displacements of the glyphs in the font.
The reason this is such a good font is that the bodies
of the notes are centered at the displacement, 0em, relative to the stave, and
the lines are situated at 0, .25, .5, .75, and 1em. (The em-unit, often the
width of the letter em, is the height of the top line - a nice
touch.) Sharps, flats, clefs and
bars are all in the right positions, and the more I use this font, the better
I like it. The vertical displacements are specified within html-tags by the use
of the devices, style=@ or id=@, and some of
the arguments are:
______style=top:-1.0em______id=n4______id=u8______
______style=top:-.75em______id=n2______id=u6______
______style=top:-.50em______id=n0______id=u4______
______style=top:-.25em______id=s2______id=u2______
______(style=top:-0em)______id=s4______id=u0______
To keep the source files from having long and confusing tags, some of the html tags that
aren't often needed are redefined to have useful properties. It is all done in
msyms.css, and the redefinitions of tags are:
<![CDATA[
s {text-decoration:none;position:absolute;top:0}
b {visibility:hidden;font-weight:normal;position:relative}
u {text-decoration:none;position:relative}
em {font-style:normal;font-weight:bold}
]]>
Then the functions that have been disabled are put back with identifiers, such as
<![CDATA[
#cln {text-decoration:line-through} /* replaces <s> */
#uln {text-decoration:underline} /* replaces <u> */
]]>
A few of the North-South (up-down) displacements
that can be used with the html tags, <u>,
<s> and <b>, are specified by the identifiers,
<![CDATA[
#n15, #u19 {top:-2.375em} #s15, #d11 {top:1.375em}
---
#n4, #u8 {top:-1em} #s4, #u0, #d0 {top:0em}
---
#n1, #u5 {top:-.625em} #s1, #u3 {top:-.375em}
#n0, #s0, #u4 {top:-.5em}
]]>
Other html tags can also be used for East-West (forward-backward) moves, such as
<![CDATA[
#w0, #b0 {margin-left:-.03em} #e0, #f0 {margin-left:.03em}
#w1, #b1 {margin-left:-0.1em} #e1, #f1 {margin-left:0.1em}
---
#w20, #b20 {margin-left:-2.0em} #e20, #f20 {margin-left:2.0em}
]]>
The tag <a> is a particularly interesting case: on NN4, properties
that were assigned to it were remembered in nested uses of it, so it was
almost a handy,
one-letter equivalent of <span>. Nowadays that no longer works:
it's definitely
not an enhancement, and it appears to have achieved standards-compliance too.
At present, there are only a few other identifiers in msyms.css, but it is enough to
begin the experiments. Here is an example of a relatively
simple algorithm for stacking the notes in a chord.
The vertical separations of notes in chords depend upon roundoff and/or truncation
of vertical displacements to a whole number of pixels. Different browsers use
different algorithms for lighting pixels on the monitor, and they use other
different algorithms for sending the results to printers. Some examples of
font-sizes that work
(for me, that is) on IE6 and NN7, onscreen and on my HP PSC 500, are here
in test9 and test6.
There is simply no way I can guarantee that any
or all of these will work well for anybody else.
Here, for example, are two ways to line up the ledgerlines.
And now, let the games begin.