468,257 Members | 1,509 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,257 developers. It's quick & easy.

span with zero-width

I'm trying to put Accords above my Lyrics.
Unfortunately, it's all fine in Opera but
won't work in IE... any suggestions?
(thanx for help)

example-code:

<html><head>
</head><body>
<p style="line-height:150%">this is a Te<span
style="position:relative;
top:-0.6em;
text-align:center;
width:0px;
font-size:75%">C#m</span>st-line in a paragraph</p>
<div style="line-height:150%">Dies ist another Te<span
style="position:relative;
top:-0.6em;
text-align:center;
width:0px;
font-size:75%">C#m</span>st-line as DIV</div>
</body></html>

the final version (use Opera) should look like this:

http://www.shadowtec.de/cgi-bin/sw0....Fairytale:en-I
Jul 20 '05 #1
1 3030
rh****@shadowtec.de (.rhavin) wrote:
I'm trying to put Accords above my Lyrics.
Unfortunately, it's all fine in Opera but
won't work in IE...


I think there's a simple way to achieve it on IE, but I don't know how to
combine it with a way that works on Opera.

IE supports a subset of Ruby markup, as defined in a W3C recommendation
(and included into XHTML 1.1). The default rendering uses a tiny font
and makes the annotation appear relatively far from the base text, but
you can use e.g.

rt { font-size: 70%; font-family: Verdana;
vertical-align: -0.4em; }

and markup like

this is a <ruby><rb>Test-line</rb><rt>C#m</rt></ruby> in a paragraph

Disclaimer: The implementation of Ruby isn't very robust. Attempts to use
positioning on ruby annotations seems to result in a disaster, but
vertical-align can be used.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

By using this site, you agree to our Privacy Policy and Terms of Use.