Video in Kindle books, thanks to EPUB3

Yesterday, I wrote about how you can call external audio/video files in an EPUB3 document. This works brilliantly in iBooks and Readium, but so far, nowhere else. What happens when it doesn't work is actually pretty interesting. According to the spec, you can add a fallback message, and indeed a fallback photo or link. In this case, I've used the poster image as a fallback image.

<p>Does everyone have their own cat videos? I sure do. Here are Nighty and a very small Momo playing the box game.</p>
    <video controls="controls" poster="image/poster.jpg" width="384" height="276">
    <source src="http://www.elizabethcastro.com/epub/examples/catbox2.mp4" />
    <source src="http://www.elizabethcastro.com/epub/examples/catbox2.wvm" />
    <p><a href="http://www.elizabethcastro.com/epub/examples/catbox.mp4"><img id="poster" width="384" height="276" src="image/poster.jpg" alt="poster" /> Click to play the video</a> and then return to read the rest of the book. </p>
    </video>


The only problem is that Adobe Digital Editions is the only EPUB ereader that properly displays the fallback message.



But it's nice. If you click the link, your default browser opens, and the video plays.

Unfortunately, if you open the EPUB file on the NOOK, or in Kobo (even the Kobo for iOS app), or even if you open it in iBooks without internet access—and thus the video cannot be displayed—you get varying things—sometimes the poster image, sometimes controls but no video—but no fallback content.

Fallback leads to video for Kindle books

But what about Kindle? Suppose you take that EPUB3 file, and pass it through KDP, or Kindle Previewer, or KindleGen, which all do the same thing—convert an EPUB file to KF8/mobi. And yes, they work on EPUB3 files as well as EPUB2 files. Next, open that converted mobi file in a Kindle Fire.

The fallback text, photo, and link appear, and better yet, when you click the link, Kindle Fire sends you to the browser, and plays the video. When you're done, the back arrows take you back to the book.



If that's not enough, stick it on Dropbox, and open your Dropbox app on an iPad. Once it's been copied, click the Open in another application arrow (upper right corner) and choose Kindle for iOS. Again, the fallback text, photo, and link appear, and when you click them, the video plays. It's true that you get an error message, but I'm guessing there's a way to get around that, but regardless, the video plays anyway. As if it were in a special window inside the Kindle iOS app. And when you've finished watching the video, click Done, and you go right back to the book.




So let's sum up:

1. So far, you can only play an embedded video right on a page in an ebook in iBooks and NOOK. But B&N won't let self- and indie publishers add such books to Pub It!.

2. You can play external video files right on a page in an ebook only in iBooks.

3. The fallback text doesn't appear in NOOK or Kobo.

4. The fallback text does appear in ADE and—if you convert the EPUB3 file to KF8/mobi—it also appears in Kindle Fire and Kindle for iOS (perhaps other Kindles too?), and all of these let you play the fallback video in an external browser.

5. An added caveat: I haven't uploaded a book to KDP with a link to external video. I can't guarantee that such a thing is permitted.

6. This opens up a lot of possibilities.

You can download the mobi file here. And if you liked this post, consider subscribing to my blog so I have time to write more!

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:



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}



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:



This works on most major browsers and ereaders:



And is converted properly for Kindle Fire:



(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:

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:



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:

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.)



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 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):



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



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:

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!

Audio and Video in EPUB - New Straight to the Point Miniguide #2

One of the most obvious and impressive advantages that electronic books have over their print counterparts is the ability to contain moving images and sound. While at first the EPUB spec didn't contemplate multimedia much at all, Apple's decision to use the new HTML5 video and audio elements in order to incorporate multimedia in ebooks clearly pushed the EPUB spec in that direction. Barnes & Noble now also supports these same tags for creating enhanced ebooks in its NOOK Color.

My new 29 page Audio and Video in EPUB miniguide explains just how to create enhanced ebooks with video and audio files, and includes information about how to choose and set the aspect ratio, format, and size, and then how to embed these multimedia files into EPUB format ebooks that look beautiful and play properly in iPad, iPhone, iPod touch, and also in Barnes & Noble's new NOOK Color.

