Pepcon 2012

I'm writing this on the plane on my way home from Pepcon 2012. I'm tired and annoyed with the TSA, but even they cant take away my appreciation for having gone. As much as I love and value the connections and communication that happens online, there's something about meeting people in person that somehow makes it all real.

I wanted to write a little about what it was like so those who couldn't go could get a feel for it.

I didn't get to Pepcon until almost 3pm on Monday due to some prior commitments. But there were some sessions still going on when I got there, and I listened to part of Mike Rankin's top ten Long document tips and then a bit of Bob Levine and Keith Gilbert's presentation on DPS. One of the hardest parts of most conferences for me is wanting to listen to multiple presentations at once. My solution is to wander from one to the next, but it's imperfect at best.

Let me confess that I don't know a thing about DPS, but my first impressions aren't that great. It feels like a dead end to me, and I personally can't stand subscription programs; I don't want to be locked in month after month, I want to own. And it's all images, even the text?? No. I want standards so that my content doesn't get lost under proprietary formats. I don't want all my eggs in anyone else's basket.

After the sessions I took part in the first of two meetings with the senior InDesign engineers from Adobe. I've been on the InDesign beta team for a while so their names were familiar, but this was the first time I had met any of them in person. I was totally impressed. They asked us what we wanted (in terms of InDesign support for EPUB) and then carefully listened as we debated the merits of different solutions and the problems of various strategies. They didn't make any promises and they didn't make us sign any NDA forms, they mostly just listened and gave us feedback about our complaints.

One of my big complaints was that the CSS that InDesign generates has too many default values, and doesn't take advantage of CSS' power of inheritance (the cascade). It's tricky, because you can have an unending hierarchy of styles based on other styles in InDesign but the most obvious way to translate that to CSS involves using multiple classes, which are unfortunately not supported by all ereaders. There is limited cascade without multiple classes though there is the body, the p elements and then individual classes.

Throughout the course of the two meetings (almost four hours) we talked about a lot of issues. We didn't come to any firm conclusions and they made no promises but I think the important bit was helping them talk with people who actually use the tool to make EPUB files—probably Ron Bilodeau and Colleen Cunningham were more useful in this regard than I was.

And I don't mean that in a flippant way. In my own personal experience, it's a challenge to both write about how to create EPUB and actually create EPUB files. I imagine that it's even harder writing software that creates EPUB files and actually creating EPUB files. I'll come back to this point.

After the meeting with Adobe, I went to the Pepcon Ignite session. My favorites were the ones by MarisaKC and by Kelly Vaughn, whose presentation on creating crazy shapes with various weights and kinds of strokes reminded me a bit of my own exhaustive report on the possibilities of iPhoto.

You'll notice that I haven't mentioned food yet. I went up to my room and ate some of the lovely fruit that Anne Marie and David had left for me. but I didn't go out to dinner because I still wasn't done with my presentation despite my promises to myself not to leave it to the last minute. Having to stand up in front of people and say something relevant is a really good way of proving the difference between having an idea and actually having a presentation. I knew what I wanted to say, I knew where I wanted to put the emphasis, but when I started to practice out loud, I realized (yet again) how much work it is to put those ideas into a shape that makes sense to other people. Easy is hard, and all that.

I didn't get to sleep until 11:30pm local time, which was 2:30am in my head, and I had been up since 3am the night before because I had left on an early flight. Note to self: really, really finish your presentation before you go to your next speaking engagement.

I woke up at 5am, thanks to a call from my non-time-zone-aware-daughter, but then took advantage of the time to really finish my talks, and practice them all the way through.

During the morning session, while hearing the brilliant ID scripter Kris Coppieters, admit that he “isn't an InDesign user”, and then watch several more presenters describe features I've never used and sometimes never heard of, the difference of using a program and creating the program (or teaching others how to use it) became even more clear. It's really hard to do both.

I think of the morning sessions, it was Gabriel Powell's that was the most helpful in terms of EPUB stuff: “Preparing Images for ePub/eBook”.

At lunch, I had a nice chat with Ron Bilodeau and Felipe Santos, the former from O'Reilly in Cambridge, and the latter from Brazil. These are the moments that make a conference special: catching up with people face to face that you might know online (like Ron), and learning different perspectives and needs from people you're meeting for the first time (like Felipe).

At 1:30, I gave my first talk, on Enhanced Ebooks. I started by talking about what sorts of books are encompassed by that term, and then talked about how to embed audio and video in an EPUB file with InDesign, using the techniques shown in the blog post that I published that same day. I was pretty jazzed to be able to explain to these InDesign-centric and perhaps code-cautious listeners that they could create enhanced ebooks without cracking their EPUB files and looking at the dreaded HTML.

Then Matthew Diener joined me to explain what EPUB 3 has in store, wisely showing some nice examples on both Azardi and Readium. Then I gave a more nuts and bolts look at exactly what EPUB3 code looks like. It's not that different from EPUB2, you'll be happy to hear. There were many fewer listeners in the EPUB3 talk than the Enhanced Ebooks presentation. I think people are wary of future technologies that are not yet implemented. But as I mentioned yesterday, EPUB3 is now supported by the iBookstore, and Apple is using it in standard ways to provide a better user experience. It's time to make the move.

After my talks, we had another two hour meeting with the InDesign crew, in which we discussed indexes at some length. One of the issues we argued about was how to label references to content. That is, if you go look up EPUB3 in the back of a print book, you might see something like:

EPUB3 12, 45-67, 78, 92

In an ebook, of course, there are no discrete pages, and so at first glance, you might be inclined to do away with those references altogether and use something like:

EPUB3 1, 2, 3, 4

But I argued that even though the page numbers themselves might be an artificial construct, they still give us information about what we might find there, that is lost in the replacement solution. In the example above, I might expect a short introductory mention on "page 12", a more thorough treatment on "pages 46-78", and less introductory, but still short mentions on "78" and "92". How do we convey that information without the actual page numbers? The short answer is, we don't know yet.

Finally, it was time for dinner. I was looking forward to meeting EPUB coder extraordinaire Rick Gordon for the first time, and had put out a call on Twitter to see if anyone wanted to join us. It was a really interesting bunch in the end (about 10 of us) who made it to the Jazz Bistro Les Joulins, just down the street from the hotel. The food was good, and the conversation interesting, and heavy into code :)

Not quite done, in the morning, I spent an hour at the Meet the Author's table with Steve Werner, InDesign expert. I'm not sure people really knew we were there, but I got to talk to a few people who wandered over.

The last thing on my agenda was to talk to Kris Coppieters and see some of his amazing scripts in action. He kindly came out to give ma demo and I was totally enthralled. While I had originally talked to him about a script that converts blogs to InDesign documents, I was most interested in his CSS Geometry which spits out the coordinates of the text blocks in an InDesign document and might be very useful in generating Fixed Layout ebooks from InDesign.

And I did get to see a cablecar!



Many thanks to Anne Marie Concepcion and David Blatner for inviting me, and in general for organizing the conference and getting so many interesting people together! (And thanks to Matthew, whose nicest tweet ever is still making my day.)

Creating pop-up footnotes in EPUB 3 (and thus in iBooks)

Apple sent around an email today announcing that EPUB 3 is now supported by iBooks and the iBookstore. It also tantalizingly suggested that EPUB 3 supports pop-up footnotes and said you could find information in the EPUB 3 spec on the IDPF website. The first part is true, and the second part is sort of true, but if you like, read on and I'll explain just how to do it.

The IDPF website explains the proper syntax for marking up footnotes symantically, that is, by labeling them as footnotes:

<p>In chapters 24, 89, and 90, we substituted a capital L for the symbol for the British pound, a unit of currency.<a epub:type="noteref" href="#n1">1</a></p>

This snippet is from an EPUB 3 version of Moby Dick, coded by Dave Cramer.

And then the EPUB 3 spec goes on to say that a Reading System may associate specialized behaviors with that syntax, and it looks like Apple has associated the pop-up functionality to the combination of epub:type="noteref" and epub:type="footnote" attribute/value pairs.

So, to make a pop-up footnote in EPUB 3 (which works in iBooks), you just have to create your footnote marker link as shown above, paying special care to include the epub:type="noteref" attribute/value pair. I'll repeat it here for good measure:

<a epub:type="noteref" href="#n1">1</a></p>

Next, create an aside element that contains the text that should appear in a pop-up display when the link is pressed.

The aside element must also have the epub:type="footnote" attribute/value pair to mark it as the footnote content as well as an id attribute that matches the value of the href attribute in your link.

<aside epub:type="footnote" id="n1">
<p>These have been corrected in this EPUB3 edition.</p>
</aside>

Note that the aside element, which is new to HTML5, is automatically hidden by iBooks. If you put your footnotes in, say, a div element, it would still pop-up when the link was pressed, but it would always be visible as a regular part of the text as well.

Another thing that I noticed is that you can enclose your a element in sup elements so that your footnote markers are raised with respect to the surrounding text, but make sure it's outside the a element or else it will break your pop-up footnote.

And that's it. Look! It works!

Here it is in a horizontally-oriented iBooks:



And here it is vertically:



Note that I completely disabled the CSS on this document, to be sure that the pop-up had nothing to do with any CSS effect.

And notice that the font in the pop-up changes to match the font chosen in the Font menu (here I've chosen Seravek):



Again, you can download this and other EPUB 3 examples from the EPUB 3 Samples site and view it in iBooks 2.1.1 (from April!). You can view this particular pop-up footnote on the third page of the Moby Dick book, called "Original Transcriber's Notes" in the table of contents (preface_001.xhtml). Thanks to Dave Cramer who coded the example (in January). And thanks to Apple for adding this functionality... and hinting that it existed so I could figure it out! I love, love, love that Apple totally followed the standard on this one: supporting symantically marked footnotes, and then "associating specialized behaviors" as the spec directs. No extra CSS or Javascript required. Well played, Apple.

OK, there are now two desktop EPUB 3 readers, and iBooks and the iBookstore have officially announced support as well. And there are pop-up footnotes. What are you waiting for to start creating EPUB 3 ebooks?

Customizing InDesign's EPUB files without cracking them open!

I'm working on my presentation about Enhanced EPUB for PePcon on Tuesday afternoon and I was playing with the newly released InDesign CS 6 to make sure that everything works as expected. But it didn't. For some reason, when you place an audio file, iBooks displays the controls so small that the only thing you can do is choose Airplay, but not the actual Play button (if you're on an Airplay network). It's pretty frustrating and would completely ruin InDesign's much improved multimedia function if not for one thing.

You can fix it without cracking the EPUB file open. One of InDesign CS 6's other new features is that you can choose additional CSS files to apply to your exported EPUB. All you have to do is create a CSS file that fixes the code that InDesign supplies, and voilà, the audio controls reappear. You don't have to unzip, or worse, rezip.

The key lies in the letter "C" of "CSS". It stands for Cascade. The Cascade means that when there are multiple sets of style rules for a given bit of text, there is a defined hierarchy for which rules will win out. I actually see it as a sort of waterfall in my head with the more “important” rules flowing over and covering the lesser ones.

To make the cascade work, you have to understand the slightly complicated topic of CSS inheritance: given two competing rules, which one wins? I talk about this in some detail in my HTML book. The very abbreviated answer is that you have to take into account specificity (that is #id overrules .class overrules p) and location (that is, inline overrides local overrides earlier, overrides imported), as well as taking into account the !important tag.

In our example, InDesign creates this code for audio elements. Note that this is the default size if you don't change the poster image for the audio element.

audio.frame-5 {
height:60px;
width:60px;
}

But when I open that document in iBooks on the iPad, this is what I see:



And when I click it, all I can select is which Airplay device I want. I can't actually play the audio.



So, I open a new text document. InDesign 6 lets me add additional CSS documents and will automatically load them after the CSS that it creates itself. That means that since my styles are later, as long as the specificity is the same, my styles will override InDesign's.

But if you look at the code above, notice that the selector that InDesign uses, audio.frame-5 has a class, and thus is more specific than a plain audio.

The answer lies in the HTML that InDesign creates. By default it generates an id element for each audio (and video) element that it creates, set to the filename. So, you can use that filename in the CSS to make your selector more specific, and thus override InDesign's CSS.

My audio file is called "bondia.mp3", and if you know CSS, you know there's a problem already. That period in the filename has special meaning in CSS (it means that what follows is a class name). Since we don't want that special meaning, we have to escape the period with a backslash:

audio#bondia\.mp3 {
height:26px;
width: 150px;
}

These values will now override the height and width values that InDesign generated. Save this text file as "extras.css"

How do I get them into my EPUB file? Go to Export in ID6, choose EPUB, click the Advanced panel, and then choose Add Style Sheet, then find your extras.css file. Export as usual.



If you looked inside your EPUB file (though you don't have to), you'll see this:



That's it! When you open your book in iBooks, you'll see that the audio controls are as you specified (and not as InDesign specified), even though you never had to deal with Terminal, never had to unzip or rezip or anything.



The best part about this is that you can use this technique to override any of the CSS that InDesign either creates in a way that you don't like or that it doesn't yet support. For example, suppose you want to add a border around a video. You can do that with an extras.css file. (Indeed, you can add borders to all of your videos just by using video as a selector instead of targeting just a single video.) Suppose you want to add media-queries so that your document will work as best as it can in different ereaders. Just put the media-queries in your extras.css file. The possibilities are really enormous.

Thanks to Adobe for incorporating this amazing new feature!!

Announcing and Denouncing Spanish Hate Speech towards Catalans

I came across a new Catalan website that has been documenting a very disturbing trend of Spanish hate speech towards Catalans. The site, Apuntem.cat (which means, We take note), retweets and records the hate speech so that people understand what Catalans have to deal with on a daily basis (and perhaps some of the reasons behind Catalonia's independence movement).

Honestly, I find Apuntem's Twitter stream really difficult to read. The people they retweet are really vile. But I agree with Apuntem's basic premise, that it's important to shine the light on them. Indeed, it seems that many of the posters have deleted their Tweets after Apuntem outed them, for shame or embarrassment, who can say.

Here's a sampling of commentaries from back in March about some kids in a school in a little town called Ripoll who sung the Portuguese song "Ai se eu te pego" in Catalan. You can find the original Spanish versions collected here.

"Infinite contempt upon hearing the kids singing Michel Teló's song... IN CATALAN #CastillianWhereAreYou"

"Disgusting kids... "renew, renew" over and over again, and on top of it all, in Catalan."

"Shameful those 6 year olds who were on channel 4, that at that young age, they're already speaking Catalan."

"They bring out some disgusting kids singing in Catalan... this is Spain for God's sake!"

"Catalans make me sick, children, parents, old people... all of them, hope they die."

"Those kids who came out to sing to Guardiola in Catalan should have been drowned upon birth. There would be less garbage."

"It's like a kick in the mouth hearing those kids sing in Catalan. That's what you get on sports channel 4."

"What a shame that they teach those kids to speak Catalan at such a young age. We're in Spain!"

---

That was about little kids. When they're talking about Pep Guardiola, FC Barcelona's coach for the last four years who just retired and who gave his farewell speech in Catalan, it gets worse. (Original Spanish hate tweets.)

"Pep, hope you get it in the ass, don't speak Catalan, you son of a bitch."

"What a fucking obsession with speaking Catalan, god damnit."

"Go ahead, speak in Catalan, but I'll shit and stomp on your ancestors Guardiola, die.

"Guardiola speaking in Catalan, he should be ashamed!!!! CLOWN! YOU'RE A CLOWN"

"Jail for Guardiola for speaking Catalan in stadium full of Spaniards."

"What a shithead disgusting Catalan!!! Speak in Spanish you fucker. #disgustingcatalans"

"Pep, speak in Spanish, you Catalan shithead."

"Son of a bitch Pep speaking in Catalan... Speak Spanish you asshole"

"What a lack of respect! Speaking in Catalan? And what about the people who don't understand it? That's his humbleness. Fucking Catalonia."

---

And it goes on and on. And I didn't even translate the ones that suggest bombing the Catalan football stadium. They should be ashamed. And everyone who lets such hate speech go by without reproach shares the blame.

Indeed, it seems that some are ashamed, and take down their tweets. They should never post them to begin with.

Readium displays Fixed Layout EPUB on desktop (compatible with iBooks too)

We have been waiting to view Fixed Layout on a desktop screen for a long time and the IDPF with its Fixed Layout spec and support for Readium has now made it possible. Just look at this!



First, I adapted my Fixed Layout example (from my original miniguide on the subject, which desperately needs updating now) so that it conformed with the new IDPF spec. This required:

In the content.opf file:

• Add version="3.0" to the package element.
• Add prefix="rendition: http://www.idpf.org/vocab/rendition/# to the package element as well.
• Add <meta property="dcterms:modified">2012-05-08</meta> to the package element. This is a great, new required element that hopefully will help with caching problems, among other things, as it's supposed to contain the last date the content was modified.



Still in the content.opf file, we get to the stuff that determines how the fixed layout book is displayed, the so-called "rendition" options. (Thankfully, the CIA is not involved.)

There are three principal rendition variables: layout (with values of pre-paginated or reflowable, that is whether you want it fixed or flowing), orientation (with values of landscape, portrait, auto, that is, whether a certain orientation should be forced), and spread (with values of none, landscape, portrait, both, auto, that is, whether the ereader should use facing pages—aka a synthetic spread—in given orientations).

I promise to explain these in more detail in the upcoming new edition of the Fixed Layout miniguide!



Here I've chosen the most basic fixed layout options: that it be fixed layout, that it can be viewed in either a horizontal or vertical orientation, and that it always be displayed with facing pages.

In the content itself (the XHTML):

The code is not very different. As with all EPUB3 documents, I've eliminated the DOCTYPE, made sure the xml declaration is present, and used a simpler character set declaration:



Last but not least, add the meta tag for the viewport, as usual:

The new TOC

Finally, you have to create on extra file, the new HTML TOC, or nav element. It's not much more than an ordered list, with each of the TOC items in its own list item, along with the all important nav element:

<nav xmlns:epub="http://www.idpf.org/2007/ops" epub:type="toc" id="toc">

Here's what my toc.xhtml file looks like:



And, of course, don't forget to declare the toc.xhtml file in the content.opf file:

<manifest>
...
<item id="toc" href="nav.xhtml" properties="nav" media-type="application/xhtml+xml"/>

And you're done!

Now, zip it up as usual, and run it by EpubCheck3.0b5 to make sure you did it all right.

Then, in Google Chrome (it won't work in other browsers), download the very latest version of Readium (released this morning!), it's 0.2.4, kindly fixed and uploaded by Matthew Robertson, and add your book to the library.



And voilà, you can see a fixed layout book on your desktop!!!



What, you say, you don't see facing pages? Click the facing pages button in the Readium pop-up menu that appears when you hover over the bottom-right corner of the screen.



And where are the embedded fonts? I'm not sure yet if that's a problem with this very new software, or if I haven't embedded them properly. It's definitely true that only OTF and WOFF fonts are supported in EPUB3, but I use WOFF in my example, so they *should* be showing.

Ah, but I hear a bigger worry... why should you go to all this trouble to create a format that only works with a fledgling ereader that no-one uses yet? And I could try to convince you about the importance of standards, but hopefully the following screenshot is more powerful: because the IDPF's EPUB 3 Fixed Layout spec works in iBooks!!! Apple and Barnes & Noble (and others) were involved with the IDPF in creating the Fixed Layout standard and Apple already supports it as you can see the same file showed here in iBooks:



This is a great development, and the IDPF should be commended. Hopefully there will soon be a time when we can create a single fixed layout EPUB file and it will work properly in all ereaders—Barnes & Noble also worked closely with the IDPF to develop this spec—and on the desktop. Even in Kindle.

The best way to help make this happen is to start using the new EPUB3 Fixed Layout format right now: create lots of examples, view them in Readium and help contribute to making Readium a more powerful ereader.

You can download my new EPUB3 FXL example here. Feel free to open it up and play with it. I'd love to see any examples you create!


Don't forget: subscribers receive all my blog posts via email, as well as other perks, and help to keep me writing. Thanks to all of you!