Hi everybody, welcome to WWDC. My name is Alan Cannistraro, I'm the engineering manager for iBooks. And today we're going to teach you how to make beautiful books using HTML5, CSS3 and EPUB. We're going to show you how to take your books far beyond what you can do in print and add features like audio and video. We'll talk about how to add animation. And at the end of the talk today, we're going to show you a feature that nobody has seen before with iBooks 1.3. Before we dive in, let me talk about books for a moment.

Books have been around for thousands of years. They were invented by the Romans. They are A record of our human history. They're a collection of all of our accumulated knowledge. A book can tell a story. It can take you to another world. Books have changed the course of history, politics and religion. A good book is engaging and hard to put down.

The last innovation with books was 650 years ago when Gutenberg invented the printing press and brought books to the masses. Well, in the last two years, we've seen something very new and that's the advent of digital books on devices like the iPad, the iPhone and the iPod Touch. Now, people can take thousands of books with them in their pocket or in their bags and they can read them anywhere they want to go. We're going to show you today how to make these books. So let's talk about digital books for a moment.

This is a graph of the digital book market over the last nine years. As you can see, digital books were around about nine years ago and even before, but it wasn't until the last year or two that we've actually started to see this take off. But in 2011, the digital book market is expected to grow to one billion dollars. Anyway, so... Thank you, thank you.

So, some of you are publishers here today and you're trying to figure out, well, how is this digital book revolution going to change your industry and how do you get into that? And we'll show you. And some of you are web developers that want to learn how to take your skills, which are completely valid in this new world, and how do you take a piece of this gigantic monetary action that's growing at a tremendous pace. And we'll show you how to make your books better than the rest. You've seen books that look like this.

These are text-centric books that flow from page to page. We're going to show you how to take text-centric books and make them look beautiful on the iPad, the iPhone and the iPod Touch inside of iBooks. We're going to show you how to add style and visual treatment, how to add audio and video and fonts to give your text some character. We'll show you some new features around this as well. But did you know that digital books can also look like this? Or like this. These are called fixed layout books and are new to iBooks.

With fixed layout books you can bleed from edge to edge. All the things that used to be only available in high quality color printing presses, you can now do inside of digital books. And we're going to show you how again today. And we'll show you how to go beyond just what you can do with print and make your books come alive.

So the first question I want to answer for you is why make a book? And the answer I have for you is content. You want to focus on content when you're creating a book, not code. And with iBooks, you have all kinds of beautiful stylizing options. Books are based on standard technologies. So what does that mean for you? Well, one, they're easy to create. There are lots of tools available. And they're based on top of WebKit. So all of the techniques that you've learned this week with WebKit can be taken over to books.

And because this is based on standards, your books when authored once for iBooks will also work in several other readers. Anyone can publish a book. There are, like I said, many tools available, but none required. And finally, one advantage of making a book over, say, a website, is that books can travel with your reader. They take it with them in their pocket, on their iPad, on their phones, and they can pick up anywhere they want. They can be on a bus, in a car, hopefully not driving, and they don't need an internet connection unlike a website.

So let's talk about iBooks. Most of you probably know iBooks is Apple's reader app. And it's the most fully featured digital book reader on the market. It allows you to have visually rich images and layout like the books that I just showed you images of. We of course give you the ability to add audio and video to your books.

And with iBooks, the store is just on the backside of the bookshelf. Your reader doesn't even have to leave the app in order to go buy your next best seller. So we'll teach you a few things today. Number one, how to build an EPUB. EPUB is the standard building block of books.

Number two, we'll talk about how to build flowing books. And flowing books are the text-centric books that I talked about earlier. We'll give you techniques for taking HTML and CSS and make them beautiful inside of iBooks. We'll show you how to enhance your books with audio and video and also how to include fonts so that you can give your text some character.

And we'll show you a feature called non-linear documents. Non-linear documents allow your readers to break out of the linearity of a book and give them content that's usually relegated to the appendix. We'll show you how to embed those in the book, give your users a way to get to that content and then quickly get back to where they were in their reading order.

Finally, we'll show you how to make a fixed layout book. The fixed layout book are the picture-heavy books that I showed you earlier. We'll show you how to use CSS to precisely place your elements on the page. And we'll show you how to go far beyond the print experience. To talk about EPUB, I want to introduce you Casey Dougherty from the iBookstore. Thanks, Al.