With the information and techniques you'll learn in my Audio and Video in EPUB miniguide, you'll be able to create enhanced ebooks that satisfy Apple's requirements for the iBookstore, and if Barnes & Noble ever accepts enhanced ebooks from independent and self-publishers, which it doesn't yet, but it may someday, your code will pass muster there as well. Of course, you can also sell ebooks directly from your own website (as I do), and thanks to this guide, they'll look good in whatever ereader your audience has.

One of the cool things about tablets like the iPad and NOOK Color is that they make sense for viewing so-called tall screen video, which is taller than it is wide. Tall screen video is great for showing things that are, well, tall. Imagine a video of the Empire State Building or Gaudí's Sagrada Família. Part of this Audio Video miniguide explains how you can create and insert tall screen video in ebooks that again, work in both iOS devices and the NOOK Color.

The Audio and Video in EPUB miniguide costs $5, and includes the 29 page miniguide in EPUB and PDF formats plus several example EPUB files. You can unzip any of the files to look at the code they contain. It is only available directly from me. I hope you enjoy it. One of the things that I love about EPUB is that it enables us all to publish books with very little infrastructure or up-front investment. I think it's about time we were able to create enhanced ebooks as well.

I thought a long time about whether to offer this miniguide for free like I did the Fixed Layout Miniguide in the hopes of encouraging people to buy my EPUB Straight to the Point book. In the end, however, I've decided that this miniguide is worth every penny and more of the $5 I'm asking for it. I hope you'll agree.

As always your comments are more than welcome.

Resizing images in EPUB

Some time ago, a reader wrote to tell me that I had gotten the code wrong for resizing images in my EPUB Straight to the Point book. At first, I thought he was right, but at second and third glance, I realize that he wasn't.

The problem is that the iPad doesn't recognize when you add width information directly to a img element. That is non-standard behavior (read: a bug) and should be fixed.

First, let's look at how CSS deals with images. An image has an intrinsic size, that is, its actual size in pixels. If you don't apply width or height information to the image, either in the HTML or the CSS, the image will appear at its original size. CSS allows you to set the height and the width of an image explicitly in pixels, or as a percentage of a parent element. This means that if you set the width of an image to 50%, the image should be displayed at 50% of the width of the element in which the image is contained, not 50% of the image's original width.

Here's what it looks like in Firefox. The image takes up half of the window width since its ancestor element is the body. So far so good.



Enter iBooks. Unfortunately, iBooks has a bug that ignores a width explicitly set for an img element. Just completely ignores it:



The first part of the solution, as a I describe in EPUB Straight to the Point, is to enclose the img in a div and then set the width of the div to the desired width, either in pixels or as a percentage.

But observe what happens if you remove the width property from the img and apply it to the div that contains the img. In iBooks it (erroneously) works as you want it to:



But iBooks, as we noted, doesn't follow the CSS spec. However, and this is a big however, Firefox, Safari, and Adobe Digital Editions—and all of the ereaders based on ADE, like the Sony Reader and Barnes & Noble Nook—do follow the spec.

