A bit of poetry CSS you may find useful

[bookman156]

I was annoyed that long lines in poems, when they broke, would look like a new line, I was using br tags.

Then it dawned on me how to get the broken bit to indent. Just do this:

p.poem {
    text-indent: -1em;
    margin-left: 1em;
}

<p class="poem">This is a poetry line</p>
<p class="poem">This is a long long long poetry line</p>
<p class="poem">This is an long long even longer long poetry line</p>

[enuddleyarbl]

I've gone a similar route, but with div classes:

div.poem {
/* Poem Styling */
	display: block;
	font-size:	.88em;
    font-style: italic;
	margin-left:	2em;
	margin-right:	2em;
	padding-left:	1.5em;
	text-align:	left;
}
div.poem p {
/* Poem Paragraph Styling */
	display:	block;
	margin-top:	0;
	margin-bottom:	0;
	text-indent:	-1.5em;
}
div.poem p.first {
/* Poem First Line */
	display:	block;
	padding-top:	1em;
}
div.poem p.indented {
/* Poem Entirely Indented Stanza */
	display:	block;
	margin-left:	2em;
}
div.poem p.last {
/* Poem Last Line */
	display:	block;
	padding-bottom:	1em;
}

The padding-left in the base poem class gives me more of a block-indent.

[bookman156]

Interesting. I also use this:

p.poemspace, p.poem {
    text-indent: -1em;
    margin-left: 2.5em;
}

p.poemspace {
    padding-top: 1.2em;
}

Not sure why you need divs, is there any advantage in that approach do you think?

[bookman156]

The padding-left in the base poem class gives me more of a block-indent.

That's effectively a hanging indent, in typographical terms.

[DNSB]

Originally Posted by bookman156

I was annoyed that long lines in poems, when they broke, would look like a new line, I was using br tags.

Then it dawned on me how to get the broken bit to indent. Just do this:

p.poem {
    text-indent: -1em;
    margin-left: 1em;
}

<p class="poem">This is a poetry line</p>
<p class="poem">This is a long long long poetry line</p>
<p class="poem">This is an long long even longer long poetry line</p>

Reminds me of the CSS I've been using for quite a while to fake a list by using a hanging indent.

.fakelist {
  display: block;
  margin-bottom: 0.5em;
  margin-left: 2.5em;
  margin-right: 1.25em;
  margin-top: 0.5em;
  text-align: left;
  text-indent: -1.25em;
}

[bookman156]

A fake list is an interesting idea. I like it.

[enuddleyarbl]

Originally Posted by bookman156

...Not sure why you need divs, is there any advantage in that approach do you think?

I think it was Turtle91 (Dion?) who edged me into using the divs. They let me treat semantic objects as one unit (in this case, the div.poem) and then define structures that apply only within that object (the base paragraph and the first and last variations for top and bottom padding).

[Jellby]

Ahem: https://www.mobileread.com/forums/sh...32&postcount=4

[Jellby]

Originally Posted by Jellby

Ahem: https://www.mobileread.com/forums/sh...32&postcount=4

Nowadays I use something like:

div.poetry {
  margin: 1em 0 1em 2em;
}
div.poetry div.stanza {
  margin: 0.5em 0 0.5em 0;
}
div.poetry div.line {
  margin: 0;
  padding-left: 3em;
  text-indent: -3em;
  text-align: left;
}
div.poetry div.line2 {
  margin: 0;
  padding-left: 5em;
  text-indent: -3em;
  text-align: left;
}

<div class="poetry">
<div class="stanza>
<div class="line">Verse line</div>
<div class="line">Verse line</div>
<div class="line2">Indented verse line</div>
</div>

<div class="stanza">
<div class="line">Verse line</div>
<div class="line">Verse line</div>
<div class="line2">Indented verse line</div>
</div>
</div>

[Karellen]

The poetry code in Chapter 3 of Alice In Wonderland is quite intricate and well done...

Download epub here... https://www.mobileread.com/forums/sh...31#post3939531

[Tex2002ans]

Originally Posted by bookman156

Not sure why you need divs, is there any advantage in that approach do you think?

I explained my poetry code in:

• 2022: "Remove blank pages"

