Parallel columns

When multiple languages must be visible at the same time, facing-page layouts are a standard solution for codex books. For more than two languages, more complex page layouts have a history going back to the Complutensian Polyglot Bible of 1522.

We can do this in a bilingual ebook, too. For more than two languages, the screen may be too narrow, but on tablets (at least) a two-column parallel display can work fine. Chapter 1 of the ebook shows how.

Tagging

The text of chapter 1 is tagged thus:

• Each verse is wrapped in an HTML div element with class="pair".
• Within the verse, the English text is wrapped in an HTML div element with class="en", the French text in a div with class="fr".

For example, the first two verses have the following structure:

    <div class="pair">
      <div id="Ruth.1" class="en">
        <p id="P-7138">Now it came to pass in the days when ... </p>
      </div>
      <div class="fr">
        <p><span>1.1 Du temps des juges, il y une famine ... </span></p>
      </div>
    </div>
    <div class="pair">
      <div class="en">
        <p id="P-7139">And the name of the man ...</p>
      </div>
      <div class="fr">
        <p><span>1.2 Le nom de cet homme était 
           Élimélec, ... </span></p>
      </div>
    </div>
        

(The differences of internal structure in the English and French reflect the HTML structure of the source texts. In a serious project both versions would be given more similar markup.)

Styling

The stylesheet then styles the parallel text as follows. First, div class="pair" is displayed as a table.

    div.pair {
      display: table;
      width: 100%;
    }
      

N.B. An early version class had: display: table-row; not display: table; this treats an entire chapter's worth of verses as a single table. Some reading systems won't split tables across pages, so they just lose the overflow. Making each pair be a separate table solves this problem, as long as each verse is short enough to fit on a single page. (True here; not necessarily easy for other texts.)

The two versions of the verse, in turn, were displayed as table cells, each half the width of the table, with two quads of space between them (a one-quad right padding in the left column, one-quad left padding in the right column).

    div.en {
      display: table-cell;
      width: 48%;
      padding-right: 1em;
    }
    div.fr {
      display: table-cell;
      width: 48%;
      padding-left: 1em;
      padding-right: 0.5em;
      font-family: Times Roman, serif;
    }
        

The cells are given a width of 48%, not 50%, because otherwise some reading systems (not all!) overfill the table and text is lost in the right margin. The padding-right setting for French is set for the same reason.