Showing posts with label Mobi. Show all posts
Showing posts with label Mobi. Show all posts

Thursday, August 2, 2012

Numbered lists from InDesign CS 6 to EPUB and mobi

I got a note from a reader asking me to help with a document exported from InDesign 6, but whose lists were displaying repeated line numbers in old Kindle (mobi).

It turns out that if you use the Bullets and Numbering tab so that InDesign automatically numbers your lists, InDesign CS6 always hard-codes the line numbers into the resulting EPUB. Always.

Depending on whether you choose "Map to Ordered Lists"

<ol>
<li class="Numberedlist"><span class="char-style-override-1">1. </span>Research solar panels.</li>
...


"Map to Static Ordered Lists" (notice that value attribute is added)

<ol>
<li class="Numberedlist" value="1"><span class="char-style-override-1">1. </span>Research solar panels.</li>


or "Convert to text" (notice that now the paragraphs are exported as p elements, and not li)

<p class="Numberedlist"><span>1. </span>Research solar panels.</p>

and how you map the list paragraphs to export tags, it will create the HTML in one way or another, but the numbers themselves will always be there.

But a li item is always numbered in HTML/EPUB, no? How does InDesign keep there from being two line numbers? The answer is that it messes with the CSS, and changes the li items into regular block elements, taking away their listiness and thus their automatic numbering:

li {
display:block;
}

Not only that, it removes all the default margin settings from both the ol and li elements:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
margin:0;
padding:0;
border-width:0;
}


This has two unfortunate effects. First, in EPUB ereaders, the lists are numbered but they're not treated as real lists. This means that there are no hanging indents:

ID6 lists to EPUB

And since old Kindle (mobi) doesn't understand the CSS that ID uses to convert list items to block items, it keeps displaying them as list items, and we get duplicate line numbers (the automatic ones from the list, as well as the hard coded ones):

Kindle Previewer - numbered list -1

Both outcomes are pretty unacceptable, if you ask me.

So what can you do? I see two avenues. You can either crack open your EPUB and GREP out the line numbers and then use HTML/EPUB's natural list-item formatting or accept that InDesign is going to hard-code the line numbers into your HTML and attempt to create hanging indents from the resulting paragraphs (without ever having to open the EPUB).

Let's start with the first, or "coder" solution.

First, I'm going to assume that you've formatted your lists using the Bullets and Numbering tab in the Paragraph Styles box. This means that InDesign will automatically number your lists within InDesign and it will hard code the numbers into the EPUB. It's probably a good idea to use a special character style for the numbers themselves, in case you want to format them later through the CSS. It also makes them easier to GREP-remove, as I'll show in a moment. Mine are called "numbers".

Second, create an listsarelists.css file in your favorite text editor (and save it as text only). It should look like this:
li {display:list-item}

ol, ul {margin: 2em}


This will override ID's CSS and thus restore the listiness of your list items and gives them hanging indents and automatic numbers.

When you go to export your EPUB, choose "Map to Ordered List" next to Numbers at the bottom part of the first panel of the Export Options box.

Map to Ordered Lists

Then click Advanced to go to the last panel of the Export Options box. Click Add Style Sheet in the middle of the box, choose the listsarelists.css file and click OK. You'll see it listed in the Additional CSS box:

Add more CSS

Now export.

Now crack open your EPUB and use GREP to remove all of the hard-coded line numbers:

Note that I applied a character style called "numbers" to the numbers in my lists. This makes them easy to search for, even though ID has added character style overrides:

Remove hard-coded line numbers

That is, search for: <span class="numbers.*?</span> (That means, search a span tag whose class is numbers, and maybe some other stuff, and then get rid of it, up until the first following closing span tag.)

And replace it with nothing.

Finally, rezip your EPUB and it looks great:

In iBooks (and other EPUB ereaders):

Lists fixed for EPUB

In Kindle Fire and Kindle (shown with Kindle Previewer):

Kindle Fire Previewer - numbered list -1 Kindle Previewer - numbered list -1

Now let's look at the less codey solution that doesn't require that you crack open the EPUB:

