An example of how to represent interlinear text

Example output

Luke 2:37

Explanation

In HTML, elements that follow one another horizontally are inline elements. But elements that follow one another vertically are block elements. <span> is the natural specifier of inline elements and <div> is the natural specifier of block elements.

Here we are stacking the KJV, Greek from the TR, 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).

We want it to stack as in:

    Then
     δε
    1161
    CONJ
    

So the following is the logical representation:

    <span>
      <div>Then</div>
      <div>δε</div>
      <div>1161</div>
      <div>CONJ</div>
    </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 a 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-right: 0.5em">
      <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-right: 0.5em; margin-bottom: 1em;  }
      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-right: 0.5em; margin-bottom: 1em;  }
      span.word>span { display: block; }
    </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-right: 0.5em; }
      span.verse>span>span { clear:both; display: block; }
    </style>
    <span class="verse">
      <span><span>Then</span><span>δε</span><span>1161</span><span>CONJ</span></span>
       ...other words...
    </span>
    

Handling of verse references and added words takes special care. They don't have a full stack of parts. When the width of the screen is reduced, wrapping needs to put words to the left most border. However, floating will make them go to the left until they meet something shorter.

The key consideration is that each "word" needs to have the same height, which includes verse references and added words. The easiest way to do this is to set the height of the span for the word to be a touch more than the stack of the parts to that word. The height of a line of text is about 1.25em. So 4 lines is about 5em. And to make reading easier there should be a bit of space between lines.

    <style type="text/css">
      span.verse > span { height : 5em; margin-bottom: 1em; }
    </style>