A little water to get me going. Hey everyone, I'm Casey. I'm on the iBookstore team. And today I'm going to teach you how you can make books for iBooks. Now, as Al said, EPUB is the building block for iBooks. So to teach you how to make a book, I'm going to start by teaching you EPUB.

I'll show you the contents of EPUB. I'll also show you how you can define a reading order and a table of contents for your EPUB. And then finally, we'll look at how you can customize the iBooks experience. An EPUB is web technology. In an EPUB you'll see HTML, CSS, XHTML and XML. In fact, you can think of an EPUB as a website that has been bundled together for distribution and given the extension of .epub.

In fact, if you look at an EPUB's file structure, it looks very much like a website. Inside the EPUB is an OEBPS folder and a meta-INF folder. The OEBPS folder is the open ebook packaging structure and it contains all of the content of your book. In this case, we're seeing web content, that's XHTML and CSS, that's the content of your book and the style for your book. There's also a lot of media, including images, video, audio and fonts.

And then in addition to this standard web content is also three EPUB specific XML files. This is the OPF file, the NCX file and the Apple Display Options file, which we've abbreviated as ADO here. Now the OPF and the NCX file are crucial to your EPUB structure. So I'm going to start by teaching you those.

The OPF file is the open packaging format file for your book and in it contains the metadata for your book, this is all the information about your book, a manifest that lists all of the files that make up your book, A spine, which defines the reading linear order of your book. And also the guide, which identifies the key files of your book. This is the key structure.

Now, metadata may not sound like much fun, but it's crucial in defining how your book looks on the iTunes and iBooks bookshelf. In this example of Harry and Horsey, you'll see that we have a cover for your book. There's also the title and there's the author of the book. And EPUB actually requires you to include three pieces of information in your book's metadata. And that's the title, A unique identifier for your book, which is usually the ISBN number, and also the language, in this case it's English.

In addition to this required metadata, I have also included the subject, which is the genre of the book, the creator, which is the author, and I've included a meta tag that defines the cover image for your book. And all of this metadata works together to define how your book looks on the iBooks bookshelf.

In addition to the metadata in the OPF, there's also the manifest. The manifest lists all of the documents that make up your book. So that's your NCX file, your content documents, all of your XHTML, your images and your CSS styling, everything that makes up your book is listed there.

In addition to the manifest, there's also the spine of your book. Now the spine of an EPUB works very much like the spine of a physical book in that it binds together your chapters into a linear reading order. So for this example, we actually have page one, page two, page three and page four, and we've made each of them a separate XHTML document. The spine only references XHTML documents because those are your content documents.

The metadata, the manifest and the spine are all required attributes of the OPF file. The guide is optional, but it's good practice. Because the guide identifies key files within your book. In the example here, you'll see that we've identified both the cover and there's also the type of text.

So no matter what our XHTML files might be named, we can tell iBooks, hey, cover.XHTML is the cover page of my book. And page1.XHTML is the start of the main text of my book. So type of text communicates this is the start of the content. It's probably equivalent to chapter one. And it means that anything before that was front matter, like a cover or a copyright.

So that's the OPF. Remember, metadata, manifest and spine are all required. The guide is optional but good practice. Next, I want to show you the NCX file. NCX is the Navigation Control XML and that's just fancy talk for a table of contents. This is a table of contents in iBooks. You can see that there's a listing of the different entries in the table of contents. And iBooks has actually assigned each of them a page number.

That page number is a dynamic number. iBooks is able to construct this table of contents based off of a NavMap XML structure. In that NavMap, you'll see that there's a series of nav points. Each of those nav points has a defined play order and that play order defines the ordering of that nav point in the books table of contents.

Within each nav point is a nav label. That's the text that's forward facing and is what the reader sees in the table of contents. And there's also a content source. That's the URL of where the reader will be taken when they select that item in the table of contents. For this example, for this nav map, iBooks will create a table of contents that looks like this. You'll see that there's two entries in there, our title page and chapter, and each of them have an assigned page number.

So that's the OPF in the NCX. There's a third XML file that I want to talk to you about today, and that's the Apple Display Options file. The ADO file lives in the MetaINF folder. It gives you, the developer, four customization methods, including fixed layout, zoom level, fonts and orientation lock. And each of these options can be defined either globally for all of the devices of iBooks or can be defined on a device-specific level. So let me show you the code to do that.

