position:relative and line wrapping 1

OsakaWebbie · Jun 5, 2006

I know a few of you may be getting tired of my "chords" code by now, but I think I've been lumping too many questions into one thread, so I'm going to try to keep things more simple.

Today's question: how to get spans with "position:relative" to follow the vertical position of lines when they wrap. (Or another way to accomplish the task with different CSS.)

I will give examples. Here is my original, and favorite, way of placing chords above song lyrics - a piece of the style defs followed by a piece of one song, which is inside a bordered table so it has a width limit and ends up wrapping:

Code:

.chordlyrics {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
  margin-top: 11pt;
  margin-bottom: 0;
  position: relative}
.chord {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
  font-weight: bold;
  color: #E00000;
  position: absolute;
  top: -10pt; }

<p class=chordlyrics><span class=chord>Em</span>You search much <span class=chord>D/F#</span>deeper with<span class=chord>A</span>in, through the way things ap<span class=chord>Em</span>pear</p>
<p class=chordlyrics>You're looking <span class=chord>D/F#</span>into my <span class=chord>A</span>heart</p>

A screen capture of the results can be seen here:

http://proverbs2525.org/tektips/wrapping1.jpg.

As you can see, the "Em" that should appear above the word "appear" (no pun intended) doesn't - it stays above the first line of the paragraph, clumping illegibly with other chords.

Another way I have tried to do this is replacing margin-top:11pt with margin-top:0;line-height:21pt to make room for the chords on the wrapped line. That result can be seen at

http://proverbs2525.org/tektips/wrapping2.jpg.

The wrapped line indeed does leave room for the chord, but there is no improvement in where the chord is written. Also, apparently line-height puts half the extra space above and half below the line, so the very top of the song gets scrunched. I could deal with that programmatically if I have to, but unless I find a way to place the chords correctly, there isn't much point in using this method.

So the basic problem is that "position-relative" seems to be always vertically relative to the beginning of the current paragraph instead of the spot where the <span> actually is. Horizontally, it seems to follow the text flow nicely, but not vertically.

CSS gurus of the world, what say ye? [bigears]

jpadie · Jun 5, 2006

Hi there

have you considered using ruby?

http://www.w3.org/TR/css3-ruby/

it seems a more natural (easaier) fit than trying to match spans.

Justin

OsakaWebbie · Jun 6, 2006

My first attempt to use it seems to indicate that it only works in IE - that is unacceptable. I'm having enough trouble finding any single browser that does everything I need, but for everything except this, Firefox and Opera come closer than IE. If I implemented Ruby for this functionality, I would not just need a "Fire-pera" browser, I'd need a "Explo-fire-pera"! [afro2]

jpadie · Jun 6, 2006

firefox has a (free) extension that supports ruby mark up. opera (so far as i know) does not.

there is a blunt-object workaround to providing ruby support through css. try this code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="[URL unfurl="true"]http://web.nickshanks.com/stylesheets/ruby.css"[/URL] rel="stylesheet"/>
</head>

<body>
  <ruby>
    <rb>When</rb>
    <rt>D</rt>
  </ruby> 
  the music 
  <ruby>
    <rb>fades</rb>
    <rt>A/C#</rt>
  </ruby>
  , all is stripped 
  <ruby>
    <rb>away</rb>
    <rt>Em</rt>
  </ruby>

</body>
</html>

OsakaWebbie · Jun 6, 2006

Interesting. The "blunt-object" code has the odd effect of the lyrics not being in a straight line, but I might check out the extension. But I have a question about ruby in general, which I haven't seen answered yet in things I have glanced through: can I control the font size, color, etc. of the ruby text? The purpose for which ruby is designed (which I am quite familiar with, as I live in Japan) would always want the ruby smaller than the main text, but in my case I want it full-size, bold, and even red sometimes. Will that be possible if I start exploring this?

jpadie · Jun 6, 2006

can I control the font size, color, etc. of the ruby text

Yes, just use css to style it.

the odd effect of the lyrics not being in a straight line

