View Full Version : Indents and hanging indents in epub poetry


Derek R
02-13-2012, 11:05 AM
I have read a number of posts on the issue of creating indented lines and hanging indents in poetry in epubs, but haven't quite managed to find a definitive answer. In experimenting, I have come up with some code using an unordered list that seems to work:

CSS:

ul.poem {list-style-type:none;}
.poem li {text-indent:-2em;}
.indent {margin-left:1em; text-indent:2em;}
.stanza {margin-top:1em;}

HTML:

<ul class="poem">
<li>"Twilight and evening bell,</li>

<li class="indent">And after that the dark!</li>

<li>And may there be no sadness of farewell,</li>

<li class="indent">When I embark.</li>

<li class="stanza">For tho' from out our bourne of time and place</li>

<li class="indent">The flood may bear me far,</li>

<li>I hope to see my Pilot face to face</li>

<li class="indent">When I have crost the bar."</li>
</ul>

This indents the poem from the main body of text, indents every second line, and seems to provide hanging indents when the lines wrap - which is what I have been looking for.

Can anyone see any potential problems with this coding for poetry?

Will the list items automatically inherit the line-height from the rest of the (prose) text, for example?

Jellby
02-13-2012, 11:28 AM
Argh! Don't use a list for what is not a list at all, please. It might end up looking the way you want, but so can anything with proper styling.

I recommend something like:

div.poetry {
margin: 1em 0 1em 2em;
}
div.stanza {
margin: 0.5em 0;
page-break-inside: avoid;
}
div.poetry p {
margin: 0;
padding-left: 5em;
text-indent: -5em;
text-align: left;
}
div.poetry p.indented {
margin-left: 1.5em;
}

<div class="poetry">

<div class="stanza">
<p>"You are old, Father William," the young man said,</p>
<p class="indented">"And your hair has become very white;</p>
<p>And yet you incessantly stand on your head—</p>
<p class="indented">Do you think, at your age, it is right?"</p>
</div>

<div class="stanza">
<p>"In my youth," Father William replied to his son,</p>
<p class="indented">"I feared it might injure the brain;</p>
<p>But, now that I'm perfectly sure I have none,</p>
<p class="indented">Why, I do it again and again."</p>
</div>

</div>

Or you can replace the <p> inside the <div class="poetry"> with <div>, or <div class="line">...

pdurrant
02-13-2012, 11:30 AM
I have read a number of posts on the issue of creating indented lines and hanging indents in poetry in epubs, but haven't quite managed to find a definitive answer. In experimenting, I have come up with some code using an unordered list that seems to work:
[snip]


Don't use structures when just to get their default formatting. I'd suggest something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head>
<style type="text/css">
p {
text-indent:0;
margin: 0;
}

div.poem {
margin-left:3em;
}
div.stanza {
margin-top: 1em; margin-bottom: 1em;
}

p.poemtitle {
font-size:2em;
font-weight:bold;
text-align: center;
}
p.line {
}
p.indentedline {
text-indent: 2em;
}

</style>
</head>
<body>
<div class="poem">
<p class="poemtitle">A Poem</p>
<div class="stanza">
<p class="line">Twilight and evening bell,</p>
<p class="indentedline">And after that the dark!</p>
<p class="line">And may there be no sadness of farewell,</p>
<p class="indentedline">When I embark.</p>
</div>
<div class="stanza">
<p class="line">For tho' from out our bourne of time and place</p>
<p class="indentedline">The flood may bear me far,</p>
<p class="line">I hope to see my Pilot face to face</p>
<p class="indentedline">When I have crost the bar.</p>
</div>
</div>
</body>

Uses the tags in the text to indicate the structure, and use the CSS to apply formatting to that structure.

Derek R
02-13-2012, 12:00 PM
Oops! Sorry, chaps! That's the danger of being a beginner! That solves my problem with poetry for epubs. I think what led my to trying unordered lists was that I have had terrible trouble finding a common solution for formatting poetry in both epub and .mobi/.prc for use on Kindle. I will try your solutions to see if they work on my Kindle (3.3) as well, although I think I read somewhere that Kindle struggles with negative indents?

Derek R
02-13-2012, 12:07 PM
Oh, one last question, Jellby, presumably "margin: 0;" in the div.poetry p would provide the lines of poetry with the same line line-height as the any prose text in the book - i.e. no line-height needs to be set for the lines of poetry?

DiapDealer
02-13-2012, 12:18 PM
I think what led my to trying unordered lists was that I have had terrible trouble finding a common solution for formatting poetry in both epub and .mobi/.prc for use on Kindle.
That's a different bugger altogether. One to which there is no common solution... that I know of. :D

