<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Interlinear text</title>
<style type="text/css">
/* Layout */
/* Define the nature of a "word" as the direct children of a "box" container. */
/* Make the words follow the prior */
div.verse
{
display : inline-flex;
}
div.box
{
display : inline-flex;
flex-flow : row wrap;
}
/* Spacing */
/* To make the display of wrapped words pleasing, some space needs to be added between lines. */
/* Use margin to add space between lines */
div.box > *
{
margin-top : 0.25em;
margin-bottom : 0.25em;
}
/* Put spacing between items. */
/* By putting the same amount left and right of items a border will go right between them. */
/* But don't put padding before the first. */
div.box > *:not(:first-child)
{
padding-left : 0.25em;
}
/* But don't put padding after the last. */
div.box > *:not(:last-child)
{
padding-right : 0.25em;
}
/* Borders */
/* Borders go between padding and margin */
/* Put a border between items */
div.box > *:not(:last-child)
{
border-right : 1px solid orange;
}
/* Underline the verse text which is text, punct or added */
.text,
.punct
{
border-bottom : 3px double red;
}
.added
{
border-bottom : 3px double green;
}
/* Text styles */
div.box
{
/* Center each text */
text-align : center;
/* And if it is a phrase, it should not wrap */
white-space : nowrap;
}
/* Make line text stand out, but not references */
.text,
.punct
{
font-weight : bold;
}
/* Define a style for references */
.ref
{
font-weight : normal;
text-align : super;
font-size : 75%;
color : gray;
}
/* Italicize for added text */
.added
{
font-style : italic;
font-weight : normal;
}
/* lemma.TR is orange */
.greek
{
color : orange;
}
/* Strong Numbers are red */
.strong
{
color : red;
}
/* Morphology is red */
.morph
{
color : violet;
}
</style>
</head>
<body>
<h1>An example of how to represent interlinear text</h1>
<h2>Introduction</h2>
<p>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:
</p>
<ol>
<li>English from the KJV.</li>
<li>Original Greek from Stephanus' TR.</li>
<li>Underlying root Greek word, keyed to the Abbott-Smith lexicon.</li>
<li>Strong's Number.</li>
<li>Robinson's Morphologic Code</li>
</ol>
<p>This could be extended to show transliteration for the Greek
and the order of the words in Stephanus' TR
</p>
<h2>Example output</h2>
<h3>Matthew 1:19</h3>
<div class="verse">
<div class="ref">19</div>
<div class="box">
<div>
<div class="text">Then</div>
<div class="greek">δε</div>
<div class="strong">δέ</div>
<div class="strong">1161</div>
<div class="morph">CONJ</div>
</div>
<div>
<div class="text">Joseph</div>
<div class="greek">ιωσηφ</div>
<div class="strong">Ἰωσήφ</div>
<div class="strong">2501</div>
<div class="morph">N-PRI</div>
</div>
<div>
<div class="text">her</div>
<div class="greek">αυτης</div>
<div class="strong">αὐτός</div>
<div class="strong">846</div>
<div class="morph">P-GSF</div>
</div>
<div>
<div class="text">husband,</div>
<div class="box">
<div>
<div class="greek">ο</div>
<div class="strong">ὁ</div>
<div class="strong">3588</div>
<div class="morph">T-NSM</div>
</div>
<div>
<div class="greek">ανηρ</div>
<div class="strong">ἀνήρ</div>
<div class="strong">435</div>
<div class="morph">N-NSM</div>
</div>
</div>
</div>
<div>
<div class="text">being</div>
<div class="greek">ων</div>
<div class="strong">εἰμί</div>
<div class="strong">1510</div>
<div class="morph">V-PAP-NSM</div>
</div>
<div>
<div class="text">a just</div>
<div class="greek">δικαιος</div>
<div class="strong">δίκαιος</div>
<div class="strong">1342</div>
<div class="morph">A-NSM</div>
</div>
<div>
<div class="text added">man,</div>
</div>
<div>
<div class="text">and</div>
<div class="greek">και</div>
<div class="strong">καί</div>
<div class="strong">2532</div>
<div class="morph">CONJ</div>
</div>
<div>
<div class="text">not</div>
<div class="greek">μη</div>
<div class="strong">μή</div>
<div class="strong">3361</div>
<div class="morph">PRT-N</div>
</div>
<div>
<div class="text">willing</div>
<div class="greek">θελων</div>
<div class="strong">θέλω</div>
<div class="strong">2309</div>
<div class="morph">V-PAP-NSM</div>
</div>
<div>
<div class="text">to make</div>
<div class="greek">παραδειγματισαι</div>
<div class="strong">παραδειγματίζω</div>
<div class="strong">3856</div>
<div class="morph">V-AAN</div>
</div>
<div>
<div class="text">her</div>
<div class="greek">αυτην</div>
<div class="strong">αὐτός</div>
<div class="strong">846</div>
<div class="morph">P-ASF</div>
</div>
<div>
<div class="text">a publick example,</div>
<div class="greek">παραδειγματισαι</div>
<div class="strong">παραδειγματίζω</div>
<div class="strong">3856</div>
<div class="morph">V-AAN</div>
</div>
<div>
<div class="text">was minded</div>
<div class="greek">εβουληθη</div>
<div class="strong">βούλομαι</div>
<div class="strong">1014</div>
<div class="morph">V-AOI-3S</div>
</div>
<div>
<div class="text">to put</div>
<div class="greek">απολυσαι</div>
<div class="strong">ἀπολύω</div>
<div class="strong">630</div>
<div class="morph">V-AAN</div>
</div>
<div>
<div class="text">her</div>
<div class="greek">αυτην</div>
<div class="strong">αὐτός</div>
<div class="strong">846</div>
<div class="morph">P-ASF</div>
</div>
<div>
<div class="text">away</div>
<div class="greek">απολυσαι</div>
<div class="strong">ἀπολύω</div>
<div class="strong">630</div>
<div class="morph">V-AAN</div>
</div>
<div>
<div class="text">privily.</div>
<div class="greek">λαθρα</div>
<div class="strong">λάθρᾳ</div>
<div class="strong">2977</div>
<div class="morph">ADV</div>
</div>
</div>
</div>
<h3>Luke 2:37</h3>
<p>Showing punctuation isolated.</p>
<div class="verse">
<div class="ref">37</div>
<div class="box">
<div>
<div class="text">And</div>
<div class="greek">και</div>
<div class="strong">καί</div>
<div class="strong">2532</div>
<div class="morph">CONJ</div>
</div>
<div>
<div class="text">she</div>
<div class="greek">αυτη</div>
<div class="strong">οὗτος</div>
<div class="strong">3778</div>
<div class="morph">D-NSF</div>
</div>
<div>
<div class="text added">was</div>
</div>
<div>
<div class="text">a widow</div>
<div class="greek">χηρα</div>
<div class="strong">χήρα</div>
<div class="strong">5503</div>
<div class="morph">N-NSF</div>
</div>
<div>
<div class="text">of about</div>
<div class="greek">ως</div>
<div class="strong">ὡς</div>
<div class="strong">5613</div>
<div class="morph">ADV</div>
</div>
<div>
<div class="text">fourscore and four</div>
<div class="greek">ογδοηκοντατεσσαρων</div>
<div class="box">
<div>
<div class="strong">ὀγδοήκοντα</div>
<div class="strong">3589</div>
</div>
<div>
<div class="strong">τέσσαρες</div>
<div class="strong">5064</div>
</div>
</div>
<div class="morph">A-GPN</div>
</div>
<div>
<div class="text">years</div>
<div class="greek">ετων</div>
<div class="strong">ἔτος</div>
<div class="strong">2094</div>
<div class="morph">N-GPN</div>
</div>
<div>
<div class="text punct">,</div>
</div>
<div>
<div class="text">which</div>
<div class="greek">η</div>
<div class="strong">ὅς</div>
<div class="strong">3739</div>
<div class="morph">R-NSF</div>
</div>
<div>
<div class="text">departed</div>
<div class="greek">αφιστατο</div>
<div class="strong">ἀφίστημι</div>
<div class="strong">868</div>
<div class="morph">V-INI-3S</div>
</div>
<div>
<div class="text">not</div>
<div class="greek">ουκ</div>
<div class="strong">οὐ</div>
<div class="strong">3756</div>
<div class="morph">PRT-N</div>
</div>
<div>
<div class="text">from</div>
<div class="greek">απο</div>
<div class="strong">ἀπό</div>
<div class="strong">575</div>
<div class="morph">PREP</div>
</div>
<div>
<div class="text">the temple</div>
<div class="box">
<div>
<div class="greek">του</div>
<div class="strong">ὁ</div>
<div class="strong">3588</div>
<div class="morph">T-GSN</div>
</div>
<div>
<div class="greek">ιερου</div>
<div class="strong">ἱερόν</div>
<div class="strong">2411</div>
<div class="morph">N-GSN</div>
</div>
</div>
</div>
<div>
<div class="text punct">,</div>
</div>
<div>
<div class="text">but served</div>
<div class="greek">λατρευουσα</div>
<div class="strong">λατρεύω</div>
<div class="strong">3000</div>
<div class="morph">V-PAP-NSF</div>
</div>
<div>
<div class="text added">God</div>
</div>
<div>
<div class="text">with fastings</div>
<div class="greek">νηστειαις</div>
<div class="strong">νηστεία</div>
<div class="strong">3521</div>
<div class="morph">N-DPF</div>
</div>
<div>
<div class="text">and</div>
<div class="greek">και</div>
<div class="strong">καί</div>
<div class="strong">2532</div>
<div class="morph">CONJ</div>
</div>
<div>
<div class="text">prayers</div>
<div class="greek">δεησεσιν</div>
<div class="strong">ὅς</div>
<div class="strong">1162</div>
<div class="morph">N-DPF</div>
</div>
<div>
<div class="text">night</div>
<div class="greek">νυκτα</div>
<div class="strong">νύξ</div>
<div class="strong">3571</div>
<div class="morph">N-ASF</div>
</div>
<div>
<div class="text">and</div>
<div class="greek">και</div>
<div class="strong">καί</div>
<div class="strong">2532</div>
<div class="morph">CONJ</div>
</div>
<div>
<div class="text">day</div>
<div class="greek">ημεραν</div>
<div class="strong">ἡμέρα</div>
<div class="strong">2250</div>
<div class="morph">N-ASF</div>
</div>
<div>
<div class="text punct">.</div>
</div>
</div>
</div>
<h2>Explanation</h2>
<p>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.
</p>
<p>Here we are stacking the KJV, Greek from the TR, Strong's Numbers and Robinson's morphology codes for a verse.<br/>
For example, in Matt 1:19 the first word would be (Then,δε,1161,CONJ).
</p>
<p>We want it to stack as in:
<pre>
Then
δε
1161
CONJ
</pre>
This requires "block" display in HTML.
</p>
<p>So the following is the logical representation:
<pre>
<span>
<div>Then</div>
<div>δε</div>
<div>1161</div>
<div>CONJ</div>
</span>
</pre>
However, strict HTML does not allow for <div> to be in a <span>. But <div> can contain <div>.
</p>
<p>So then we want:
<pre>
<div>
<div>Then</div>
<div>δε</div>
<div>1161</div>
<div>CONJ</div>
</div>
</pre>
</p>
<p>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.
</p>
<p>So the following works:
<pre>
<div style="display:inline-flex">
<div>
<div>Then</div>
<div>δε</div>
<div>1161</div>
<div>CONJ</div>
</div>
</div>
</pre>
</p>
<p>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.
</p>
<p>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.
<pre>
<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>
</pre>
</p>
<p>Of course, anyone who uses style attributes and not CSS should be ridiculed. ;)
</p>
<p>So this should be:
<pre>
<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>
</pre>
</p>
<p>All that remains is styling the text so that it is centered and filled from the top down:
<pre>
<style type="text/css">
<strong>div.box</strong>
{
text-align : center;
}
</style>
</pre>
</p>
<p>To see exactly how this page is styled, view the source.</p>
</body>
</html>