Why iBooks for Mac Matters (Goodbye, PDF!)

We folks who create ebooks have been waiting for iBooks for Mac for a long time as a testing tool. Copying EPUB files from one device to another is a hassle and being able to see a book right where you've created it is frankly, this side of wonderful.

But of course, we #eprdctn people are not at all the point. Apple's release of iBooks for Mac in its new Mavericks operating system is a huge step for ebooks and EPUB because it makes EPUB available where people want to use it: on their desktops. The fact that this is the very same format—and the very same files—that works in their ereaders and tablets is icing on the cake.

Have you ever tried to send someone an ebook? It's not fun. Most normal people out in the world have never heard of EPUB and if you start explaining how to download a Firefox extension or make them buy a program to open it, they'll smile (if you're lucky) and go do something else.

Up until now, if you wanted someone to be able to open an ebook easily, you sent it in PDF format. And frankly, PDF is a dead end. It works ok on a computer, but it's miserable for reading on smaller devices. (No apologies to you PDF folks, sorry, and don't flame me in the comments. I don't care that on some Android devices, a PDF is slightly readable. I want an open, universal, flexible, standard format, and that's EPUB.)

What's PDF's great advantage? After years of downloading Adobe Acrobat Reader, most people have it on their computers, and when they double-click a PDF, something miraculous happens: it opens.

The last Pew Research Center poll about ebook reading (April 2012) says that more people read ebooks on their computers than on any other devices. In fact, 42% of the Americans who had read an ebook had read it on their computers, similar to the 41% who read on black and white ereaders, 29% on cell phones, and 23% on tablets. And that was 18 months ago, in the US.

In Spain in 2012, just to give one example in Europe, 55.8% of ebook readers use a computer to read their ebooks, compared with only 6.6% who use ereaders. According to the Spanish Publishers Guild only 9.7% even own an ereader. (I wished they gathered data about mobile phone reading, but they don't.)

At any rate, until Mavericks, if they were reading on a computer, they were reading in PDF. But Apple changes that. Not only has Apple released a fairly decent EPUB reader—that supports both EPUB2 and EPUB3, and both fixed and flowing formats—the most important thing is that iBooks for Mac is included in the Mavericks installation automatically.

That means people don't have to even know iBooks exists. You send them an EPUB file, they double-click it, and it opens.





Pure magic. They can read all kinds of ebooks, as large or small as they like, with JavaScript, audio, video, media overlays (read aloud), and in Asian languages with right-to-left page progression where necessary. It just works.

Now, why was that so hard?

Quick iBooks for Mac preview

Update: Several people have reported to me that iBooks for Mac does not support pop-up footnotes. Hopefully that's a bug that will be fixed soon!

Although there have been ebook readers for the Mac for some time, I was very pleased to hear that Apple's new operating system (Mavericks) includes iBooks for the Mac—which in contrast with most other desktop ereaders (except Readium) supports both flowing and fixed layout and both EPUB 2 and EPUB 3 format ebooks. Since iBooks is free and installed automatically, this means that Mavericks users will be able to double-click an EPUB file from the desktop—or an email message—and have it open right up.



I was very anxious to see what iBooks might look like on the Mac. But I'm not so foolhardy as to install a brand new operating system on my computer while I'm finishing up a couple of big projects, so I installed it on my daughter's computer instead! I thought I'd give you a quick rundown of what I found.

First, you don't have to install iBooks separately, it comes included with Mavericks. I found it on the dock: an orange circle with an open book.



When I opened it up, it immediately asked me to sign in with my AppleID—it feels like you can't go anywhere these days without identification. I find it a bit oppressive, especially since I wasn't on my own computer. And though it let me log in, I couldn't download any of my purchased books because I had already authorized five computers and this wasn't one of them. So I went and deauthorized them all and then reauthorized this one only to be warned that if I downloaded books from this particular AppleID account, I wouldn't be able to download items from a different AppleID account (e.g., my daughter's, who owns the computer) for 90 days. I didn't think she'd be very happy with me, so I didn't do it. I tried creating a separate user and then opened iBooks again, but got the same error. So I opted not to download any of my already purchased books.