Remember again that InDesign will always output those line numbers. So what if we converted the lists to text in the EPUB in order to remove the automatic numbering? We start the same way, with InDesign's Bullets and Numbering panel and creating the lists in our book. It turns out the only way to export a list with no listiness (e.g., no ol or li elements) is by choosing Convert to Text upon export:

convert to text

Here's what the HTML looks like that we'll have to work with:

<p class="Basic-Paragraph">Here’s a list:</p>
<p class="Basic-Paragraph"> </p>
<p class="Numberedlist"><span>1. </span>Research solar panels.</p>
<p class="Numberedlist"><span>2. </span>Figure out if it makes sense to redesign the kitchen.</p>


You don't have to look at it, but it helps to know what we've got :)

The next step is to create an extras.css file with CSS that formats the resulting p elements into things that look like hanging indents. Beware, it won't look perfect. Make sure that the class name in your CSS (here: list) matches the paragraph style name in InDesign.

p.list {line-height: 1;padding:0;margin:0}


@media not amzn-mobi {
p.list {margin-left:1.2em; text-indent: -1.2em;}
}

@media amzn-mobi {
p.list {text-indent:-40px}
}


You can have InDesign add that CSS to your EPUB by choosing it in the Advanced Panel of the Export Options box:

add hanging indent css to epub

That looks pretty good on the Kindle Touch (at this font size):

Hacked lists on Touch

and on iBooks:

Hacked lists in iBooks

though you can see that the lines are not quite lined up.

When you look at it in old Kindle, the misalignment is more pronounced:

Hacked lists on Kindle - 1

even more so when the text is smaller:

Hacked lists on Kindle -smaller

So, those are two solutions. Neither is perfect. Keep in mind that my example is a very simple one-level numbered list. Not a bulleted list and not a complicated one.

As I was working on this, I asked on #eprdctn if anyone had any other ideas, and it turns out that Ron Bilodeau has been working on this too. He wrote a little bit about lists in ID6 in last month's InDesign Magazine and says he is writing a blog post that should go up some time next week. I can't wait to read what he finds.

Friday, April 27, 2012

Word for Mac can't generate linked TOCs for Kindle

I've been trying to document the simplest way to create an ebook with a tool that most folks already own. The tool I've chosen, Microsoft Word, is a bloated, impossibly complicated piece of software that for some inexplicable reason, is used by a huge proportion of the populace. Feel free to enlighten me about its virtues in the comments.

Anyways, I want to call your attention to one particularly important failing of Microsoft Word for Macintosh: it will only create linked or active TOCs if the TOC contains page numbers. It's really important to include linked TOCS in ebooks, and particularly in Kindle books since most of Kindle devices don't have device-generated or navigational tables of contents, but it doesn't make sense to include page numbers (since they don't make any sense in a digital landscape).

Note that Microsoft Word for Windows is happy to automatically generate a useful TOC, sans page numbers, for an ebook.

Table of Contents

Simply uncheck Show page numbers and then check Use hyperlinks instead of page numbers.

Now look at the corresponding dialog box in the latest version of Word for Macintosh:

Table of Contents

You can hide the page numbers, but you can't convert them to hyperlinks, and I assure you, after much testing (and confirmation from @ljndawson), that without page numbers, no page links will be created. The TOC is there, but will take you nowhere in the converted ebook.

Kindle Fire Previewer - testerTOC7

It makes Word for Mac a much less powerful tool for creating ebooks. Of course, there are solutions (like manually creating bookmarks for each TOC entry), but it's nothing like a one-button solution (!).

Why should anyone care about how Word creates TOCs? Because Word (.doc or .docx) is the one styled format that can be read and converted automatically into Kindle format (using KDP, Send to Kindle, and by emailing the document to a Kindle device). More on that soon.

Wednesday, April 25, 2012

Using Amazon's Send to Kindle to transfer ebooks and documents to Kindle

Amazon has just released the Send to Kindle app for Macintosh. It already exists for PCs. This is an app that facilitates getting documents in various formats—Word (.doc and .docx), text (.txt), RTF (.rtf), images (.jpeg, .gif, .png, .bmp) and PDF (.pdf)—to your Kindle.

Once you've downloaded and installed Send to Kindle, you can activate the app in several different ways. First, you can right-click a document in the Finder and choose the Send to Kindle option near the bottom of the menu.

From Finder

You can choose Send to Kindle from the Printer menu in any program that has one (here's Word):

Print - Send to Kindle

Finally, you can click the Send to Kindle icon on the dock or drag a document to the Send to Kindle icon directly.

Dock

Whichever method you choose, you'll see the Send to Kindle's window in which you can specify a new title for the document and choose which Kindle you want to send the document to. You will also specify whether you want to use free Wifi or incur extra charges by using Amazon's Whispernet service.

Send to Kindle

If you check "Archive document in your Kindle Library" (which is on by default), your document will be available in the Kindle cloud, and thus to all of your Kindle devices. You can even deselect a device and send your document only to the cloud.

Format

Notice at the bottom of the window that you'll be advised about which format your document will be converted to. If you right-click or drag and drop, Send to Kindle will convert Word, text, and RTF to Kindle format, and preliminary testing seems to indicate that it uses the same KindleGen algorithms that are used by Kindle Previewer and KDP. If you right-click or drag and drop a PDF file, you'll have the option (in the aptly named Options panel) to convert the PDF to Kindle format. I tested some simple documents, and it seemed to work quite well.

Send to Kindle - Options-1

If you use the print option, it will always send the document as a PDF, and the PDF cannot be converted to Kindle format. Note that the PDF document will be much larger than the Kindle version.

Send to Kindle - Options

All in all, the Send to Kindle app looks like a useful tool for getting documents into your Kindle. The Send to Kindle documentation has a few more details.





Monday, April 9, 2012

Unpacking a Kindle/Mobi file

Converting an ebook of whatever format to a Kindle/mobi file adds a level of abstraction that always leaves me with this gnawing uncertainty: did anything change under there? Is this what I really want? This may be due to general OCD, but I think it started with Microsoft Word's early attempts to guess what I wanted and automatically change my text for me, causing all manner of consternation and mistrust, as its guesses were often incorrect. Course it doesn't help that Kindle devices don't all display an ebook the same way.

As you might've guessed, I don't trust Kindle Previewer (or the KindleGen that it invokes) either... who knows what it does during conversion!? Indeed, when a feature in an ebook I'm creating doesn't come out right, knowing exactly what KindleGen is doing with my files can be very helpful for cross-platform development.

Thankfully, there are a bunch of folks over at MobileRead who have developed an open source tool for unpacking Mobi files and looking at their innards. It's called Mobi Unpack and the latest version (047) can be found there.

But what do you do with it once you've found it? Double-clicking didn't work at first for me:

doubleclick MU

And I had no idea what application I should associate it with. I used a rather convoluted system starting with Terminal, navigating to the MU folder, then typing python Mobi_Unpack_v047.pyw, which works, but it seemed like there should be a better way.

One of the Mobi Unpack developers told me I needed a thing called Python Launcher. You can find it in /System/Library/Frameworks/Python.framework/versions/2.5/Resources. It comes with your Mac. Who knew? :)

I dragged Mobi_Unpack_v047.pyw on top of the Python Launcher, and now it's permanently associated: when I double-click, it opens right up.

Mobi ebook Unpack Tool

Once Mobi Unpack is open, use the top field and Browse button to choose the Mobi file that you want to unpack. Use the second field and Browse button to choose the folder you want to unpack the Mobi file into.

I don't check any of the other options.

Then click Start to unpack your Mobi file.

Mobi Unpack creates a mobi8 folder, which presumably is the KF8 version as well as a mobi7 folder which presumably is what old Kindles get. You can explore the files inside (XHTML, CSS, content.opf, etc.) to see how KindleGen (via Kindle Previewer or whatever) is creating your Mobi file.

Unpacked Mobi

The mobi8 folder even contains an EPUB file. I thought this might be useful if you were starting with a Mobi file and wanted to convert to EPUB, but unfortunately, at least in my testing (in which I did not generate the Mobi file from an EPUB file), the EPUB did not validate.

Wednesday, April 4, 2012

Sideloading ebooks with Dropbox

Whether you create ebooks for a living or just read them, getting books onto your reading device—or devices!—of choice is not always as easy as it should be. Sure, Amazon has its Whispersync that shuttles files straight to your Kindle apps and iBooks will get books to your iPhone/iPad or iPod touch, but what if you buy a book from an independent author (like me :), or download one of Cory Doctorow's books, or create your own and want to see what they look like? The answer is sideloading, the term for getting ebooks to your reader without a store's help.

The most basic way to sideload is to hook your ereader up to your computer via the USB cable. Most ereaders (but not iOS ones) will appear on your desktop just like any other external drive.

Kindle-disk

nook-disk

Just drag your ebook file (in the appropriate format, of course) to the Documents folder on the ereader (actually NOOK is not very picky about where you place it), then eject your disk, and you can find the new ebook installed. (Nook and Kindle Fire put your sideloaded books in the My Files/Docs area, respectively.)

On iOS (iPhone/iPad/iPod touch), the process is a fair bit more laborious. You're supposed to use iTunes, as I describe in EPUB Straight to the Point, either syncing manually or automatically. But it takes longer than it should. Apple offers a little app called Book Proofer to folks through its iTunes Connect program that lets you edit a book on your computer as you simultaneously preview it on your iPad or iPhone, but it's not public, and it's not foolproof.

It turns out DropBox is a brilliant alternative to all of this. Dropbox lets you create a folder on your computer that is automatically copied to the "cloud". That means that you can access it from any other computer or even reading device.

(If you don't already have a Dropbox account, you can follow this link to get one and you and I will both get 500Mb additional free disk space.)

To sideload a ebook with Dropbox, first copy the ebook to your Dropbox folder. (If you don't know where the folder is, you can use the Dropbox menu at the top of your screen to open it: dropboxmenu, or just find it yourself, generally right in your home folder.

Dropbox

Then, on your iOS device, download the Dropbox app, launch it, and sign in.

Select the ebook that you want to sideload from the Dropbox menu. It will start to load.

sideloading ebook to iOS

Dropbox can view some file formats right in the app itself, but not EPUB or mobi. So when it gets done copying the file, it will tell you it doesn't know what to do with it. Thankfully, all you have to do is click the "Away" icon in the upper right corner of the screen, and Dropbox will offer to transfer the file to an app that can view it, like iBooks in this case. Bravo, just what we wanted.

dropbox to iBooks

Once you choose iBooks in the menu, iBooks will open automatically and show you your book. It's really lovely:

in iBooks

Dropbox will work on iOS for both EPUB and Kindle/mobi:

dropbox to Kindle

This is pretty interesting, considering that before Dropbox there was no way to test a Kindle book on an iOS device before selling it through Amazon. you had to use iTunes to copy mobi files to the Kindle app on iOS. (Connect device, choose Apps, go down to the bottom of the screen, click Kindle, click Add…, choose your mobi file, then sync. Thanks, Dan Rodney—see comments—though I still think iTunes is a slow solution.) The closestAnother alternative was using the Kindle Previewer app.

I thought Dropbox might even be the answer to the conundrum that you can create a Kindle book with audio and video, but there is no way to test it, because there is no way to get the AV book to Kindle app for iOS which (ironically) is the only Kindle app that supports audio and video! — you can only see it *after* it is published to Amazon, which, sadly, still does not allow independent authors and publishers to sell books with audio and video.

Alas, I have not been able to get this to work. I can get the audio/video Kindle books to the Kindle app on iOS, but the audio and video do not play. I haven't finished poking at it yet, though. I'll keep you posted.

Note that some ebookstores make changes to books as they deliver them. That is, a sideloaded book is not always identical to its purchased cousin, though in my mind, it sure should be. In particular, I've heard complaints about NOOK and Kobo, and I'm wondering if Amazon doesn't bake something special into its AV books for iOS as well. More on that another day.


Wednesday, March 28, 2012

Kindle ignores everything when ID gives it multiple classes

I'm about to publish an anthology of stories based in Barcelona (more news soon!) and keep bumping into an annoying issue with (old) Kindle: if your InDesign document contains a styled paragraph with local formatting, InDesign will export the resulting EPUB with multiple classes, one for the base style and one "override" class with the extra bits. Unfortunately, Kindle throws up its hands at multiple classes and not only ignores the extra classes but actually ignores the base class as well, leaving the paragraph with no formatting at all. Ugh.

Here's an example from my new book.

Kindle-multiple classes

The paragraph that begins "Moving between the shadows" has no styling. It should be in italics with no indent, as shown in iBooks:

iBooks - multiple classes

I go look at the code, and find that InDesign has added an "override" style:

code-multiple classes

Why? Because I had added some local formatting in the original InDesign file. Oops. (You can tell by putting your cursor in a paragraph and looking at the Paragraph Styles panel... if there's a plus sign next to the style name, there's local formatting.)

InDesign-local formatting

Really, InDesign is completely within its rights by exporting multiple classes, they are perfectly standard. It is Kindle that is at fault here.

The easiest solutions is to avoid local formatting. This is a good idea in general, although I'll admit that when I just need to nudge something in my print version, I am not always strictly orthodox.

If you forget, and/or don't want to go back and change the print version, the second solution is to create a new style that contains the characteristics from the two applied styles, and apply it both to the HTML and to the CSS. Kindle can't say no to that.

screen_shot-27125

In general, I recommend doing a search through your XHTML files in an InDesign-generated EPUB document to find all of the override classes. Then, substitute them with better-labeled and less troublesome individual styles.

Also note that it is "old" Kindle that can't handle multiple classes, Kindle Fire supports them just fine.


Friday, March 23, 2012

Centering in ebooks across ereaders

A long time ago, I realized that the most basic parts of childrearing—eating, sleeping, and peeing and pooping—were by far the hardest to figure out. So it is with ebooks. It seems almost ridiculous to have to write a big, long complicated post about centering—something so essential and so fundamental—but I keep bumping up against it, so write I will. I hope I'll save you some sleepless nights.

Centering in ebooks involves CSS, the box model, inheritance, and ereader inconsistencies. The main problem with centering lies in not understanding how these aspects relate to each other.

The text-align property

I'll start with the simple. There is a CSS property called text-align whose possible values are left, right, justify, and center. But there is one very important caveat: text-align only affects inline-level objects within the block-level objects to which text-align has been applied. Let's look at that closely, since it is the source of many misunderstandings and thus errors.

Here is a simple p element that contains text.

<body>
<p class="center">Here is some text that should be centered</p>
</body>


And here is the CSS:

.center {text-align:center}

And here is what it looks like:

Preview: centeringex.html

You may think that it is the p element that has been centered, but you'd be wrong. It's actually the inline contents of the p element, an anonymous inline block, if you can stand the CSS parlance, or simply the text itself (if you can't), that is being centered. The p element itself is not centered.

How can you tell? We'll set the width of the p element to 60%, and then set the background color to yellow, so you can actually see it.

.center {text-align:center; width: 60%; background: yellow}

Preview: centeringex.html

You can now clearly see that the p element is still aligned left (which is the default in most browsers and ereaders) even while the inline text that it contains is aligned center within the p element.

Centering block-level elements

So how do you center a block-level element? The canonical way is to set the right and left margins to auto. According to the CSS spec, when both left and right margins are auto, they should be equal, and thus the item will be centered. And don't forget that unless your block element has a width that is smaller than the window size, you won't be able to tell if it's centered or not.

So, to center our p element, we'd have this:

.center {text-align:center; width: 60%; background: yellow; margin-right: auto; margin-left:auto}

And we would get this:

Preview: centeringex.html

This works on most major browsers and ereaders:

Centering-iBooks iPad

And is converted properly for Kindle Fire:

Kindle Fire Previewer - CenteringAcrossEreaders

(Regular Kindle doesn't support width and thus can't center a block-level element at all.)

CSS bug in ADE, NOOK, etc.

Unfortunately, ADE, and the ereaders based on it (like NOOK, NOOK Color, and presumably Sony Reader though I didn't test this last one), don't properly interpret the auto value for left and right margins, and the result is that the blocks are not centered:

NOOK Color centering

Independence of alignment of contents and of the block that contains them

Before we get to the solution, I just want to underline how the text-align properties and centering of the block level elements using automatic right and left margins are independent of each other.

That is, the alignment of the inline-level elements within a block-level element need not match the alignment of the block-level element. That is, we can center the p element within the window and then left-align the contents of the p element:

.mismatch {text-align: left; width: 40%; background: red;margin-right: auto; margin-left:auto }

And that should look like this:

Aligned left within centered block

Notice how the image and the text are aligned to the left within a box that is centered on the page.

Again, ADE, NOOK, and presumably Sony Reader, don't properly interpret the right and left margins set to auto:

NOOK centering mismatch

The Solution

The solution hinges on the fact that text-align only affects inline elements. (This is why simply enclosing an inner div in an outer div whose text-align property is set to center will not work.) We'll enclose the p elements in a wrapper div, whose text-align property we'll set to center, and then we'll set the display property for the p elements themselves to inline-block. The inline-block value is sort of a hybrid between inline and block, that for our purposes keeps the p elements starting their own paragraphs (like regular block-level elements) but allows them to be affected by text-align (like inline-level elements).

Here's the CSS with the new bits in bold:

.wrap {text-align:center}
.center {text-align:center; width: 60%; background: yellow; display:inline-block}
.mismatch {text-align: left; width: 40%; background: red;display:inline-block }


And here's our new HTML:

<div class="wrap">
<p class="center">Here is some text that should be centered</p>
<p class="mismatch"><img src="momo.jpg" alt="momo" width="200" height="150" /><br />This image and text will be aligned to the left within the centered block that contains them.</p>
</div>


Let's look first at iBooks on iPhone: (I've put it in landscape orientation just so it's easier to see, it looks the same in portrait.)

iPhone Centering

Everything is as it should be. Our boxes are centered, but the contents within them are centered and left-aligned respectively.

How about NOOK Color?

NOOK Color-centering inline-block

NOOK Color also likes this solution, even when Publisher Defaults are turned off (although then you have other margin issues).

And Kindle Previewer converts the file just fine for KF8 and the Kindle Fire ("old" Kindle can't center divs but maintains the text-alignment for the inline level elements):

Kindle Fire Previewer - CenteringAcrossEreaders6

But what happens when you view the ebook in iBooks on iPad?

iBooks iPad Centering

The boxes are centered as desired. But the text and image that should be left aligned in the lower box are now justified! Look at those ugly spaces between the words. What happened?

Now we've bumped up against iPad's default overrides. Remember that by default, Full Justification is set to ON, hidden away in the iBooks area of the Settings panel. I don't think most people who use iBooks will ever know this setting exists so ebook designers have to plan for it. You used to be able to add a span tag around the text that you wish to have aligned to the left, but that hack no longer works.

Thankfully, there is still a workaround. If you add the com.apple.ibooks.display-options.xml file to the META-INF folder, with the <option name="specified-fonts">true</option>, the justification that you choose in your CSS will be maintained, regardless of the Full Justification setting chosen. The user can still override your choices by choosing a different font in the Fonts menu, but at least the book will start out the way you want it:

iBooks iPad

To resume:

The text-align property only applies to inline elements within the block-level element to which the property is applied. It is inherited by block level elements that may be enclosed in the outer block-level element and in turn applied to the inline elements that the inner block level elements contain. If you need more info on block level vs inline, see the CSS spec or my my HTML/CSS book.

The canonical way to center a block-level element is by setting both margin-right and margin-left to auto. The fact that this is not supported by ADE or NOOK (and presumably not by Sony Reader or other ereaders based on ADE) is a serious bug.

You can center block-level elements by wrapping them in another block level element (a div), setting the text-align to the outer div to center, and then setting the display property of the inner div (or p or whatever) to inline-block.

iBooks on iPad has a default setting of Full Justification for text, which you can override by adding the com file to the META-INF folder. This has ramifications with respect to font choice, of course, as well.

iBooks on iPhone has the Full Justification setting, but by default it is set to OFF (presumably because of the narrow screen).

This should be much simpler.

And yes, it's true that I have no AT&T coverage in my office!


More of my books