Blog

Backwards Compatible Poetry for KF8/Mobi

Posted on

One of the most enjoyable, and at times most frustrating, things about eBook development is learning new systems and formats when they are released. The new Kindle Format 8 (KF8) comes with some great changes to the design capabilities on the Kindle platform, but one of the main challenges in using it is creating Kindle files that will degrade gracefully to the older Kindle devices that do not have support for KF8.

A prime example of formatting that needs backwards compatibility is poetry. In 2008 I developed the now-standard approach of using Mobipocket’s width attribute combined with specific values and non-breaking spaces to make poetry work well in Kindle devices. I covered that in detail in my book, Kindle Formatting: The Complete Guide.

In KF8, the old width attribute is no longer valid, so using this code for backwards compatibility is not possible. In the early beta versions of the KindleGen 2 tool for KF8, there was no way to make the hanging indents work properly in Mobi while still making a valid KF8 file, so I complained to Amazon about the need for a CSS-driven option using media queries. They came through with a small change to the final release version of KindleGen that allows the use of negative values in the text-indent CSS property.

So, here is a new way to create valid code in your KF8 files that will degrade gracefully for older Mobi-only devices.

The HTML is actually pretty simple. The class name designates a paragraph’s level of indentation. The non-breaking spaces are placed inside span tags that can be hidden in KF8.

1
2
3
4
5
6
<p class="poem1">Poem1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="poem2"><span class="hide">&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;</span>Poem2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="poem3"><span class="hide">&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;</span>Poem3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="poem4"><span class="hide">&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;</span>Poem4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="poem5"><span class="hide">&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;</span>Poem5. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="poem6"><span class="hide">&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;&#xa0;</span>Poem6. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

The CSS starts off with the use of media queries. One section of the CSS is defining the styles for Mobipocket-only devices, and the other is defining the styles for other devices (those that support KF8 or another future format).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
@media amzn-mobi {
p.poem1 {
text-align: left;
text-indent: -30px;
}
p.poem2 {
text-align: left;
text-indent: -60px;
}
p.poem3 {
text-align: left;
text-indent: -90px;
}
p.poem4 {
text-align: left;
text-indent: -120px;
}
p.poem5 {
text-align: left;
text-indent: -150px;
}
p.poem6 {
text-align: left;
text-indent: -180px;
}
}

@media not amzn-mobi {
p {
margin-top: 0;
margin-bottom: 0;
}
.hide {display: none;}
p.poem1 {
text-align: left;
text-indent: -30px;
margin-left: 30px;
}
p.poem2 {
text-align: left;
text-indent: -30px;
margin-left: 60px;
}
p.poem3 {
text-align: left;
text-indent: -30px;
margin-left: 90px;
}
p.poem4 {
text-align: left;
text-indent: -30px;
margin-left: 120px;
}
p.poem5 {
text-align: left;
text-indent: -30px;
margin-left: 150px;
}
p.poem6 {
text-align: left;
text-indent: -30px;
margin-left: 180px;
}}

The Mobi-only CSS uses the negative text-indent to emulate the width attribute, and the KF8 CSS hides the non-breaking spaces and uses the standard CSS approach to hanging indents (negative text-indent, positive margin-left).

That’s it! Come back later for more posts on KF8 development and backwards compatibility.


11 thoughts on “Backwards Compatible Poetry for KF8/Mobi

  1. Pingback: Natasha Fondren » Pull-Quotes in Kindle Format 8

  2. Pingback: ePUBSecrets » Blog Archive » Formatting Poetry in ePUB: Part 1

  3. I knew there was a reason I was putting off coding all of our FutureCycle Press ebook versions for 2011 and 2012. I would have had a mess without this strategy. Excellent work, Joshua, as always. Poets, poetry publishers, and readers of poetry everywhere owe you a heap of thanks!

  4. Joshua,
    I’ve just tried exactly what you described above, (and some variants by other people) but it simply won’t work on the new Kindle previewer and building with KindleGen 2.4 Have they removed the negative text-indent?

  5. This is a minor point, but I’ve always wondered about the semantics of wrapping a single line of poetry in a paragraph tag. Why not use the paragraph tag for a stanza, and line breaks for line breaks? I wonder what others think about this.

  6. “The Mobi-only CSS uses the negative text-indent to emulate the width attribute, and the KF8 CSS hides the non-breaking spaces and uses the standard CSS approach to hanging indents (negative text-indent, positive margin-left).”

    If the mobly-only CSS is just emulating the width attribute, why not just use the width attribute in the CSS rather than the negatie text-indent?

    ie.

    @media amzn-mobi {
    p.poem1 {
    width: -30px;
    }

    • John, the issue is that the Mobipocket format does not support that CSS, it requires that the width attribute, which is not really HTML, be used for hanging indents. This is, however, not much of an issue any more since the vast majority of devices in the Kindle system now support KF8.

Leave a Reply