(It's towards the very end of that post in "Side Note #2".)

I use 3 classes:

• <div class="poem">
  
  • Gets its own top/bottom/left/right spacing.
• <div class="stanza">
  
  • Gets its own top/bottom spacing.
    
  • Helps organize + keep each stanza together.
• <p class="poem">
  
  • Each line + Negative indent.

All the details are described in that thread, especially the usage of page-break-inside: avoid.

Advantages are in code readability/maintainability + very easy to tweak.

Originally Posted by Jellby

Nowadays I use something like:

[...]

Yep. I second anything that Jellby says.

(He's the one who taught me about all that poetry stuff years and years ago.)

We agree on 99%, and only disagree on some minor differences (he says <div>, because "poetry isn't paragraphs"... and I still insist on <p>).

[Turtle91]

Originally Posted by Tex2002ans

We agree on 99%, and only disagree on some minor differences (he says <div>, because "poetry isn't paragraphs"... and I still insist on <p>).

Lolz. Yup, div is more semantically correct, but I use <p> as well… it saves a micro-bit or two on file size, and it’s a little cleaner IMO.

I also tend to define a default style rather than putting a class on every line:

div.poetry {
  margin: 1em 0 1em 2em;
}

div.poetry p {
  margin: 0;
  padding-left: 3em;
  text-indent: -3em;
  text-align: left;
}

div.poetry p.indent {
  margin: 0;
  padding-left: 5em;
  text-indent: -3em;
  text-align: left;
}

div.poetry p.space {
  margin-top: 1em;
}

<div class="poetry">
  <p>line of poetry</p>
  <p class="indent">indented line of poetry</p>
  <p>line of poetry</p>

  <p class="space">line of poetry in new stanza</p>
  <p>line of poetry</p>
  <p>line of poetry</p>

  <p class="space">line of poetry in new stanza</p>
  <p>line of poetry</p>
  <p>line of poetry</p>
</div>

Obviously there are many ways to skin that cat!

[enuddleyarbl]

Originally Posted by Jellby

Ahem: https://www.mobileread.com/forums/sh...32&postcount=4

Hey! Look! You use practically the same formatting as I do!

But, seriously, I should have remembered your post as being the origin of what I use. I even started a thread a few months back asking about it. Sorry.

Regarding your new poetry classes, I see that your div.stanza is handling the spacing of the stanzas that used to be handled by "first" and "last". But, if that's the case, I'd probably just override p instead of defining "line". IOW, instead of:

div.poetry div.line {

I'd have gone with:

div.poetry p {

That would keep the html a bit cleaner at the expense of some re-enforcement of the semantics that everything in the div is a poem.

The semantics of "line2" vs "indented" is a bit of a pickle, too. Is the fact that it's a line more or less important than that it's indented? Maybe "lineindent" or something might be more informative. But, that's too much typing.

EDIT: which is pretty much what Turtle91 posted just above me.

[bookman156]

he says <div>, because "poetry isn't paragraphs"... and I still insist on <p>

That's a good point, that poetry lines aren't paragraphs, that hadn't occurred to me. But then, they're not divs either are they?

Nonetheless, a lot of good stuff here to give some thought to. Cheers all.

[Jellby]

I just use "line2" (in this particular example) because it was the second "kind" of line I encountered. Too often I encounter different pieces of poetry, in the same book, with varying indent amounts, I've become lazy now and called them simply "line2", "line3", etc.

<div> vs. <p>, I'm not going to fight about. Yes, I do think <div> is semantically more appropriate, and I could have used "div.stanza div" or similar, but I've also learnt that using classes instead of relying on a particular structure is more robust (I'm likely to find a case where I want to use a proper <p> inside a poem, or another <div> level...). As with class names, use whatever you like.

However, the margin/padding + negative indent trick is only a cludge. What we would need is:

1) Vertically centering the whole poetry block, without knowing it advance how wide it is.
2) Breaking lines by aligning the 2nd part to the right, as in the attachment. I'm not sure this is common in English, but it's certainly done in Spanish.[*]
[*] Fitting the broken part of the line in the next ("[spirital") or even previous ("[andar") line would be extra nice, but I'm not asking for that yet.