In the Apple Display Options file, you'll see that there's a platform name. If you wanted to find this globally, you'll want to give it a name of an asterisk. This will apply it to the iPad, the iPhone and the iPod Touch. However, there might be a time where you want one of those options to apply to just a specific type of device. So we also give you the ability to define it just for the iPad. Or you could set the value to iPhone, which applies it to both the iPhone and the iPod.

Next, I want to walk you through each of the display options. First is Fixed Layout. Fixed Layout is that highly designed book that Al was showing you, and he's going to tell you how to make one of those in just a few minutes. Second is Open to Spread. You can think of Open to Spread as like a zoom level for your book. So if you have a book where you want the reader's first experience to be a two-page spread, you'll want to set the Open to Spread to True.

Third, specified fonts. If the fonts in your book are critical to the book's experience, then you should include the Apple Display Option file of specified fonts and set it to true. And finally is Orientation Lock. iBooks displays your book great in both portrait and in landscape, but there might be a time where you have text that goes sideways or topsy-turvy on your book, and that would make the reader want to rotate the device in order to read that text better. So if you have a book like that, you will want to set the Orientation Lock to either landscape only or portrait only.

and that's Apple Display Options. It's a really great way of augmenting the reading experience, but it's only a small part of the total EPUB package. All good books need a great design. And so I'm going to show you a way today to design great flowing books. And Al is going to tell you how to design great fixed books.

First, I want to tell you about flowing books. You'll want to make a flowing book if you have a text heavy book like a novel, because flowing books give the user control over both the font face and the font size. As I told you earlier, a book is really just a web page. So this is how a book looks in Safari.

iBooks takes this long scrolling document and neatly divides it into individual pages. Now this helps your content look more like a book, but it's still missing that quality design of a novel. So today I'm going to give you some code and show you how you can easily turn this plain Jane book into a great design novel. I'm going to show you how to create stunning text, how you can embed fonts in your book, how you can incorporate auxiliary content in your book using an EPUB specific feature, and finally how you can enhance your books with audio and video.

The two most important things that you can do when creating a flowing book is one, Define your width and percentage, not pixels. And two, define your font size in ems. These two rules will ensure that your book flows and adapts so that it works well on any size device in any orientation. The example here is of a block quote. This is a very typical example of a block quote in an eBook. You can see that the block quote isn't taking use of its full page real estate there and it's off center.

But even worse is if you rotate the device and look at this in a smaller viewport or a smaller page, this block quote now is even, it's shoved off the edge of the book. There's actually text being clipped on the edge. And that's because this block quote was defined precisely using pixels. It has a set width of 350 pixels and it has a left margin of 50 pixels.

Fortunately, this is really easy to fix if you just follow our two rules. So change the font size to 1M, change the width to 90% and give it a left and a right margin of auto. The result's much better. Now you have a block quote that's taking full use of the page real estate and it stays centered.

And that's because by defining a width of 90%, you ensure that the width of your paragraph is 90% of the page width no matter what the size of device. Thanks. Okay, so with those two simple rules, we have a great structure for our book. Next, let's have some fun and add a bit of design and color and embellishments.

Styling books is actually quite simple because they're made up of a bundle of nearly identical content. That's because books are made of chapters and generally you want every chapter to have about the same design. And you can easily add that design without having to add a lot of extra HTML markup because you can use CSS pseudo classes and pseudo elements to select just the text that you want to add the style to dynamically.

You may already know of the CSS pseudo classes Active and Hover. Today, I'm going to tell you about the pseudo class, First of Type, and then we'll look at pseudo elements, First Line, First Letter and Before. First, I want to show you First of Type. Oh, and that's our Plain Jane book and we're turning it in as a reminder to this nice novel. So, first of type.

For each of these examples, we're going to reference a chapter class. And you can think of this as a container div for your entire chapter. And for first of type, we're going to use it to accomplish a very common design of a novel, where you want the text at the start of a chapter to start down a little bit on the page.

So in the chapter class, you want to identify the first paragraph within that class and give it a margin, a top margin of 20%. First of Type and top margin of 20% is added just to that first paragraph. None of the other paragraphs within that chapter are affected.