This was frustrating to me. I should be able to access my purchases on any device to which I log in, whether or not someone else also has an account there. This means iBooks doesn't really work in the cloud—it only works on your personal devices on the cloud, not at the library, or at the vacation house you rented, or on the computer you borrowed from your daughter.

For testing purposes, however, I don't have any trouble getting my hands on other EPUB documents. I chose an EPUB3 flowing book, and EPUB3 fixed layout book with JavaScript, and a fixed layout book with EPUB2-style read aloud.

To load them into iBooks you choose not File > Open Book (which remains stubbornly grayed out, and refers to opening a book that's already in iBooks), but rather File > Add to Library. You can add a few by command- or shift-clicking multiple items in the dialgo box. Click the Add button and you'll see them listed in your library screen.



If you've logged in with your AppleID, you'll also see any books that you'd previously purchased, with tantalizing cloud icons in their upper right corners. Display the books' authors and titles by choosing "Show Title & Author" from the Sort By menu in the upper right corner of the Library window.

Let's look first at the flowing book (double-click to open). I used What's up with Catalonia? (a recent collection of essays from leading Catalan leaders and thinkers on the independence movement there).

The default view is a two-page spread. The cover is shown on the left-hand side, which in my case, shifted the copyright page to the right-hand page, and the title page to the left-hand page, an effect I didn't like much. But of course, there's not a lot of control with a flowing book, so I bit my tongue.

You can switch to a one-page view by choosing View > Single Page or by simply dragging the right edge of the page to make the layout narrower. iBooks will let you view a narrow single page, or you can drag it out to make it wider.





If you get too wide, iBooks will first add white margins around the text, and finally it will shift to a two-page layout to keep the text from displaying on excessively long lines. You'd think you could choose View > Two Pages to go to the two-page spread view, but although it was automatically chosen when I pulled the layout out manually, it was always grayed out, and I couldn't ever choose it. Looks like a bug.





Click the full-screen option (diagonal arrows in the right top corner to fill the window with the screen, which means a two-page spread with moderately wide paragraphs and ample margins.



Make the text larger with Command-+, and then make it smaller with Command-–.



And yes, you can make the text sufficiently large so that a full-view contains only a single page.



But you can't make it so small as to force a third page.

Turn pages either by clicking the arrows that appear when you hover over the right or left edges of the page, or perhaps more easily by clicking the right and left arrows on your keyboard.



Consult a dictionary for the definition of a word by double-clicking the word in question.



If you select a phrase or two, you can choose to highlight (or underline) the text for further reference, add a note, copy it, look it up in the dictionary, search the web or Wikipedia, or post the selected text to Facebook, Twitter, send it in a Message or Email, or (with Start Speaking) read the selection out loud.



iBooks appends a link to the excerpt's book on the iBookstore, but that link only works if the copy came from the actual copy of the book on the iBookstore (and not a local version).



If you already know you want to highlight, hold down the Command key while you're selecting text.

iBooks won't let you copy more than a few paragraphs of text at a time, presumably for copyright reasons.

You can see the contents of a note in two ways. First, you can click the little note icon next to the highlighted text itself. Or you can view all your notes and highlighted text by clicking the small page icon on the left side of the window. The notes will be organized by chapter—as long as the book is in EPUB3 format with a proper NAV document. If the ebook is in EPUB2 document, the notes are displayed in chronological order, which seems a lot less useful, to be honest. You can jump to the referenced section in the book by clicking the page number next to the note.



You can consult the Table of Contents by clicking the bulleted list icon in the upper-left corner. Note that the chapter currently being viewed will be highlighted in blue. (Curiously, this works for both EPUB2 and EPUB3 documents.)

OK, how about Fixed Layout?

I opened up my Monarch Butterfly Book to see how iBooks for Mac would do. The Monarch Butterfly Book is EPUB3. I felt compelled to jump to Full Screen view right away so the photography-filled book wasn't lost among the myriad windows on my screen. You can always choose View > Thumbnails, click the little Thumbnails icon, or press Comand Shift T to make the handy page thumbnails appear at the bottom of the screen. Click on a page to jump there.



All of the JavaScript effects in the book worked just fine, including transitions and animations, scripts, and more. Again, use the right and left arrows for navigating (or the thumbnails), and the mouse to click.

You can also set bookmarks for fixed layout books. And once you have, you'll see them listed when you click the bookmarks menu.

There are two related things that annoyed me about iBooks rendering of fixed layout: you can't show a single page, and you can't zoom in to a book. My Monarch Butterfly Book has high resolution photos but you can't zoom in to see the details like you can on the iPad or iPhone.

One solution is to create a single image out of two pages (half of the image is on each page), like I do in Barcelona Beyond Gaudí: (If you were specifically targeting an EPUB to a laptop audience, you could also be careful with the aspect ratio so that it better fit a horizontal orientation.)

Read Aloud, and Right-to-Left Page Progression

My manga.epub example is an EPUB 3 fixed layout book with Japanese writing and right-to-left page progression. I'm happy to report that iBooks for Mac displayed it perfectly, including the proper highlighting of the words when the Read Aloud media overlay was invoked. You can double-click words to have iBooks restart the reading from that point.



Another interesting thing is that you can have multiple books open at the same time. This is obviously useful for readers, but I can see it coming in very handy for testing and production work as well.



Finally, I should call your attention to iBooks' preferences, where users can choose whether to force text justification (regular line endings on the right side of the page) or let the lines divide naturally, and/or whether to allow hyphenation. I haven't yet tested whether these settings override or are overridden by settings in an EPUB document itself.

Users can also choose to sync bookmarks, highlights, and collections across devices, but it didn't work for my manually uploaded books. I suspect it only works for books purchased from the iBookstore.

I'd love to hear if you find out anything else interesting about iBooks for Mac. Overall, I'm pretty pleased. It's great to have a free program on the Mac that people can read EPUB ebooks with.

About croquetes, Twitter, and the Catalan Way

Yesterday's Catalan Way—Catalonia's 250 mile long joining of hands in support of Catalan independence from Spain—would not be the first movement to question Twitter's algorithms for choosing trending topics. But I'm sure it's the first one to respond with #croquetes!

Yesterday, Twitter buzzed with reports, videos, and photos from the #CatalanWay, which in Catalan is called the "Via Catalana". Today, it is newspapers all over the world, from the New York Times, Washington Post, Wall Street Journal, Los Angeles Times in the US, to the Guardian, Telegraph, Independent in the UK to Der Spiegel, Die Welt, Berliner Zeitung in Germany, and so on and so on. VilaWeb has a good list.

But Twitter stubbornly refused to register #ViaCatalana, the hashtag marking most of the posts, as trending. During a radio show on RAC1, Jordi Basté explained that Twitter had told them that 1000 people had to be talking about a particular topic in order for it to 'trend', but that it was important that that topic not have trended the previous day. Half in gest, he said, why don't we test that theory with "#croquetes" [a very typical and common kind of special leftovers in Catalonia, generally meat mixed with bechamel sauce and fried, quite delicious].

Within minutes, everyone was tweeting #croquetes, and sure enough Twitter quickly listed it as a trending topic. In fact, it's still trending this morning.



While some talked of conspiracy and showed that #viacatalana was being heavily used across social networks, others explained Twitter's system for designating trending topics.

My opinion is that whatever Twitter's system is, it does not work. There is absolutely no reason that such an event, closely followed by the world media, front page on Wikipedia, and tweeted by hundreds of thousands of people would fail to 'trend'. Twitter needs to revise its trending topic algorithm, so that we don't have to resort to silly tricks like tweeting about yummy food. And it's true that, totally coincidentally, I had #croquetes for dinner last night!

Playmobil triggers, or why I spend so much time on Twitter

Last night, my daughter decided to recreate our entire kitchen in Playmobil. The counters and kitchen furniture, a dog and three cats, a bowl in the island and silverware in the drawer just where we keep ours, but also dishes in the sink, overflowing compost, father making dinner, son playing soccer, and me on Twitter. I'm biased but it's quite brilliant.



My kids tease me about my Twitter addiction and at dinner, after I tweeted the tomato picture they also accused me of being one of those “food tweeters” (gasp!), clearly not a good thing. But subscribing to Tim O'Reilly's tenet that ambient intimacy is one of Twitter's keystones, I forged ahead undaunted, and tweeted the part of the Playmobil portrait that was of me and my coffee and my phone.

Which is when Twitter did its magic. My Twitter friend Melissa Techman favorited it and asked if she could use it for a Thimble mashup she was doing with her teens. Melissa is a librarian in Virginia (Maryland?) who is always working on amazing ways to get kids thinking and working on books and technology. Though we haven't (yet) met in person, we've been following each other for a year or so, and seem to continually find interests in common and ways to bounce ideas of each other. She organized an online workshop last year for which she invited me to do a short presentation on ebook production. I'm excited to see what else we can collaborate on in the future.



Meanwhile my daughter wanted to know what a Thimble was, so I asked Melissa, and she pointed me to the website. And it turns out it's a way of creating web pages—I haven't figured out the remixing part yet—and so my daughter and I spent the next hour or so writing HTML. It's hard for me to quantify what a treat it is to be able to share my knowledge with my kids. They know almost everything already (!) so it's pretty rare that they let me teach them anything. But if someone else suggests it... well, thank you, Melissa!

After my daughter went to bed, I spent a little while following some of Melissa's tweets about #clmooc. I keep bumping into MOOCs and I know I should know more about them and that I will love them when I get there, but I haven't had a moment to look more closely. But just reading those MOOC-related tweets is what gives me hope about the world. There are so many people working together, sharing knowledge, learning cool things, inventing, making.

It didn't stop there. This morning I found that Kevin Hodgson had started to follow me. It caught my eye that he lives in Western Mass, but as I wandered about the last few tweets in his timeline, I found interesting clues to just what #clmooc is up to, and also found a great list of Techno Skills, written by Kevin Kelley, which I shared with my Catalan tweeps. Hopefully, one of them will be inspired to translate the list into Catalan so it can be shared further.

One of Kevin Hodgson's links also got me thinking about Minecraft which helped me realize I should probably not freak out quite so much about how much time dear daughter spends with it. Indeed, encourage her even. And so it goes full circle, while leaving and sharing a little bit at every stop.

Bonus. This is not the first time I've been depicted in toys. I met another Twitter friend, Maia Weinstock after reading in her bio that she makes "science and music personalities come to life in LEGO". (I love Lego.) Then I noticed she retweeted my Catalan stuff, and it turns out she's part Catalan too! We met in person for the first time for a Sant Jordi event at Harvard University in April, when she presented me with a Liz Castro minifig. Totally honored!

Volunteers

My garden this year is mostly populated by volunteers, and a good thing too, otherwise there wouldn't be much there. There are several patches of Mexican sunflowers, and a couple of surprise pumpkins (or gourds, perhaps :), and even a cosmos or two. The only thing I planted myself were two rows of peas, in a fit of energy and desperation at the end of May, and a tiny collection of tomato, cucumber, and annual starts that I bought at the farmer's market, which is cheating, but I don't care.

I'm not a very good gardener. I'm not good at imposing order: I hate thinning what I've planted and I almost never pull out volunteers. It's an unwillingness to choose between serendipity and what I think I want. In a way, it's a refusal to take responsibility, and/or to pretend I have control. Before I fall overboard, I'll admit that I do distinguish between 'volunteers' (plants I like) and 'weeds' (plants I don't like), although I'm not very good at pulling the latter either.

How do you know when to push for change and when to accept what's offered? When is it right to change course—in a sort of zen exercise of being present—in order to follow what you have before you. And when should you pull it out, to leave space for the seedling that you thought you wanted there?

The space of my life is overrun with both planted seedlings and volunteers. And I can barely keep up with either one. I met an important mentor because I didn't do well enough on a Spanish placement exam. I found my first job in Barcelona because I got lost in an office building. I got the rights to the Spanish edition of The Macintosh Bible after asking for permission to publish just a few tips. I got invited back to the US in the middle of a concert of the Rock Bottom Remainders. I agreed to do the HTML book so they would let me do the Netscape books. Oh my. But I knew I wanted to do EPUB as soon as I saw the iPad :)



And everything is so interconnected, and gets more and more so. The peas climb up my volunteer sunflowers, and I go to Barcelona and learn how to publish books and then 20 years later publish books about Barcelona. I never know what's going to come out and how tightly to hold the rudder.

Getting iBooks to respect image width

So, I wrote a long time ago about how iBooks doesn't apply the CSS width property to images properly. Despite the fact that the spec says that width applies to all elements except non-replaced inline elements, and that images are replaced inline elements, up til now, iBooks wouldn't apply width to img. There is a workaround: applying the width to the image's parent, and setting the width of the image itself to 100%, as I describe in that article.

What's more frustrating is that since InDesign follows the rules, dutifully applying the pixel or percentage dimensions in the CSS directly to the image—which again, should work but doesn't in iBooks—those images are not displayed properly in iBooks.

So here's a document in InDesign: (I'm showing you the example in InDesign, but I would have the same issue if I created the code myself from scratch.)



Here's the code that InDesign generates when I choose "Preserve appearance" and "Relative to page"



And here's how iBooks displays that page:



I wrote Douglas Waterfall, Engineering Architect on InDesign, about the problem and he pointed me to the solution, right there in the iBooks Asset Guide (which you can download if you have an iBookstore account).

The solution consists of creating a super-charged or magic CSS class that you can then use to properly apply the width property to img elements in iBooks. And it won't confuse ereaders that already do.

First, in the content.opf file, you have to make sure you have declared the iBooks namespace in the package element. You need this namespace if you use iBooks versioning as well. And it's completely harmless for non iBooks ereaders. (Note that I'm doing this in EPUB 3. I don't know and haven't tested it in EPUB 2.)

<package xmlns="http://www.idpf.org/2007/opf"
prefix="ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/" version="3.0" unique-identifier="bookid">

Next, in the meta section of the content.opf file, define which class should be able to apply the width property properly.

<meta property="ibooks:respect-image-size-class">respect</meta>

I called my class respect, but you can call it whatever you like.

Next, in the HTML, apply the respect class to your images.

<p class="Basic-Paragraph"><span><img class="respect" src="image/imagefolder-2_fmt.png" alt="imagefolder-2.jpg" /></span></p>

You can actually create multiple classes, as long as they are equal to, or prefaced with the name you declared in the meta element. So I could use respect, respect-wide, respect-small, or whatever.

Finally, create a rule in your CSS that references the respect class and applies the width property:

img.respect {
width:51%;
}

(Of course, if you're using InDesign, you can simply create a style called respect and let InDesign create your HTML and CSS.)

And then, miracle of miracles, iBooks applies the width property, just as it should.



Seems crazy that we have to help iBooks follow the spec properly, but at least we can.

If you like this post, please consider subscribing!

InDesign CC - Embedding Fonts

One of the most appreciated improvements to InDesign with the new Creative Cloud edition is that it finally embeds fonts in a way that iBooks understands. Let's take a look.

In InDesign, there is always some font chosen for text. You can't have "none". When you export a book to EPUB, the default is for InDesign to "Include Embeddable Fonts"



The problem is that InDesign CS 6 doesn't do it right. Whether it's Adobe's fault or Apple's or the IDPF's, I've never been quite sure, but the truth is that there were two major problems: the font didn't get obfuscated properly and InDesign didn't account for iBooks' idiosyncracies (read: non-standard font requirements).

So, given this InDesign document:



InDesign CS 6 exports a file to EPUB that looks like this in iBooks:



My design surely lacks penache (it was designed to take advantage of the fonts that were available on the iPad in 2010), but if that's what I want, that's what I want InDesign to give me.

Now InDesign CC does. Notice both the Bradley Script for the headers and the Optima for the body text.



I heard that it finally got the obfuscation right (or in accordance with Apple), but the coding news is that it also caters to Apple's requirement of including the com file in the META-INF folder.



And here's what it looks like on the inside:



Apple's com file is totally non-standard (that is, not part of the EPUB3 spec), but regardless, if you want fonts to work in iBooks with an EPUB 2 file, that's what you need, and I think Adobe made a great decision by including that file automatically so we don't have to crack open the EPUB to add it ourselves. Since the com file doesn't affect other ereaders or validation, there's nothing to be lost in adding it, and everything to be gained.

Note that I said EPUB 2, but InDesign CC actually includes the com file in EPUB 3 exports as well. That's not perfect—since Apple now follows the spec for declaring font usage in a meta element in EPUB 3—but it still works and better yet doesn't break anything. And given Adobe's dedicated support for EPUB lately, I'm confident that they'll roll the new behavior into InDesign CC soon.

One small caveat: remember that if you have Preserve Local Overrides unchecked and you've applied fonts with an override, then you shouldn't be surprised if the fonts don't make it to the EPUB file.

InDesign TOCs to EPUB

I'm exporting an InDesign document to EPUB and for some reason the formatting that I've applied to the TOC title doesn't stick. I click in it and look in the Paragraph Styles box and it says TOC title,



but when I export, it says "No Paragraph Style". I go back again, check once again in the Paragraph Styles box, export, and once again, I get "No Paragraph Style".



What's going on?

And here's where going to trade shows really helps. I mentioned a while back that the engineers at Adobe are really open to suggestions and requests, and it happens that a couple of them came to my EPUB3 talk the other day in New York City. We talked for a bit afterward about my wish for a single file for both the navigational TOC and for the regular, in-the-body-of-the-document TOC (which I describe in some detail in my slides which you can find at the previous link). And the engineer told me, “but since we regenerate the ncx file upon export, we wouldn't know if the user had changed something in the text”.

Remembering that today helped me realize why my format wasn't making it through. InDesign doesn't pay attention to the document that's on your page upon exporting a TOC to EPUB, it only looks at the TOC Style, and what you have defined there. And here's what I had:



Since InDesign uses this definition and not what you see on the page to generate the TOC in your EPUB document, it was giving me "No Paragraph Style".

Once I updated the TOC style, I was able to get the TOC title to be exported with the proper style.





Unfortunately, InDesign CS 6 has a bug which keeps it from properly splitting an EPUB on a style that's part of a TOC. Argh. So, in the end, I had to add the TOC title separately in my InDesign document to ensure the break. (I also had to get rid of the title from my TOC style so that it wouldn't be repeated there.)

Still, I think it's important to keep in mind that when InDesign generates a TOC file, it gets the information from the TOC Style definition, and not from the content that you may have edited on the page.

EPUB3 Now! at IDPF DigitalBook World 2013

On Wednesday, I was invited to talk about EPUB3 at IDPF's Digital Book World Conference which is part of the Book Expo America going on in New York City this month.

My basic thesis is that EPUB3's promise is as a galvanizing, common goal for both ebook publishers and ebook designers and production workers that will enable all of us to move forward together, even if it means getting to our objective at different times. Because EPUB3 doesn't break EPUB2 books in older ereaders, there is no reason to put off using EPUB3 right now. And because many ereaders are already supporting many of EPUB3's flashier features—some of which I show off in this presentation, there are lots of good reasons to go ahead and make the jump.

In my talk, I mention the fact that Hachette, part of the second largest publisher in the world and one of the Big Six in the United States has announced that not only will they soon deliver all of their ebooks in EPUB3 format, but that they will stop delivering books in EPUB2. They haven't served books in Kindle format since 2007.

The promise of a single file that works on all systems is before us, and EPUB3, our common goal, is what will enable us to get there.

I have not only published my slides, but I re-recorded my talk so you can get all of the details. Be sure to activate the audio portion.

Epub3 bea:idpf 2013 from liz_castro

(I couldn't get the audio to play in Chrome, but it seems to work just fine in Safari.)

Note that you can download (or buy) the EPUB3 version of What's up with Catalonia? that I use as a sample in my talk here.

You can buy the Monarch Butterfly book on the iBookstore.

Barcelona Beyond Gaudí is available both at the iBookstore and on my website.
I welcome comments and suggestions.

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!

Linking to external video (and audio)* in EPUB3

I forget when I first saw the option in the iBooks settings panel, but I know it was a long time ago. Enticingly, it said Online Content, and had an On/Off switch. And underneath was a short explanation: “Allow books to access publisher's content from the Internet.”

EPUB used to be a strictly closed affair; all of its content had to live within the EPUB package itself. But in EPUB3 an exception was made to allow remote access for audio and video elements only. These two things together could only mean one thing: that remote video was now possible in an ebook, at least on the iPad.

Why is it important to be able to access remote video and audio files? For starters, keeping your audio and video out of the EPUB can make your EPUB a lot smaller and much more agile. It will download much more quickly. On the other hand, in order to see that video, your reader is still going to have to download it at some point, and they might even do it multiple times, which can be a drag on your server.

Another reason to host video or audio remotely is to give access to multiple formats of the file. EPUB3 has the capability of looking through a series of links and only using the one that works best in a given ereader. Including multiple versions of a video file in an EPUB file would result in unnecessary bloat. (Of course, this is a bit of a moot point in a world in which video and audio in EPUB mostly works in iBooks, but that is changing with Readium, and surely with newer ereaders. The fact that there is no agreed upon codec for video is also an important factor.)

Finally, if the video is hosted remotely, that means you can update it at any time. Note, however, that you must be careful to maintain the same link that exists in the EPUB file.

The code

So how do you do it? I've tried a bunch of different techniques in the last few months, but couldn't make it work. Today, while reading Matt Garrish and Markus Gylling's EPUB 3 Best Practices, I discovered that they have figured it out. It's not complicated at all, I should have figured it out too :)

The code is very straightforward and not that much different from embedding video files right in an EPUB document.

1. First, in the HTML document (mine's called outvideo.xhtml), create the video element as usual, obviously using the proper URL for the src attribute:

<video controls="controls" poster="image/poster.jpg" width="384" height="276">
<source src="http://www.elizabethcastro.com/epub/examples/catbox.mp4" />
<source src="http://www.elizabethcastro.com/epub/examples/catbox.wvm" />
</video>

Although the controls attribute isn't required, I recommend it. Otherwise, your reader won't be able to start (or stop) your video. Also note that I was playing around with WebM video, but wasn't really able to get it to work. But I haven't given up yet.

2. In the content.opf file, you have to do two things: list your video in the manifest as if you'd included it in the EPUB document, and then declare that the HTML file that contains the video points to an external resource.

a. First, we'll manifest the video.

<item id="vid" href="http://www.elizabethcastro.com/epub/examples/catbox.mp4" media-type="video/quicktime" />

b. Next, in the manifest of the HTML file that contains the video, declare that you're using an external resource:

<item id="outvideo" href="outvideo.xhtml" media-type="application/xhtml+xml" properties="remote-resources" />

And that's all there is to it. What does it look like?

If your reader has the Online Content option in iBook preferences Off, all they'll see is the poster image:



If your reader has Online Content On, they'll be asked if they want to access your online content. It's good that they have a choice, since they may want to wait to download videos until they have wifi available.



Finally, once they click the Allow button, the video will download and become available.



Keep in mind again, that if they no longer have connection to the Internet, the video will stop being available (even if they never close the book or leave iBooks)



It works in Readium too:



You can download the example file here.

*Update: Yes, audio works too. Don't forget to use mime-type audio/mpeg when declaring audio file in content.opf file. And making sure your file paths match the actual file locations helps too :) Thanks to Alberto Pettarin for help troubleshooting.