msym/home

The Games
This all began here.

One of the major problems with all of this has to do with buggy browsers. The ones I try to keep track of are IE6 (Internet Explorer), Mz1 (Mozilla, 1.4 and 1.7, and Firefox 0.9), NN4 (Netscape Navigator), NN7 (embedded with Mz) and Op7 (Opera 7.54 at this writing). Old versions of NN and IE were recognized by all to have had implementations of HTML that were pretty seriously bent, and that led to attempts to introduce standards that might lead to better performance. Alas, to me it looks like failed attempts: purveyers of the improved browsers (not NN4) claim they have standards-compliant browsers, but the ways of displaying some relatively simple HTML documents are not even consistent. So this would-be writer of HTML music typesetters has decided - just for mental health - to call the newer browsers my-standards-compliant browsers.

Given the lack of consistency, the html/css writing style has to be seriously downdumbed from what it might have been. To write a utility that is wide enough to allow for two or three different ways to do much of anything on two or three different browsers may be too much to hope for any more. The aim here is to develop a technique for placing the notes on the staves in pages that can be viewed by IE6 and sometimes by Mz1 and NN7. The limitation with Mz1 and NN7 is that they can only render the font musicalsymbols.ttf under special circumstances. After the limited choice of fonts (including no choice of symbol fonts), the major limitation has to do with alignment of position:absolute-moves within position:relative-blocks. Most browsers have some troubles with that, and IE6 has the perfect catch-22. On that popular utility, position:absolute within position:relative is misaligned if line-height is set at anything but the right value, but musicalsymbols.ttf appears to be a tall, thin font and IE6 won't display complete glyphs unless line-height is set to about 3em or so. Did anyone expect that would be the right value? ADDED NOTE: It all appears to have been fixed in IE7 - we thank MS for that!

What seems to be working is to pilfer the tags, and <s> for relative and absolute moves, and then to work mainly with absolute moves. This is done with a css file that contains the lines, u {text-decoration:none;position:relative} s {text-decoration:none;position:absolute;top:0} and a number of identifiers like #n0 {top:-.5em} by em/8 to #n15 {top:-2.375em} #s0 {top:-.5em} by em/8 to #s15 {top:1.375em} for vertical displacements from the central line of the five-line stave and #e1 {left:.1em} by em/10 to #e12 {left:1.2em} #w1 {left:-.1em} by em/10 to #w12 {left:-1.2em} for horizontal displacements. (e0=e1/2 and w0=w1/2 are also there.) Note the top:0 in <s>, but not in . Then <s> straightens out the IE6 misalignment, and anchors the reference point for position:absolute moves within the block it initiates. The scheme is to have a single outermost that anchors (with its small error) successive <s> blocks, possibly nested, and blocks, possibly nested. But no <s> blocks can appear within the interior blocks. Simple - no?

An example that exhibits a few of the other identifiers is here. At the innermost level, where notes and other symbols are rendered, <s id=n1>q</s><s id=s1>q</s>q => a stack of notes qqq => a sequence of notes q q q => wider spaces Using the spaces that come with the font seems to be OK at first, but adjustable spaces soon become necessary. For that, margin-shifts have been introduced by the identifiers, #b12 {margin-left:-1.2em} to #a12 {margin-left:1.2em} That makes a handy 0.05em shim, and the <a id=b3></a>=l in the example above overstrikes 0.3em of the stave in order to place the final bar in its position. (<a> blocks used to nest properly in NN4, but that has been broken lately. They are still OK for this use.)

Here is a beginning, with ledger lines, but no beams yet, and it may be necessary to change the font size for some OS/browser combinations. Unfortunately, Ms/NN7/Ffox can't render this one on Win XP/home edition. It shouldn't be hard to fix that by going to an even dumber way to position the staves - maybe I'll do that when I get over being bored with Netzilla.

Next task: beams, ties and slurs - here is a first effort - to be resumed later.

But maybe not - MusicXML looks really good! - but of course it doesn't work on Mozilla/Netscape yet. Also, tocatta.ttf and fughetta.ttf (by Blake Hodgetts) look very promising - I'll certainly look at them next.