The spec says that, by default, if a replaced element, like an image, is too big for its container (say, a div that you've reduced by half) then the image spills out over the edges. That is, it displays just the same. What the spilled out part (the overflow) doesn't do is affect the layout. Which means that any surrounding text just runs over it as if it weren't there. It's ugly.



As you can see, the div has been reduced to 50% of the width of the window, but the image is unaffected. By default, overflow is visible, but doesn't affect the flow of the page, which is why that text just rolls right over it. Ick.

The second part of the solution, (also contained in EPUB Straight to the Point) is to set the width of the img element to 100% of its parent, in this case, the div. Since the div is 50% of the width of the window, and the img is 100% of the div, then the img will also be set to 50% of the window. This works in both iBooks and more standards-compliant ereaders:





At some point, I had suggested using max-width instead of width but that only works in iBooks, not the other ereaders. In other words, it's no solution.

Embedding Fonts in EPUB- iPad, iPhone AND nook

I don't know how I missed this. I did see that Apple had published a new iBookstore Assets guide in late March, and I looked through the “changes in version 4.6” section pretty closely. But today I noticed something new: iBooks now supports embedded fonts even in regular, reflowable, non-fixed layout EPUBs.

That's not all. I noticed while I was testing this feature that Apple no longer restricts embedded fonts to non-special tags, as I describe on page 140 of my EPUB book. This is a really big deal, and means you can forget the ugly hacks previously required to get them to appear. If you want to use any of the 33 font families that come pre-installed in iOS (they are listed with samples in my book), you can simply call them in the CSS rule (skipping @font-face and the special file explained below).

And, and, and that's still not all. The really cool part is that the same code works on the nook too. Ooh, cross-platform font embedding in EPUB. I like it!

Here's how to embed fonts into an EPUB book:

First, add the font to your book files in the normal way, by adding an @font-face statement at the beginning of your CSS, something like this:

@font-face {
font-family: Prophecy Script;
font-style: normal;
font-weight: normal;
src:url("Fonts/Prophecy_Script.ttf");
}

That makes the font available. To apply it to your text, you have to add it to one of your styles, also in the CSS:

p.letter {
    font-family: "Prophecy Script";
    font-weight: normal;
    font-style: normal;
    font-size: 1em;
    margin: 1em 0 0 0;
    -webkit-hyphens:none;
}

And then make sure your HTML actually uses one of those styles:
<p class="letter">Warren Cty Ky March 11th</p>

The last step is to add a com.apple.ibooks.display-options.xml file in your META-INF folder. (If you don't know where that is, my EPUB book will be helpful.) The com.apple.ibooks.display-options.xml file is required for Fixed Layout EPUBs, but it looks like Apple is expanding its use.

The file should have a line like this one:

<option name="specified-fonts">true</option>

Put it all together, and you can get something like this:



Here's what it looks like on the nook (which I wish allowed screenshots!)



The font that I used is pretty similar to my great-great-grandmother's handwriting, and was designed by Michael Tension from Tension Type, and generously made available on Dafont.com. Remember to check font licenses before embedding them in your EPUB files.

Finally, if you're curious, you can see the original letter too.

And perhaps more importantly, you can download the sample file (I don't guarantee that it's free of that pesky iTunesMetadata.plist file.)

Borrowing library ebooks with a Nook

Update!! You can now borrow library ebooks with your iPad, iPod Touch, or iPhone as well, using the Bluefire Reader software. See Reading Library Ebooks on iPad with Bluefire, the Easy Way for more details. The information below, up to the point where you download the ebook, may still prove useful if you need help figuring out how to take out a library ebook.)

We're in Barcelona for the year, and like any travelers, had a limited amount of space in our suitcases. Instead of bringing lots of books, I was hoping we could download books to our ereaders: a Nook and an iPad. I have a Nook and not a Kindle because I just wrote a book about EPUB, the open format that is compatible not only with the Nook and the iPad but also with Adobe Digital Editions (ADE), which is used by many public libraries, including ours, the Boston Public Library (BPL). Our library does not support copying ebooks over to the Kindle or iPad, I'd be interested if other libraries do.

The BPL checked out 125,000 ebooks last year, 10,000 of which were in EPUB format. There are 741 different titles in EPUB format, and 1014 total copies of those ebooks. The BPL calls it "Adobe EPUB format" because all the EPUB books that it has are protected with Adobe DRM. That's important because it means that you have to use an authorized version of ADE to open the ebook and then copy it to your ereader.

The BPL has ebooks in other formats as well: 2475 Adobe PDF titles (also protected with Adobe DRM), and 948 Mobipocket titles (readable on a PC and some mobile devices but not the Kindle).

I had a bit of trouble getting EPUB and PDF books to my Nook, so I thought I'd write up my experiences and maybe save you some trouble.

Before we begin, let me tell you that every Massachusetts resident is entitled to get a Boston Public Library e-card which gives you access to the BPL's ebooks. Your local network (like C/W Mars in Western Mass) may have additional ebooks available as well, though their collection is likely to be smaller. C/W Mars for example, has only 176 Adobe EPUB ebooks. You can find more information about getting a BPL e-card on the BPL site.

I am going to use the BPL in this tutorial, but the instructions should work in any library system that uses Overdrive to manage their digital resources.

My first mistake was to try to download books before I had authorized Adobe Digital Editions and my Nook. I couldn't make the books that I downloaded before authorizing ADE and my Nook work.  So, before you do anything else, download Adobe Digital Editions. Once it's installed, the Setup Assistant will ask if you want to authorize it. You have to have an Adobe ID to do so. If you don't have one, take a quick detour to create one by clicking the "get an Adobe ID online" link, or go directly to the Adobe Sign in page. Then click Create an Adobe Account.

Then return to Adobe Digital Editions and add your Adobe account information to the Authorize window.



Now you're ready to authorize the Nook. Close ADE, plug in the Nook, and then open ADE again. (I've found that if you plug the Nook in when ADE is already open, ADE won't see the Nook.) ADE will ask you if you want to authorize the Nook. Click the Authorize button. This step allows the Nook to link to your Adobe ID and thus be able to read your DRMd ebooks from the library. If you've done it right, when you click the left-most icon in ADE (three little books on a shelf), you should see Nook listed under the Bookshelves.



If you happen to not do these steps in this order, you can deauthorize ADE on your computer by pressing Command-Shift-D on a Mac (or Control-Alt-D on Windows) and then start over again.

Once you have ADE and the nook authorized, you can go to BPL and take out the ebooks you want.

We'll begin at the main page for the BPL's digital resources: http://overdrive.bpl.org/. We want to download an EPUB book for the Nook, so click on the Advanced Search tab and then choose Adobe EPUB eBook in the Format menu, and check the Only show titles with copies available option. Of course, if you're searching for a particular book, you can put in more criteria under Title or Creator/Composer.



If you want to browse like me, leave the Title and Creator fields blank. Click Search. You'll see a list of available EPUBs. You'll see that each title lists its available formats. Since we chose Adobe EPUB eBooks, every book listed will be in that format (at least). Once you find a book you like, click the Add to Cart link at the right-hand side.



You can add additional books to your cart if you like. When you're ready to check out, click the Proceed to Checkout link.



If you haven't logged in already, you'll be prompted to do so.



You'll get one final screen where you can confirm which books you're downloading, the length of time for which you're borrowing them (either 7 or 14 days), and the format in which you're downloading them. You'll also be able to see how many items you have checked out already and how many more you are allowed to borrow.



When you're satisfied, click the Confirm check out button at the bottom of the screen.

Once you've borrowed the book, you'll get a download button for the corresponding file.



Click the Download button. Now you'll get an alert that says you're downloading a file and if you want to open it with any program in particular. Hopefully, Adobe Digital Editions will be selected by default. (If you want to read this library book on your iPad or iPhone, you should install the special link to Blufire and click its bookmark now instead of the Download button. See Reading Library Ebooks on iPad with Bluefire, the Easy Way for more details.)



Click OK to continue. Adobe Digital Editions will automatically open and you'll see a progress bar showing how your borrowed book is being downloaded.



Once it has finished downloading, it will appear in your Adobe Digital Editions Library list.

Now the only step left is to copy the borrowed book to your Nook. To do so, make sure you're in Library mode (click the icon of the three little books in the top left corner of ADE), and find the newly borrowed book. Then drag it to the Nook bookshelf (under Bookshelves in the left navigation bar).



(If you don't see Nook in your Bookshelves, it's because a) you didn't authorize it as described earlier, or b) you unplugged it from your computer, or c) you plugged it in after you opened ADE (in which case you should quit and reopen ADE).

And that's all there is to it! (!)

EPUB books are automatically “returned” at the end of the borrowing period, but you can return them early by clicking the arrow next to the book title in ADE and choosing Return Borrowed Item. You might want to do this in order to borrow something new.



Leave questions in the comments. I'd also love to hear if your library system works the same way.

Just for the record, it really shouldn't be this hard. The problem is DRM. If these books were not copy protected, you could copy them to any ereader that you owned, just like you can read books from the library in any room in your house! But I'll try to not go off on a DRM rant here.