In MOBI, you can't have a hanging indent on text that already has a left-margin. That's because anything with a left-margin is converted to a blockquote element in a mobi. Right-margins are ignored.

But you've given me something additional to at least attempt on the mobi side of things... for that I thank you.
I'd pretty much resigned myself to the fact that lines of indented poetry that wrap in a mobi wouldn't ever have a hanging indent—that users couldn't break by changing settings, that is.

But strictly speaking on the ePub side of things... I agree with pdurrant and Jellby. Don't reinvent the wheel.

Derek R
02-13-2012, 12:47 PM
I have managed to get hanging indents on my Kindle with a mobi file, but haven't changed any settings other than font size (still works fine). However, I haven't managed to indent the entire poem AND have hanging indents, so thus far have settled for not attempting to indent the poem. That is why I was trying to use the unordered list method. It would be interesting and extremely useful if someone did come up with a solution. If YOU do, then I'd be pleased to hear it.

DiapDealer
02-13-2012, 01:00 PM
However, I haven't managed to indent the entire poem AND have hanging indents,
That's what I've found to be impossible in MOBI without some rather ugly (and easily user-breakable) hoop-jumping involved. You have to choose between indenting the entire poem and having hanging indents. Trivial in ePub, but nearly impossible in MOBI. Certainly impossible using one common epub source document.

Derek R
02-13-2012, 01:10 PM
I've been a full-time professional second-hand bookseller (and occasional publisher) for 25 years and the traditional hard copy book never gave me this much grief! I have to say that I still much prefer the traditional book to reading on Kindle. I had to download and read an ebook on how to format for Kindle as it wasn't available in hard copy, and I didn't find it as expedient. I managed to get a paperback version of Liz Castro's book on epubs and found that a lot easier to use. There's an irony in there somewhere!

Jellby
02-13-2012, 03:17 PM
Oh, one last question, Jellby, presumably "margin: 0;" in the div.poetry p would provide the lines of poetry with the same line line-height as the any prose text in the book - i.e. no line-height needs to be set for the lines of poetry?

It sets all margins (top, bottom, left and right) of each line of poetry to 0, so the line spacing should be the same as in normal prose. Additional spacing between stanzas or around the whole block is given in div.stanza or div.poetry. The hanging indent of each line is obtained with the combination of padding-left and negative text-indent.

Derek R
02-13-2012, 04:09 PM
Thank you all once again for the support

Derek R
02-18-2012, 09:07 AM
Thanks to the support on this forum I now have some good css for poetry in ePubs, and this also works with Kindle Fire, but I'm still struggling with sorting it out on earlier versions of the Kindle device. As previously pointed out, you cannot have a left margin AND hanging indents in poetry in those earlier versions, so I would settle for having no left margin. Has some kind soul out there got an example of css and html that would create a poem with stanzas, hanging indents, and at least one level of indent, but no left margin, that is robust and works on the earlier devices?

DiapDealer
02-18-2012, 10:40 AM
HTML:
<p class="hanging">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

CSS:
p.hanging {
margin: 0;
text-indent: -25px;
}

Jellby
02-18-2012, 12:02 PM
According to the documentation, Mobipocket supports a special alignment for poetry, see the bottom here (http://www.mobipocket.com/dev/article.asp?BaseFolder=prcgen&File=authoring_guidelines.htm). But I believe it's not supported by Kindle (neither by ePub, of course, although I made a suggestion long time ago for something like that to be included).

Derek R
02-19-2012, 04:43 AM
I avoid using Mobipocket Creator now because it seems to me that it is rapidly becoming redundant. For example, in trying to learn the ropes of ebook creation, I read that Amazon had increased the acceptable file size for in-text images but, as far as I'm aware, Mobipocket hasn't (and won't?) be upgraded to allow for this.

The system I am currently using is to create an xhtml file, edit it in Sigil (which I have found extremely beneficial), and then convert the epub to a mobi via the Kindle Previewer. The latter is extremely useful for testing how the books will look on the various versions of Kindle as well as iPad (iBooks) and other devices.

In terms of poetry, as DiapDealer pointed out, in Kindle books you don't seem to be able to apply a left margin to the entire poem AND have hanging indents, so I have settled for sacrificing the former. The hanging indent can be created by applying a left margin to a paragraph (or line) with an equivalent negative text-indent. To indent lines I've been reduced to using non-breaking spaces. It may not be pretty, but it works.

The code that you provided earlier in the thread is a neat way to handle poetry in epubs, and the good news is that it is supported by Kindle Fire. However, in the meantime, whilst most of the Kindle devices don't support certain code, I have to manually alter the original xhtml document and use a different stylesheet to create a second epub that can be converted by Kindle Previewer to display well on the various devices.

Finally, I should say that this forum has been of enormous help in resolving the difficulties I have faced. :thanks: