Interlinear text

Here we are stacking the KJV, Greek, Strong's Numbers and Robinson's morphology codes for a verse. For example, in Matt 1:19 the first word would be (Then,δε,1161,CONJ). To make wrapping work, we need for each of these to be "inline" in HTML. But we want it to stack as in

Then
δε
1161
CONJ

This requires "block" display in HTML.
<span> is the natural specifier of inline elements and <div> is the natural specifier of block elements. AFAIK, neither of these have any other styling information. So the following is the logical representation:

<span>
  <div>Then</div>
  <div>δε</div>
  <div>1161</div>
  <div>CONJ</div>
</span>

However, strict HTML does not allow for <div> to be in a <span>. But <span> can contain <span>. So then we want:

<span>
  <span>Then</span>
  <span>δε</span>
  <span>1161</span>
  <span>CONJ</span>
</span>

But this does not work, as is, because it span is inline. Fortunately, one can make any inline element be a block element. So the following works:

<span>
  <span style="display:block">Then</span>
  <span style="display:block">δε</span>
  <span style="display:block">1161</span>
  <span style="display:block">CONJ</span>
</span>

Now the problem is that if we have two of these "words", they stack. To solve this, we make the whole thing float left:

<span style="float:left">
  <span style="display:block">Then</span>
  <span style="display:block">δε</span>
  <span style="display:block">1161</span>
  <span style="display:block">CONJ</span>
</span>

While this works to flow the words correctly, floating does not allow for spacing between words. To solve this we need to add space after each "word", using em so that when user's make the text bigger or smaller, the space remains proportional. Likewise, when the "words" are wrapped to the next "line" it needs to have some spacing between the lines.

<span style="float:left; padding: 0 0.5em 0.5em 0">
  <span style="display:block">Then</span>
  <span style="display:block">δε</span>
  <span style="display:block">1161</span>
  <span style="display:block">CONJ</span>
</span>

Of course, anyone who uses style attributes and not CSS should be ridiculed. ;) So this should be

<style type="text/css">
span.word {float:left; padding: 0 0.5em 0.5em 0 }
span.stack { display: block; }
</style>
...
<span class="word"><span class="stack">Then</span><span class="stack">δε</span><span class="stack">1161</span><span class="stack">CONJ</span></span>

By making the css a touch more complicated we can simplify the construction a bit more:

<style type="text/css">
span.word {float:left; padding: 0 0.5em 0.5em 0 }
span.word span { display: block; }
span.word span span { display: inline}
</style>
<span class="word"><span>Then</span><span>δε</span><span>1161</span><span>CONJ</span></span>

A bit of explanation is in order. CSS allows for more than one rule to apply to an element. In this example, the second rule applies to all spans below a span.word, regardless of depth. But we only want it to apply to the immediate child. So, the last rule restores the span behavior to all descendant spans within a "stack" elements. It probably is necessary to put all the words in a verse into a verse container. If so then we can do away with the class="word" with the following more complicated css:

<style type="text/css">
span.verse span {float:left; padding: 0 0.5em 0.5em 0 }
span.verse span span { float:none; padding: 0; display: block; }
span.verse span span span { display: inline}
</style>
<span class="verse">
  <span><span>Then</span><span>δε</span><span>1161</span><span>CONJ</span></span>
   ...other words...
</span>

Because of CSS, we need to turn off what is added

An example of how to represent interlinear text

Example output

Explanation