Formatting Poetry in ePUB: Part 2

Primary Wonder poem
  • SumoMe

Formatting Poetry in ePUB: Part 1 focused on basics of getting poetry indents right on multiple devices. In this post I wanted to give you a round up of other posts that have addressed poetry formatting issues in ePUBs. Most of these have been collected by Robert Nagle (@nagletx) on the MobileRead Wiki under “Formatting Verse for Epub, Kindle and Epub 3.”

 

Centering Poetry

Poems often appear with centered text. While you would think this would be easy (simply using text-align:center; in the CSS), it can often go wrong depending on the reader, whether the p element is in a <div>, or other issues.

Liz Castro (@lizcastro) has a great post on her Pigs, Gourds, and Wikis site, “Centering in ebooks across ereaders,” that will tell you everything you need to know to understand how centering in CSS actually works and how to get your text to center on all readers.

 

Media Queries for Poetry

When designing poetry layout for print or ePUB, the size of the page plays a huge role. In ePUB, different devices have different screen sizes and widths, making poetry line breaks different on different devices. The solution? Media queries.

Liz Castro again has a great post to help you with this, “Media Queries for formatting Poetry on Kindle and EPUB.” This post will show you how to set up different CSS for each size screen so that your poetry renders exactly how you want it on tablets, eBook readers, and smartphones.

 

Small Devices

Small screens like smartphones can be difficult on poetry, especially if a poem’s lines are long. A post at epubBooks by Anton Bryl, “Formatting Poetry for EPUB and Small Devices,” helps you understand how to make poems render in a way that is pleasing to the eye and easy to read. Bryl covers the basic use of poetic indent for run-over lines, structuring the text so it renders well, and handling special cases like formal cæsuræ and Old English poems.

 

Mobi and KF8 Poetry

Joshua Tallent of eBook Architects does an excellent job covering formatting poetry for Kindle in his book Kindle Formatting. He has also posted a nice way to make poetry formatting for Kindle Fire 8 degrade nicely for Mobi (earlier versions of Kindle) in “Backwards Compatible Poetry for KF8/Mobi.” In the post, Tallent shows how to combine the negative text-indent and non-breaking space hack for Kindle in combination with media queries.

 

Page Breaks after Poems

One of the decisions you will have to make if you are creating an entire poetry ePUB is whether you want each poem as a separate file of whether multiple poems will be included in a chapter or part. If you make each poem a separate HTML/XHTML file, you will create automatic page breaks after each poem. If you include multiple poems in one HTML/XHTML file, you may need to add page breaks after each poem within the file.

How do you do this? Mark Harmon has a good post on inserting page breaks within an HTML/XHTML file on his blog ePub and eBook Help, “ePub Formatting – How To Add a Page Break To an ePub Document Using HTML or CSS.” The post shows how to create a <div> class using style="page-break-before:always;" or use either page-break-before:always; and page-break-after:always; in your CSS.

What other resources have you found for formatting poetry in ePUBs? Do you have any additional tricks tor tips to share?

 

13 Responses to “Formatting Poetry in ePUB: Part 2”

  1. Thanks for the great tips on poetry. In regards to page breaks in single HTML files, I’m having some trouble on the Kindle Fire forcing spacing between the top of the viewport and the first heading after a page break. It seems that the Kindle Fire clips any margin-top or padding-top. I tried experimenting a bit, but no luck. Any suggestions would be much appreciated.

    • Matthew says:

      How are your breaking the page? Are you using this for page break (from eBook Architects):
      Use the custom tags to mark pagebreaks in the text. I suggest you include one in front of every chapter or section.
      http://kindleformatting.com/formatting.php
      Are you using h1 for chapter headings/poetry title or something else? Are you using something like this for your head in CSS: h1 { text-align:center; margin-top:120; }? http://www.natashafondren.com/writing/kindle-formatting/kindle-formatting-for-novels-v/

      I think this was a discussion during #ePrdctn Hour recently, but I can’t find any specific posts on it. I’ll keep looking.

    • Matthew says:

      Also, have you experimented with pixels, ems, percentages to see if one will work where the others don’t?

      • Matthew,

        I ran an experiment with the following CSS to see if the space between the top of the viewport and the content following the page break (for HTML in the same file) would be rendered.

        Here is the CSS:

        h2
        {
        page-break-before: always;
        text-align: center;
        font-size: 1.5em;
        }

        h2.pgbrk1 {margin: 50px 0 0 0;}
        h2.pgbrk2 {margin-top: 50px;}
        h2.pgbrk3 {margin: 3em 0 0 0;}
        h2.pgbrk4 {margin-top: 3em;}
        h2.pgbrk5 {margin: 10% 0 0 0;}
        h2.pgbrk6 {margin-top: 10%;}
        h2.pgbrk7 {padding: 50px 0 0 0;}
        h2.pgbrk8 {padding-top: 50px;}
        h2.pgbrk9 {padding: 3em 0 0 0;}
        h2.pgbrk10 {padding-top: 3em;}
        h2.pgbrk11 {padding: 10% 0 0 0;}
        h2.pgbrk12 {padding-top: 10%;}
        h2.pgbrk13 {height: 2em;}
        h2.pgbrk14 {height: 2em; vertical-align: text-bottom;}
        h2.pgbrk15 {height: 100px;}
        h2.pgbrk16 {height: 100px; vertical-align: text-bottom; display: block;}
        h2.pgbrk17 {height: 15%;}
        h2.pgbrk18 {height: 15%; vertical-align: text-bottom;}
        h2.pgbrk19 {height: 2em; vertical-align: baseline;}
        h2.pgbrk20 {height: 100px; vertical-align: baseline;}
        h2.pgbrk21 {height: 15%; vertical-align: baseline;}
        h2.pgbrk22:before {content: ’00d’; white-space: pre;}
        h2.pgbrk23:before {content: “\A”; white-space: pre;}

        The classes pgbrk1 – pgbrk6 (where the space is in the margin-top area of the box) works fine on the e-ink Kindles and Kindle for iOS, rendering the spacing properly. However, it does not work on the Kindle Fire.

        The classes pgbrk7 – pgbrk23 doesn’t work on any of the Kindle devices. So, I’ve exhausted everything from bag o’ CSS tricks to get that spacing on the Kindle Fire.

        Strangely, classes pgbrk7 – pgbrk12 adds spacing on Google Chrome in the print preview mode. Why it isn’t the same for the Kindle Fire (also using the webkit engine) is beyond me.

        I guess I will have to stick with splitting the HTML file wherever there is a page break for the time being to get some spacing between the heading and the viewport.

      • siva says:

        Hi all,
        This page break problem occurs on the div tags in sidebar, a box appears before the sidebar also i have tried a lot by using different styles tags but does not works in kindle fire diveses, we need help on this…
        Thanks
        sivakumar
        Tamilnadu, India

  2. Matthew says:

    Have you tried using for the page breaks for Mobi/KF8. Many #ePrdctn folks have suggested that this is the best way to create a pagebreak for Mobi and all Kindle formats. It is proprietary markup for Mobi. It may solve your problem.

  3. Matthew says:

    Clearly that Mobi markup for pagebreak is not displaying. I’ve added spaces between characters so you can see what it is: < m b p : pagebreak />

  4. Thanks, Matthew. I’ll give it a try.

Leave a Reply

Your email address will not be published. Required fields are marked *