that's just me being lazy. have a look at the following

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="[URL unfurl="true"]http://web.nickshanks.com/stylesheets/ruby.css"[/URL] rel="stylesheet"/>
<style type="text/css">ruby rt {text-align:left; color:red; margin-left:20px; font-size:0.9em;}</style>
</head>
<body>
  <ruby>
    <rb>When the music </rb><rt>D</rt>
	</ruby>	
	<ruby>
	<rb>fades, all is stripped </rb><rt>A/C#</rt></ruby><ruby><rb>away</rb><rt>Em</rt></ruby>
</body>
</html>

OsakaWebbie · Jun 6, 2006

...the odd effect of the lyrics not being in a straight line...that's just me being lazy.

It's not just that. I've been playing around with it, trying to understand how it works (and seeing if I can customize the css for my needs), and it seems that even when I get the delicate balance right (between font sizes and line-heights, I think...I'm not sure, exactly), if I then put the content inside a table that has cellspacing set to anything but zero, it goes out of alignment again. Not a problem in my case, as I don't like cell spacing anyway, but it's kinda weird. Yes, I know the ruby is using some sort of inline table structure to do its thing, but I haven't quite gotten my arms around it yet.

But just when I was getting it to look pretty sweet (in fact, the fact that the stuff is in a little table seems to be solving an annoyance I didn't think I would be able to solve - see posts 4-6 of thread215-1206604: the "icing on the cake"), then the other shoe dropped. I tried it in IE, and the ruby became small again, no doubt because the word "ruby" is already implemented (and by this time I had put the font size stuff in the CSS file rather than the top of my page, so it was not being overwritten). I thought, "No problem - I'll just change the word "ruby" to something else everywhere it appears in the CSS and my page." Strange - it stops working completely if you change the name, even though supposedly it's not magic but just inline tables. What do I not know about how these little tables work that I need to know?

Yes, your code, with the ruby.css unmodified and the font overrides in the page header, did basically work in IE, but the line spacing was quite a bit bigger than in Firefox. Maybe I'll have to go back to doing it that way, but the way I have it now seems so much cleaner...

Last (and possibly least), what was the purpose of your "margin-left:20px"? I don't see any effect of having or not having it, at least the way I'm using the code.

Thanks for an intriguing possibility - I'll give you a star now, even though I don't have the kinks out of it yet.

OsakaWebbie · Jun 8, 2006

...and the kinks are still not working out. I discovered that if I include all the text between chords in the ruby->rb, as in your last example, although that's easiest for my dynamic code and would keep the chords from overlapping (the "icing on the cake"), the table structures cause line wrapping to go all haywire, because it will only wrap at chords, which is completely unnatural.

So I decided to drop the inline-table method for now and try focusing on IE's ruby and the Mozilla extension. But that isn't working either, and I'm hoping it's just my fault. Here's the code I currently have:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ruby Test</title>
<style type="text/css">
ruby {font-size:12pt; font-family:Arial; text-align:left;}
ruby rt {font-size:100%; font-weight:bold; color:red;}
</style>
</head>
<body>
<table width=800 cellspacing=0 cellpadding=0 border=1><tr><td>
  <ruby><rb>When the music </rb><rt>D</rt></ruby>
  <ruby><rb>fades, all is stripped a</rb><rt>A/C#</rt></ruby>
  <ruby><rb>way, and I simply </rb><rt>Em</rt></ruby>
  <ruby><rb>come </rb><rt>Asus&nbsp; A</rt></ruby>
</td></tr></table>
<table width=400 cellspacing=0 cellpadding=0 border=1><tr><td>
  <ruby><rb>When the music </rb><rt>D</rt></ruby>
  <ruby><rb>fades, all is stripped a</rb><rt>A/C#</rt></ruby>
  <ruby><rb>way, and I simply </rb><rt>Em</rt></ruby>
  <ruby><rb>come </rb><rt>Asus&nbsp; A</rt></ruby>
</td></tr></table>
</body>
</html>

(The table is used in order to force a line wrap in different places by changing the width.) I know that for the main purpose of ruby (called furigana in Japanese), small and centered is the proper way, but in CSS we can do anything, right? Well, it seems that IE obeys my font-size specification, but ignores my text-align:left - it just centers everything anyway:

http://proverbs2525.org/tektips/wrapping3.jpg.

The Firefox extension obeys the text-align:left as long as the line doesn't wrap, but ignores the font-size (whether I do it with 100% or an explicit 12pt - I tried both). When a line wraps, then it too decides I must want my ruby centered:

http://proverbs2525.org/tektips/wrapping4.jpg.

And if I take it out of the table and let it be in a simple <p> or <div>, it also centers even though it's just one line - I have to have a wide table to make it listen to a left-justify command. No wonder computers make people crazy!

Does anyone know how I can get IE to left-justify the ruby? If I can at least get IE behaving, then I can experiment more on what to do with either of the two Firefox solutions to get something to work (it'll be hard to go back and forth between them because I have to install and uninstall the extension over and over, but we'll cross that bridge when we come to it). For my routine that makes customized layouts for printing songsheets I can insist on a specific browser, but for my basic page that shows all info about a song, it should work in at least IE and Firefox.

OsakaWebbie · Jun 9, 2006

I see that jpadie isn't actively watching this thread. I'm gradually figuring things out on my own, but it's slow going. I did learn that I needed to use "ruby-align" rather than "text-align" to get IE to left-justify, but the Firefox extension ignores that too, in addition to the font-size stuff, so for Firefox I think I will have to use the inline-table method (the CSS file jpadie showed me). And I also learned that the problem the inline-table method had of not wrapping except at chords (if I put all the text inside the ruby tags) is true also of the regular implementation in IE. So if I really want to implement this, I'll have to guess how wide each chord is and take just a little more than that of text to associate with it each time - that will be a big coding challenge! I had hoped perhaps to just put one character of text in each and let the ruby just overhang the following text, but apparently IE's "ruby-overhang" attribute doesn't actually work - you'd think they would have fixed it by now, since ruby has been in IE since version 5.0. Oh, well.

My current puzzle is how to adjust the line spacing. The chords appear closer to the line above them than the line below, which is confusing (you can see it in

http://proverbs2525.org/tektips/wrapping3.jpg

- "Asus A" is closer to "When the" than to "come"). I want to make the ruby and its text closer together than they are by default, but I can't find any attribute that has any effect on it. Does anyone have a clue about that?

jpadie · Jun 9, 2006

i'm here! i've just unclicked the mail me button as i was getting more than 50 mails a day from tektips...

but i have been busy - damn clients keep wanting my time. i'll have a play this afternoon though. i'm not surprised your having trouble with IE. i had really meant from the start to use a css implementation of ruby. i'm going to have a play with your issue in strict rather than quirks. i had a brief try yesterday and by changing the positioning of the tags i was able to achieve what you wanted - i deliberately did not use tables other than inlines. i used normal divs instead. will this break your site design?

OsakaWebbie · Jun 9, 2006

...damn clients keep wanting my time.

But they pay the bills, right?

i used normal divs instead. will this break your site design?

It's only needed in two files, so I can work with that. In fact, one of them doesn't use tables now, anyway (the one that just lays out songs for printing), and I think I can make the other one work with divs (it may require learning CSS a little more, but that would be good for me anyway). If necessary, I can put the lyrics/chords section in its own iframe or something. If you can make these chords behave, I'll bend over backwards around it!

An additional benefit I discovered with using ruby tags instead of position:relative - this stuff now can be put into a ruby-capable word processor with the chords intact, when necessary. I can't just copy/paste, but if I save the page as an HTML file and then do "Insert->File" in Word, it recognizes the ruby as ruby (the bold font is lost, but the rest seems to work in my initial little test) - sweet!

OsakaWebbie · Jul 7, 2006

Hey, jpadie - are the clients still consuming your time? If so, I understand. But you said that you had started on a code idea for me - if you don't mind sharing what you have even if you don't have the kinks ironed out of it, that would be great. I put this project on hold for a while to give you a chance to do whatever you are willing to do with it (and I have also been busy with other things!).

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

position:relative and line wrapping 1

OsakaWebbie

Programmer

jpadie

Technical User

OsakaWebbie

Programmer

jpadie

Technical User

OsakaWebbie

Programmer

jpadie

Technical User

OsakaWebbie

Programmer

OsakaWebbie

Programmer

OsakaWebbie

Programmer

jpadie

Technical User

OsakaWebbie

Programmer

OsakaWebbie

Programmer

Similar threads

Part and Inventory Search

Sponsor