Behold the attached image:
The first verse, because it is treated as a block-displayed DIV (in order to enable text-indent), has a different density of lines from that of all the other verses that follow, because they are treated as inline-displayed DIVs.
In those places where every verse is block-displayed, there is no problem. But the more-rhetorical portions have this problem, which is causing me no small chagrin.

Even with this, Prince is the winner. I am crazy enough about it that I would stand that kind of thing in the final product. I just hope I don’t have to. Any ideas?

I was convinced that line-stacking-strategy could help, but it didn’t. I could settle for either spacing out the first verse’s lines, or pressing the others closer together.

1. Στιγμιότυπο 2014-05-19, 11.54.45 μ.μ..png‎ 181.6 kB ‎
   2 Cor 1

Sorry, can you clarify exactly what markup and styling you are using here? It's probably just a matter of different line-height settings.

There isn’t even a mention of line-height in there. I did think about setting line-height, but in fact it doesn’t have much of an effect on the consequent verses. I can’t reliably set the line-height of the first one either (to match it to the consequent) because, since I do not mention line-height anywhere, I would not know what to set it to, to make it consistent.

The styling works this way:
All the verses you see there are actually DIVs. However, only the first one (in cases like this) is “display: block”; the others are forced to be “display:inline”. I am now generating a copy for you to see what it looks like when I remove the “text-indent: 1.5em; display: block;” from the first verse.

Evidently, it is a difference between how block-display is treated when it is grouped around inline-display elements. I even see how the problem would be difficult to solve, and I may drop those indents altogether, or live with the quirk. I just want to ask the pros before I decide either way.

1. Στιγμιότυπο 2014-05-20, 10.52.24 π.μ..png‎ 181.6 kB ‎
   2 Cor 1

Edited 20 May 2014 by revence27

If you have markup like this:

<div style="text-indent: 1.5em; display: block">Verse 1 ...</div>
<div style="display: inline">Verse 2 ...</div>
<div style="display: inline">Verse 3 ...</div>

Then there should be no problem. But is the block div inside an inline element?

Well, the CSS essentially says what you indicate there, but the DIVs themselves are not contained in an inline element. They are contained in a normal DIV. That DIV has only “column-count: 2; text-align: justify;” as the markup.

The verses themselves have: “hyphens: auto; line-stacking-strategy: block-line-height; font-size: 10pt; font-family: $font3; page-break-inside: avoid; display: inline;”
—Save for the first verse (“class="primus"”) which has those modifications I spoke of before.

By the way, on top of using CoffeeScript (http://coffeescript.org) for the scripting, I actually write my CSS as Sass (http://sass-lang.com), which is also better—hence the “$font3” variable you see there—and my HTML as HAML (http://haml.info). Tools from my other life as a web developer. —But I recommend them for everybody; and at my company, it is not just a good idea: it is the Law.

Edited 20 May 2014 by revence27

If you apply "font-size: 10pt" to the parent element then the spacing should be the same across all verses. Otherwise, the inline divs will have smaller text, but their line-height will be based on the font-size of the parent, which is larger than 10pt.

Oh, man. You won’t believe how much-more-beautiful the whole thing looks. Thanks a bunch.