Note that the first example has room to put "Selah" on the same line. The second example there is not enough room to put "Interlude" on the same line. The Selah or Interlude is wrapped in a span ..... <span class="Selah">Selah</span>. I can put it within the preceding line or on a line of it's own. So what is the CSS that I need?

Jim Albright
Wycliffe Bible Translators

1. Interlude_example.gif‎ 10.2 kB
2. Interlude_example_2.gif‎ 9.2 kB

"float: right"?

And the XML is



CSS:

.Selah { background-color: pink ; float:right; color: blue; }
.Line1 { margin-left: 60pt; text-indent: -48pt; text-align: left;}
.Line1 > .Verse_Number:first-of-type{ width:10pt ; text-align: right; display:inline-block; margin-right: 2pt ; }
.Line2 { margin-left: 60pt; text-indent: -36pt; text-align: left; }
.Line2 > .Verse_Number:first-of-type{; width:10pt ; text-align: right; display:inline-block; margin-right: 2pt ;}
.Line3 { margin-left: 60pt; text-indent: -24pt; text-align: left; }
.Line3 > .Verse_Number:first-of-type{ ; width:10pt ; text-align: right; display:inline-block; margin-right: 2pt ;}

Jim Albright
Wycliffe Bible Translators

1. niv psa 1 selah test.png‎ 32.5 kB
2. niv psa 1 test xml.png‎ 5.5 kB

Why is the text overlapping? Is that the negative text indent?

Negative indent is undesirable here. It causes the left-shift whose purpose I believe is that it respects the margin, but in so doing causes the overlap issue.

Prefer float:left with margin:right and the problem should disappear.

John Haugeland is http://fullof.bs/