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 7 8 9 10 11
<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">     </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">          </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">               </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">                    </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">                         </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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124
@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.