For narrow screens, single-column display may be necessary. We can still present two languages (and maybe more?) if we keep them visually distinct.
In chapter 2, the text is tagged thus:
p
element.
English and French versions of the text alternate.class="eng"
,
French verses have class="fra"
.For example, the first two verses of chapter 2 have the following structure:
<p class="eng" id="P-7160">And Naomi had a kinsman of her husband's, ... his name was Boaz.</p> <p class="fra">2.1 Naomi avait un parent de son mari ...qui se nommait Boaz.</p> <p class="eng" id="P-7161">And Ruth the Moabitess said unto Naomi ...</p> <p class="fra">2.2 Ruth la Moabite dit à Naomi: ...</p>
Chapter 3 uses the same
pattern, but uses the values english
and
francais
for the class
attributes. (This is solely to allow us to write different
CSS style rules for the two chapters.)
Note that no element uniting the English-French pair is
needed for for styling the text. It would do no harm to
have a div
element similar to the
div
elements with class="pair"
in
chapter 1, and it might make hyperlinking to verses easier.
Such elements are omitted here for brevity. (In a real
bilingual book, it would probably be better to have them.)
In chapter 2, the stylesheet displays the two languages in the same font and with the same indentation, but sets English in bold and French in a lighter weight.
p.eng { font-weight: bold; font-family: Times Roman, serif; } p.fra { font-weight: lighter; font-family: Times Roman, serif; }
In chapter 3, a more dramatic typographic contrast is used, based loosely on the example on page 50 of Alex White's book How to spec type (New York: Watson-Guptill, 1987).
p.english { padding: 0 50% 0 0; margin: 0; text-align: right; font-family: Helvetica, sans serif; color: #BF8040; } p.francais { padding: 0 0.5em 0 50%; margin: 0; text-align: left; font-family: Helvetica, sans serif; font-style: italic; color: #4073BF; }
Some designers might prefer to set the different languages in different fonts, instead of different colors and (as here) in different postures or (like White) in different weights. The style shown here engages in systematic overkill to try to ensure that in almost any reading system, there is some visual distinction between the languages. Be aware, though, that the use of color may be challenging in reading systems which allow the user to change between a 'day' mode with black text on white background and a 'night' mode (white o black).