Another really good way of adding great style to your books is to create a drop cap for your books. So a drop cap is when you bump up the font size on just that first letter of a chapter. So today we're going to accomplish just that by using the pseudo element first letter. So just as in our previous example, you're going to go into the chapter class, identify the first paragraph of that class. And then this time we're going to drill a little deeper and select just that first letter.

We're going to bump up the font size to 6M, add a color of red and add a float of left. And that float is what makes it so that your paragraph text actually floats around the enlarged initial. And with that bit of code, we have a great looking drop cap in our book.

Another really common design element that I see in both physical and in eBooks is to bold just the first line of that first paragraph. Now usually when I see this in an eBook, it's been hard coded into the HTML and this means that there might be 10 words that are bolded, but however many it is, it's always the same number no matter what my device size, no matter what my font size. And that means that it's pretty much never just the first line that's bolded. This is really easy to fix using the pseudo-element first line.

So just as before, you're going to go into your chapter class and then you're going to identify the first paragraph and then you're going to stylize just the first line of that first paragraph and giving it a font weight of bold. And while it's just a minor adjustment in this keynote, let me tell you, it makes a big difference in a book. So, so far I've shown you how you can use pseudo classes and pseudo elements to actually stylize your content. Next, I want to show you how you can use a pseudo element to actually insert content into your book.

And this is accomplished using the CSS content declaration. Content can be used with either the pseudo elements before or after, and you can use it to insert text, images, or in this case, we're going to use the Unicode character for a star. And we're using it to add an embellishment into our book.

So for this example, we're adding the Unicode character of a star, making it red and giving a font size of 2M. We want the star to be a little bit bigger. And because our chapter header up there is still looking pretty plain, let's go in and stylize our H1 header.

We're going to make it red. We're on the iPad after all. You should use some color. And we're going to increase the font size to 3M and set a text transform to make it all uppercase. And with that little bit of code, we have our final great novel design.

So another really great way to do this is to use the Unicode text transform. And it's a really great way of adding style and adding character to your books as fonts. And iBooks makes it super easy to include fonts in your books because there's over 60 font families available on iOS for you to choose from.

If you need to, you can also embed fonts in your book. And then, iBooks supports both OpenType and TrueType fonts. Also, if needed, you can use something called font mangling. Font mangling is a method of font encryption that's available in EPUB. And finally, I do want to remind you that like all media types, audio, video and images, you should verify your font rights before you embed them. Okay, so let's look at fonts in iBooks. Let me show you how to include it.

It's super easy. A little bit of code because it's all standard CSS. In this example, we're calling on a system font, Heffler text. All you need to do is include the font family with the font name you want to use. If you want to embed a font, you want to use this same bit of code, but you're also going to include the font face at rule. In the font face at rule, you're going to include the font family name and the source URL for where that font file is located in your EPUB bundle.

I really encourage you to use fonts in your books because as you can see, you can create some really great handwritten notes. It adds a lot of character to your books. But I know that I've also told you that one of the great things about flowing EPUBs is that it gives the user control to change those fonts. And it's true.

The users can change the fonts in iBooks, but iBooks also gives you, the developer, the ability to say, "Hey, these fonts are critical to the look of my book and I want you, iBooks, to respect them." So all you have to do is include the Apple Display option of specified fonts and set it to true.

And not only will iBooks respect your fonts, but it provides your original fonts as a font option in the main iBooks font menu. This means that the user can easily change to Palatino or change to Georgia but they can just as easily change back to your original fonts. Okay, so we've added some great structure and color, embellishments and fonts. Let's now enhance our book. Let's add content to the book.

And these are EPUBs. These are ebooks after all. We can break out of the physical book metaphor and go beyond. One really great method to push the book is utilizing nonlinear documents. Nonlinear documents are part of the EPUB spec and it's a method for you to embed supplementary content in your book.

It's great for embedding PDFs, charts, quiz answers, because the reader can never flip a page to access this content. You, the developer, need to provide a link for them to get there. And when that link is included, when that link is triggered, iBooks will open this nonlinear document into a new web view that overlays your book.

This web view contains an HTML content in your book. That means all of the text in there is searchable, selectable. This is an HTML made chart. And And because it's not subject to the paginated environment of iBooks, that content can be panned and zoomed in and it maintains its formatting. So let me show you how to make one of these.

