Hacking at 0300

The Torah as traditionally written has two kinds of paragraph breaks: "open" and "closed". Open paragraphs are the same as in English typography: the next paragraph starts on the next line. Closed paragraphs start the next paragraph on the same line, after a 9-em gap. In the image on the page linked to above, there are 3 closed paragraph breaks, 2 open, then 1 closed.

I was thinking about representing this in CSS, with semantic HTML; something like <p class=open>First Paragraph</p><p class=closed>Second paragraph</p>. The Mechon Mamre tikkun uses a single <p> for the entire portion, then has <br>'s and  's hard-coded into the text. But there ought to be a better way.

See the final formatting.

Clearly, the closed paragraphs need to be display: inline to allow the next paragraph to stay on the same line. But an open paragraph that follows a closed one needs to be inline as well, since it has to start on the same line. Then I have to insert the paragraph-breaking characters (either the non-breaking spaces or the newline) with the ::after pseudo-element. Then I need to make the paragraphs white-space: pre-line to make the browser respect the newlines.

And as another subtlety, I want the text justified, but text-align: justify doesn't work on inline elements. So I have to apply that to the surrounding element.

In summary:

body {
	text-align: justify;
}
p.open, p.closed{
	display: inline;
	white-space: pre-line;
	text-align: justify;
}
p.open::after {
	content: '\a'; /* newline */
}
p.closed::after {
	content: '\a0\a0\a0\a0\a0\a0\a0\a0\a0'; /* spaces, not newline */
}

Another issue is the layout of poetry. Poems in the Torah are arranged either with the lines divided into two phrases, the first right justified and the second left justified (remember, Hebrew is read from right to left), creating two columns of text; or alternating two-phrase lines as above with three-phrase lines, with the first word right justified, the last word left justified, and the remainder of the text centered in the line (not between the other words; centered between the margins). float would work for the justified phrases, but the centering would be wrong, and I would have to worry about clearing the floats. So I use position: absolute for the text at the margins and text-align: center for the rest. The problem then is the two-phrase lines have no center text, so they have zero height and overlap the next line. So I have to add a blank with::after:

p.poem {
	position: relative;
	text-align: center;
}
p.poem > span:first-child {
	position: absolute;
	left: 0;
}
p.poem > span:last-child {
	position: absolute;
	right: 0;
}
p.poem::after {
	content: '\a0';
}

For the interested, the arrangement of the poems is described in Talmud Bavli, Megillah 15a as לבינה על גבי לבינה, one brick on another, or אריח על גבי לבינה, a half-brick on a full brick. Reminds me of building with Lego.