Diglossic, parallel CSS

diglossic-text.css (link to the stylesheet) is a stylesheet to help create diglossic texts with proper text flow, and progressive, correct, HTML. Its features include:

• aligning like elements in rows,
• selectable, single-source texts,
• unobstructed by excessive HTML-isms like div or table,
• being completely readable without CSS rendering.

I have a demo set up on this website. Here is what it looks like:

Why make this, you may ask? The Loeb Classical Library is a beautiful series of Latin and Greek texts, published with English translations by Harvard University Press. The series features source texts on the left page, with the English on the right page. All other implementations of parallel web text fall short on at least one of the goals above.

Add it to your stupid webpage

It is supported by all modern desktop web browsers (Chrome, Firefox, … ). To use the stylesheet, add the following line to your document head:

<link href="/diglossic-text.css" rel="stylesheet">

Then, format your text (assuming a Markdown syntax) like this:

This paragraph will not be rendered in two columns.

<div class="diglossic-text">

<!-- --><span class="diglossic-l"></span>

### First text

Lorem ipsum dolor sit amet...

<!-- --><span class="diglossic-r"></span>

### Second text

Pain itself desires pain...

</div>

This text is outside of the diglossic text.

Keep in mind that only the block-level elements of h1--h6, p, blockquote, and pre are rendered in parallel. Everything else is ignored. Also, parallel texts must have the same number of elements to line up properly.