Here is our code with our chart. So this is an image of our chart in line between our paragraphs. You're going to add an anchor tag that points to the new nonlinear document. So in this case we're calling it chart.xhtml. So now you need to make that new nonlinear document.

Here's our new document. We've put in a table there to represent our chart. But because you're making a new content document, you must also include that content document in the spine. So this is the spine. We're adding a new item called chart. And the magic there is in gold. And that's the linear attribute. And we've set it to no.

This is what tells iBooks, hey, a reader should never be able to flip to get to this document. And if this document is reached by through a link that you have provided, iBooks should open it in a new web view. So let's run through this one more time. There's our book, an image of our chart. That chart is linked to a nonlinear document. So when that chart is selected, it opens into a new web view where the reader can pan and zoom in.

Non-linear documents are really useful. I think once you start playing with them, you'll actually find a lot of uses for them and they're a really great way of enhancing your book. One other really good way of enhancing your book is to embed audio and video and iBooks makes this really easy because it's all standard HTML. You're going to use the HTML5 video and audio elements. I want to walk through them here really quickly.

You can see that they're very similar to each other. They both contain a source URL that points to the media within your EPUB bundle. They both also contain the controls attribute. This is the default controls but you do need to provide it because this is what allows your user to scrub, play and pause your media. The video element is unique because it contains a poster image.

That poster image is the image that displays in line in your paragraphs. In this case, you can see it's of a cat. Its purpose is to entice the reader to want to play your video. This is an excellent choice because we all know everyone likes watching videos of cats.

And optionally, you can also include the dimensions. You don't need to include dimensions. iBooks has default. iBooks will also ensure that your video never flows over the side of a page. The audio and video elements are a really good example of how HTML, when paired with EPUB and CSS, really are the embodiment and power of web technology in the flowing book. But even more impressive is the sheer precision that's possible with web technology in the fixed book. And here's Al to teach you how to make a fixed layout book. Thank you.

Thank you, Casey. So everybody ready to see the new hotness? Okay, so let me, let me, uh, thank you, thank you. Um, when the IDPF came up with EPUB, they had a great insight. And that's that digital books need to work on different sized devices with different screen sizes.

And so they needed to flow from page to page differently on every device. But what they forgot is that sometimes layout is important. Sometimes layout is crucial to your book. So we had a little innovation back last year, late last year, and we added something called fixed layout to iBooks. And fixed layout is a standard EPUB. It's the same EPUB that Casey just taught you how to make, but we've added a few things to respect your layouts. So let's look at that.

Once again, fixed layouts. We respect your precise layouts as a publisher. You can place your elements anywhere you want on the page. You can bleed them edge to edge. And you can even place them on top of each other and have text over images. The example you see here is from a book called "Five Good Reasons to Punch a Dolphin in the Mouth." So anyway, as you can see with this book, the positioning of the elements is crucial. So we'll show you a few things today. One, how to set up your book. Two, how to lay out the elements on your pages. Three, how to prepare your images that go in your EPUB bundle. And four, how to enhance your books so that they come alive.

As I mentioned, fixed books are the same EPUB format as flowing books. There are three additions that you need to respect. One. You need one XHTML document per page in your book. Two, you must specify the viewport dimensions for each page. And three, you need to set the Apple display option of fixed layout to true. Now let's go through each of these last three points in detail. Here's an example of a book called Pete the Cat.

As you can see, it's beautiful. The images spread across the middle. This is actually two different pages. Two different XHTML documents. You can point to the same image. There are reasons why you may want to do that and reasons why you may not. We'll talk about images in a moment. The takeaway here, that's two pages.

Second, you need to specify the viewport dimensions for your book. Your users are able to zoom in and out of the content on the page. Not only that, but your book might be viewed on an iPad, it might be viewed on an iPhone or an iPod Touch, so the screen size changes. The viewport allows iBooks to know what the aspect ratio of the pages are that you intend for your pages.

Your viewport dimensions should correspond to your body dimensions. And we'll talk about the CSS in a moment, but keep that in mind. And you must specify your viewport dimensions in every content document in your book. Here's an example of the code. To set your viewport. This is the head of your HTML. It includes things like the title. It also includes the last element in here, which is a meta tag called viewport with a content set with a width of 800 and a height of 600. Remember those numbers, we're going to come back to them.

The last thing you need to do so that your book will be recognized as a fixed layout book is to set the fixed layout option to true in your Apple Display options. That's the key so that iBooks needs to know how to open your book. And remember, as Casey mentioned, you can specify the platform name to iPad or iPhone, or iPhone is both. In this case, we specified Star, which means we want it to be fixed layout on all three platforms, all three devices.

All right, now let's look at how to layout your pages. I mentioned setting viewport dimensions, but you also, in order to get absolute positioning, you need to specify your body dimensions for your CSS. We recommend that you match them to your viewport dimensions. Once you've specified your body dimensions, you can then work in pixel and position elements anywhere you want. You can use absolute or relative positioning. Relative positioning allows you to move your elements based on where they would be from their default position. And absolute positioning allows you to specify element position with respect to the container in which those elements live.

So let's take an example. This is a page from a beautiful fixed layout book. As you can see it has a full background image and it has some text that's slightly tilted in the top left corner. Let's break this down and see how it's built. First, the HTML.

Here it is. Pretty simple. Our body has one div. Its class is page 4. Inside that there's an image element and there are four lines of text. All the text is wrapped in a paragraph tag and then the second and third line are wrapped in a span with a class of P2. The fourth line is wrapped in a span with a class of P3. That's the HTML required to make this page. Simple. Let's look at the CSS that's required to position these elements.

So, our body has a width and height of 800. As I mentioned before, this should match your viewport dimensions. What we've added here is a border, a thin solid yellow line. Now that's for you, the developer, so that you can tell what your borders are as you're positioning your elements. Don't forget, if you use this technique, remove it before you ship or else all your pages will have thin yellow borders.

And we've specified a margin of zero. I told you that iBooks is based on WebKit and it is. This is a web view. By setting a margin to zero, you can go edge to edge. Next, the CSS for the image. We've specified a position of absolute and we've specified a z-index of zero. The z-index will make sure that your image appears behind the text and it allows your user to a see the text and b select the text.

And there's the CSS for our paragraph tag down at the bottom. We've set the position to relative and we'll show you how that allows us to do the indentation and a margin of zero as well. So here's the CSS for the text. All the text, everything wrapped in that paragraph tag is a font of blackout midnight set to 30 pixels, a color of blue. And the text is positioned 70 pixels from the top, sorry 75, and 60 pixels from the left. We've also given the text a 10 degree rotation using a CSS transform.

Next, in order to get the indentation that we see in the text, our P2 class has CSS specified with a padding left of 60 pixels. Pretty simple, right? P3 set to a padding left of 30 pixels. So that's how we get that little kind of stair-step-bowl pattern. All right, so that's it. That's how you lay out your elements on your page, HTML and CSS. Now let's talk about what you need to do in order to... Well, that's the page.

Beautiful. Now let's talk about what you have to do with your images. So I mentioned that your users can zoom into your pages, right? Because we're rendering this as HTML, your text will be crisp, but you also want your images to be crisp. So we recommend that you provide images that are one and a half times the CSS size. In the 800 by 600 example that we give you, that's images that are 1200 by 900.

And the CSS will properly shrink the image down to fit. Your images can be up to 2 megapixels in size. So in the 4x3 example that we've been going through, that means your images can go up to 1600x1200. So if your user zooms in to twice your viewport size, you're still crisp.

You can use JPEGs. JPEGs will be fast and small so your book will download faster. But if you need transparency in your images, you can also use Pings. And we want you to use alt tags. Alt tags will allow your images to be read to users that are using the screen reader. If they have voiceover turned on, you want your images to be read. And remember, if your image is worth a thousand words, your alt tag better be more than one.

So, we've shown you how to set up, layout and prepare your images for a fixed layout book. Now we're going to enhance the same techniques that Casey showed you for embedding audio and video in a flowing book, Work in Fixed Layout. It's all HTML5. With fixed layout books, you can also add SVG. So if you want more advanced graphics, you want vector graphics, that will be positioned properly and it'll look right. When the user zooms in, it'll still be crisp.

You can also do curved text graphics. In this example of Splat the Cat, notice the "aw" and the "hooray" all follow a curved text path. That's done with SVG. And another thing you can do is CSS animations. So because WebKit is driving all of this, the same CSS animations that you can use in Safari also work in books. So we're excited to see what you can make with these things.

So let's do a little summary and then I'm going to take you through some new stuff. First, fixed layout books are EPUBs. They're the same standard EPUBs that you use for flowing books with three additions. One, you've got to specify the Apple display option. Two, you must specify your viewport dimension on every page.

And three, you must have a different XHTML document per page. If you meet those three things, you have a fixed layout book. There are some image requirements that we talked about. Provide images that are 1.5 times the CSS size, up to 2 megapixels. And now that you have a fixed layout book, then we open you up to a whole world of possibilities.

So today I want to talk to you about iBooks 1.3. iBooks 1.3 shipped yesterday, it was announced yesterday. It added some new features, one of which was the ability that we can now break tables out of the book and show them in the non-linear UI that Casey talked to you about.

So that's pretty cool. We've also made things a lot faster. For those of you who have given us some challenging table of contents and books with tons and tons of images, those are way faster, exceedingly fast. But iBooks 1.3 also added something new, and that's called Read Aloud.

And I am excited to be the first to show you this feature today. Read Aloud allows you to include a narration track that goes with your book. The narration track can be synced to the text in your book. And when the reader starts things going, the pages can turn in time with the narration.

As each word is read by the narrator, it'll light up on the page. Imagine a child picking up an iPad, wanting to hear a story. And by starting things going, the book reads to him. That's what we've announced today, that's what we're introducing today with iBooks One 3 and Read Aloud. And I'm excited. Thank you.

And I'm thrilled to be the first to demo that feature to you right now. Alright, so here's my iPad. I have iBooks in the dock. I'm going to tap on it and open it up. And this is my bookshelf. As you can see, I don't read very advanced books. I'm going to tap on "Whose Hat Is It?" in the top left corner.

And it opens up. This is a fixed layout book. I'm going to hide the UI and you can see I can turn each page. And the page tracks with my finger and turns beautifully. I'll turn another here, grab the corner, flip the page. Now we have some words on the page. With iBooks 1.3 and Read Aloud, we've added the ability to read this text to you. I'm going to tap on the book to bring up the controls. In the top right corner you'll see a speaker icon. Let's tap on that and bring up the menu.

All right, so there are three options in this menu. The first is volume control. I don't think I need to say too much about volume control. The second is an option called turn pages. Now, turn pages allows you to change how the user, the reader interacts with the book. You can either, let's tap on that and take a look. You can either have the book turn pages automatically for you or manually. Let's set it to manually.

If Turn Pages is set to manually, the narrator will read until the end of the spread and then iBooks will give you a hint that it's time to turn the page. So let's start reading and see what happens. I'm going to press the big blue start reading button and let it go. "Wow! Someone's hat was blown off by the wind!" Turtle said.

You noticed, as each word was read, it lit up in blue. Imagine a child reading along. This will help them learn to read. The bottom corner of the page is turned up to tell us that it's time to turn the page. So let's turn the page now. When I let go, the narration will continue. Whose hat is it? Let's go one more.

Is it your hat, Mouse? So let's go back into the options. I'm going to tap on the book, pull down the speaker menu and let's set it to automatically. Now what's going to happen, as the narrator reads the book, the pages will turn automatically and we won't miss a beat. Let's start reading now. Is it your hat, Mouse? "It is not mine," Mouse said. "Is it your hat, Rabbit?" "It is not mine," Rabbit said. So that is iBooks 1.3 with Read Aloud.

I think this should... What's that? Whose hat is it? Yeah, you have to wait till the end. I think this is going to do to bedtime stories what the DVD player did to babysitting for you parents out there. So, alright, so without further ado, I'm going to bring Casey back up here to show you how to make a read aloud book.

Thanks Al. Oh man, I am so excited to get to show you guys today how to make read aloud books. I think it's really special to be able to give to WWDC the first teaching I've done of this. So, read aloud books can entirely change the way that a kid experiences a book and we make it really easy for you to be able to give them that experience. All you need is a fixed layout book and a narration file.

I'm going to show you today how, go through the slides here, how you can create media overlays. This is the method of syncing your audio with your text. Then I'll show you how you can actually style that actively playing word using CSS. And finally, I'll show you how you can even include an ambient soundtrack in your book.

Media overlays are the EPUB3 standard for syncing audio and text. And as far as I know, we're the first ones to do it. To create a media overlay, you're going to want to identify the text in your HTML. You're also going to want to identify the audio that correlates to that text. And then finally, you need a method to pair those up. So let me first show you how you can identify the HTML text.

It's standard HTML. You're just going to include an ID. Now the granularity for this is up to you. So you can add an ID for every word or you can add an ID for a sentence. Entirely up to you. So now we have our text identified. Next, let's look at how you can identify the corresponding audio.

I suggest that you use an audio editing program like Audacity. I'm suggesting Audacity because it's free, it's cross-platform and it allows you to not only identify the start and the end times but also add a label for those and export it to a text document, which will make it easier for you to include that text into your media overlay file. So, we have our text and we have our audio, now we just need a method to pair the two up. That is called SMILE.

SMILE is the synchronized multimedia integration language. It's just an XML file that's used to pair text and audio and it's located in the OEBPS folder. Now I know it's been a while since we've gone through the file structure of an EPUB, so I'll take you back to that beautiful slide there.

You can see that the OEBPS folder is the folder that we're going to use to create our text. The OEBPS folder is the folder that contains all of our book's content. And now, in addition to our two EPUB XML files, the OPF and the NCX, we're going to add SMILE files.

Because you're making a new document, you need to include all of the smile files in the book's manifest. So here's an example of a manifest for page one. You'll see that there's page1.smile, this is our new smile document. There's also page1.m4a, which is the narration file. And there's page1.xhtml. Now we've added something new to that xhtml.

There's the media overlay attribute and this acts as a cross reference so that reading systems know that the page1 smile goes with the page1.xhtml. And that's all you need to create a read aloud book. With the addition of the smile files, iBooks will sync your audio and your text and will provide a default blue highlight color so that as those words are read aloud, the words will highlight blue.

Now iBooks wants to give you guys a way to go even above and beyond that. So I'm going to show you how you can add your own style to those currently playing words and how you can include a soundtrack in your book. First, I'm going to show you how to add the style. It's easy. It's CSS. You're going to include the CSS class -epubmedia-overlay-active.

The app will style the currently playing word. It accepts all standard CSS styling, including color and text shadow. But do remember that the style for it is dependent on the granularity of your HTML text IDs. So that means if you've given an ID to each word in a sentence, each ID will light up as the word is read aloud.

However, if you put a granularity of an ID per sentence level, that means the whole sentence will light up while any word within it is read aloud. So for the example here, we've put the class of "EPUB Media Overlay Active" made it red. And that just means that as those words are read aloud, they'll turn red.

Next, I want to show you how you can include an ambient soundtrack in your book. Again, we're making this as easy as possible because we're using the HTML audio element. And to still be cross-platform, we are making this EPUB3 compliant by adding the EPUB type attribute of iBooks soundtrack. So, if you include this audio element in every one of your content documents, all of your XHTML, iBooks will know to play this audio track seamlessly across each page of your book.

It's a really great way of adding some ambiance and some style to your book and it's completely independent of the smile, of the read aloud because it has no timestamps associated with it. So that's it. Next, iBooks Read Aloud. It's EPUB3 compliant media overlays. It allows you to style the word highlights as you want to and you can even include a soundtrack. I'm really looking forward to seeing the content that you guys are going to make because we've really opened the door for a lot of creativity. And here's Al to wrap it up.

All right, thank you Casey. So just to wrap things up, you know, the three things, a few things you learned today. One, anyone can publish a book. So I expect all of you to go out and make something and take a piece of that billion dollars. Two, it's all based on standard technologies, HTML, CSS, EPUB. Powerful and easy.

You can make flowing and fixed layout books and you can enhance them with audio, video, non-linear content and now with iBooks 1.3, read aloud. Thank you very much. I just want to give you a little more information. You can contact Vicki Murley, who's our evangelist, at the following email address. You can contact the iBookstore at [email protected]. If you want more information about how to sign up to sell your books online, go to itunes.com/sellyourbooks. And for more documentation on the EPUB spec, you can go to idpf.org/epub.

There are some related sessions. One occurred yesterday, so go get the videos. That's the HTML5 media controllers. There's a great one coming up on CSS effects and animation today at 4:30. And a couple more tomorrow. One tomorrow, one today. Thank you very much for coming. Have a great WWDC.