What's inside a fixed-layout EPUB?

- [Instructor] What makes a fixed-layout EPUB work? What exactly is happening inside, that it doesn't reflow like a regular webpage, like a regular EPUB? Let's take a look inside. I have one of the EPUBS that we'll be working with in this chapter open in iBooks. This is a fixed-layout kids' book called The Little Red. You can see there's a picture on the left, the folios on the bottom, the text on the right. It is live text, it's not a picture, but we're getting this weird selection, which you'll see why in a minute.

And we can go on to other pages, and you'll see that the text just stays where it is. If I resize, we might get some redraw issues, but the text doesn't reflow, it can't reflow. All it can do is get larger and smaller. Alright, so let's jump into the Finder, and I'll hide the other programs. And inside here is The Little Red Hen EPUB, and I've already cracked it open and expanded it for those of you who didn't want to bother with downloading the friendly eCanCrusher app that I talked about earlier.

But, I'll show you what I did. I'm going to just drag this guy, for now, onto the desktop. And on the desktop, I just drag it on to eCanCrusher, which immediately expands it into a folder. And then, if I wanted to, by the way, I could edit the content of this. Edit some of the text in the XHTML files, and then I could take this folder and drag it on top of the eCanCrusher app to recompress it into a new version of the EPUB. Kind of cool. Anyway, so I've opened this up, and you might say, "Whoa, look at all those XHTML files." And, usually, you just get one XHTML file for every chapter in a reflowable EPUB.

And this kids' book has no chapters, but we're getting all these different XHTML files. Why is that? That's because every single page of a fixed-layout EPUB is a stand-alone XHTML file, with all the items on there absolutely positioned. That's what maintains their distance from each other, and their distance from the top, and right, and bottom margins. Let's take a look at one of these. Let's find one that has some text.

Let's try this guy. And I'll choose open with Google Chrome. Oh, okay, so there's a pig, and there's this. And then, if we look at the... Go to View, Developer, View Source, look at all of this that was made to do that very simple page of the cute drawing of the pig and the little blurb of text below it. This, I can tell immediately, was exported from Adobe InDesign. Because this is how Adobe InDesign handles individual words. We'll look at that in a minute.

But, up here, under image, page number, JPEG, right here, that is the picture of the pig. Oh, sorry, excuse me, no, that's the picture of the little chickadee at the bottom. Alright, let's go back, here. The picture of the pig is elsewhere here. But if you look for .jpg and .png, you can find out where those are. And then, here we see, "As for the pig, who in the sty - he did not," and so on, why do you see all this markup? That's because Adobe is taking every single word and saying, "This word is positioned absolutely," meaning it doesn't reflow.

From the top of the page, it is 5500 pixels. From the left of the page, it's 1444.77 pixels. And then it gets a special class, an ID. That's a lot of markup. That means that these files are really difficult to edit, but that's really not our concern, is it? We just want InDesign to export to a fixed-layout EPUB that's valid. And, we'll check this validation in a second. The reason that InDesign's doing this is because they want to exactly replicate where the words are in the layout.

And so, that's where the words are in the layout. This is the exact spacing that it would be in InDesign or in a PDF. And that's why when you swipe over some text, you'll see these spaces in between, because we're actually swiping over separate objects. Now, not every program does this. There are other programs that can export to fixed-layout. Like, QuarkXPress can export to fixed-layout, and some other ones. And they might just specify individual lines in an absolute measure, or entire paragraphs as an absolute measure from top to bottom, and left to right.

And the text itself, inside, might reflow a little bit, or have different spacing than the original one. But Adobe decided if it's fully-justified in the layout, it's going to be fully-justified in the fixed-layout EPUB. But the main thing that we're concerned with, here, is that, like a reflowable EPUB, it still has the same control files, it still has the content, that OPF file, that governs everything, it's like the bill of lading, the manifest for everything that's in this EPUB.

CSS, fonts, and images are still in their own folders. But every single page of the EPUB gets split into its own separate stand-alone XHTML file, and that is how these fixed-layout EPUBs work their magic.