From time to time I play with different representations of interlinear text. I thought I’d share the latest iteration which uses CSS3 and HTML5 Flex Box layout:
Title: Interlinear text
An example of how to represent interlinear text
Introduction
Interlinear text lines up the text from one translation with details from another translation. The most common print is to pair underlying Greek with a person's language. Here, we are combining the text from the KJV with Greek:
- English from the KJV.
- Original Greek from Stephanus' TR.
- Underlying root Greek word, keyed to the Abbott-Smith lexicon.
- Strong's Number.
- Robinson's Morphologic Code
This could be extended to show transliteration for the Greek and the order of the words in Stephanus' TR
Example output
Matthew 1:19
Luke 2:37
Showing punctuation isolated.
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
This requires "block" display in HTML.
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 <div> can contain <div>.
So then we want:
<div>
<div>Then</div>
<div>δε</div>
<div>1161</div>
<div>CONJ</div>
</div>
But this does not work, as is, because a div is a block element. Fortunately, one can make any block element be an inline element. CSS3 and HTML5 have a flexible layout mechanism called flex box, that will allow child elements to be laid out as inline elements.
So the following works:
<div style="display:inline-flex">
<div>
<div>Then</div>
<div>δε</div>
<div>1161</div>
<div>CONJ</div>
</div>
</div>
While this works to flow the words correctly, spacing between one inline block and the next may or may not touch depending on whether there is whitespace (newlines, spaces and/or tabs) between <div> elements.
Alternatively, one can use CSS3 and HTML5 to solve this using flex box layout. Basically, any container can be made to layout its contents as inline-block elements ignoring spacing between elements. 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.
<div style="display:inline-flex">
<div style="margin-top:0.25em;margin-bottom:0.25em;padding-left:0.25em;padding-right:0.25em">
<div>Then</div>
<div>δε</div>
<div>1161</div>
<div>CONJ</div>
</div>
</div>
Of course, anyone who uses style attributes and not CSS should be ridiculed. ;)
So this should be:
<style type="text/css">
div.box
{
display : inline-flex;
}
div.box > div
{
margin-top : 0.25em;
margin-bottom : 0.25em;
padding-left : 0.25em;
padding-right : 0.25em;
}
</style>
...
<div class="box">
<div>
<div>Then</div>
<div>δε</div>
<div>1161</div>
<div>CONJ</div>
</div>
All that remains is styling the text so that it is centered and filled from the top down:
<style type="text/css">
div.box
{
text-align : center;
}
</style>
To see exactly how this page is styled, view the source.
This will work in all modern browsers. For Microsoft, that is IE 11. If you’d like to see the other two iterations, let me know. In Him, DM Smith
_______________________________________________ sword-devel mailing list: sword-devel@crosswire.org http://www.crosswire.org/mailman/listinfo/sword-devel Instructions to unsubscribe/change your settings at above page
