-
Recent Posts
- The Incrementor
- KindleGen 2.5 update
- Backwards Compatible Poetry for KF8/Mobi
Categories
- ePrdctn
- KF8
- Kindle
- Uncategorized
Archives
- September 2012
- July 2012
- January 2012
Backwards Compatible Poetry for KF8/Mobi
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">     </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 |
@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.
This was written by Joshua. Posted on Wednesday, January 18, 2012, at 2:13 pm. Filed under ePrdctn, KF8, Kindle. Bookmark the permalink. Follow comments here with the RSS feed. Post a comment or leave a trackback.
6 Comments
2 Trackbacks/Pingbacks
-
Natasha Fondren » Pull-Quotes in Kindle Format 8 on Thursday, January 19, 2012 at 12:30 am
[...] One of the problems with the new Kindle Format is backwards-compatibility. First problem was poetry and hanging indents, which Joshua Tallent solved most excellently: Backwards Compatible Poetry for KF8/Mobi [...]
-
ePUBSecrets » Blog Archive » Formatting Poetry in ePUB: Part 1 on Saturday, January 28, 2012 at 11:09 pm
[...] Kindle Formatting. Joshua Tallent also has a post on this at his new eBook Architects Blog titled “Backwards Compatible Poetry for KF8/Mobi.” In this post, Tallent shows you how to use media queries and CSS to apply the old negative [...]
Post a Comment
Your email is never published nor shared. Required fields are marked *
*
*
Please type the characters of this captcha image in the input box
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!
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?
Andy,
I just tested it again and did not see any issues. If you email me your code I will take a quick look at it.
joshua [at] ebookarchitects.com
(D’oh! Please ignore my last comment – just delete)
Found out what was wrong…
Andy
Love your podcast, but your blog is seriously lacking, dudes. 1 post???
Sorry, Dan. I have been very busy, but will do my best to write one up soon.