How can I write additional text directly beneath"normal" text with CSS?

Question

I am trying to create an HTML document that should look something like

Some text that spans multiple rows
4    4    4    5     8        4        

but that has some statistical information
3   4    3   4    11          12                      

beneath almost every word
7       6      5     4

I have tried something like

<span>Some<br>4</span>
<span>text<br>4</span>...

and

<style>
  table {display:inline}
</style>

...

<table><tr><td>some</td><td>4</td></tr></table>
<table><tr><td>text</td><td>4</td></tr></table>

both of which didn't give me the desired result.

So, can I solve this problem with CSS?

Answer 1

Something like this should do it:

<p>
  <span>Foo<span class="stat">3</span></span>
  <span>Bar<span class="stat">3</span></span>
</p>

p {
  line-height: 2em;
}

span {
  position: relative;
}

span.stat {
  position: absolute;
  left: 0;
  top: 1em;
}

That's going to be quite a lot of markup... O_O;;

Answer 2

<table>
<tr><td>some</td><td>text</td></tr>
<tr><td>4</td><td>5</td></tr>
</table>

Answer 3

You could try using lists:

<ul>
  <li>
    Some<br/>4
  </li>
  <li>
    text<br/>4
  </li>
  ....
</ul>

The list items will each contain a word plus a digit below. Long texts will wrap to several lines keeping the structure.

Answer 4

A table is probably the sensible solution, and will guarantee correct alignment in all browsers. You need to 1) decide how many words N you want on a line (this determines the number of columns in your table), 2) divide up the text you want to render into N word chunks, then 3) Populate every other row in the table with the chunked text, and the rows in between with the stats.

Edit: just seen your comment re wanting to let the browser control words per line. In that case i think the <li> solution from Developer Art is probably best.

Answer 5

While this question already has an accepted answer, it might be worth considering an alternative. I will offer, in advance, that this isn't necessarily cross browser (I don't imagine that IE < 8 will do much with it for example) compatible.

Assuming the markup of:

<p class="statisticText"><span title="4">Some</span> <span title="5">text</span> <span title="2">with</span> <span title="1">associated</span> <span title="1">information</span>.</p>

The following css should approximate what you're trying to achieve:

p.statisticText {line-height: 2em; }

p.statisticText span {position: relative; top: -0.75em; }

p.statisticText span:before {content: attr(title); position: absolute; top: 1em; left: 0; }

I've not experimented to present it as you'd like, but just in case you'd like an alternative option, with a little less mark-up (but not by much). And, of course, don't mind considering something that's restricted to compliant browsers...

Answer 6

<div class="lefty">Some<br/>4</div>
<div class="lefty">Text<br/>10</div>

.lefty{float:left;}