span with zero-width

#1 July 20th, 2005, 11:45 PM

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

#2 July 20th, 2005, 11:45 PM

rhavin@shadowtec.de (.rhavin) wrote:
[color=blue]
> I'm trying to put Accords above my Lyrics.
> Unfortunately, it's all fine in Opera but
> won't work in IE...[/color]

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/

What is Bytes?

Popular Articles