This works on IE and Firefox. The printed result is better.
l==l
q Q
q Q
q Q
<![CDATA[
The css juju is:
<style type="text/css"><!--
body {font-family:comic sans ms; background-color:#EEF;
padding:5%;
font-size:20px}
xmp {font-family:fixedsys; font-size:80%;
line-height:1.2em}
s {position:absolute;top:0} /* IE bug */
u {position:relative} /* <a>s used to nest */
u, s {text-decoration:none} /* these still do */
img {position:absolute} /* don't ask */
--></style>
The html juju is:
<u style=font-family:musicalsymbols;white-space:nowrap;font-size:40px>
<u style=line-height:3em> <! per IE bug >
<s style=top:1em;left:4em>
<s style=left:4.52em;top:0.325em> <! beam above >
<s style=top:-.625em><img style=height:.5em;width:1.125em src=b2sn.jpg>
</s></s>
<s style=left:4.24em;top:1.9em> <! beam below >
<s style=top:-.125em><img style=height:.5em;width:1.125em src=b2ns.jpg>
</s></s>
<s style=left:4em><s id=stv>l=<u style=left:-0.2em>=l</u>
</s></s> <! stave >
<s style=left:4.25em> <! notes >
<s style=top:-.625em>q</s> <u style=top:-.375em>Q</u>
<s style=top:-.75em>q</s> <u style=top:-.25em>Q</u>
<s style=top:-.875em>q</s> <u style=top:-.125em>Q</u>
</s>
</s>
</u></u>
]]>