- Once you have all your text assembled and your images exported, created, and named it's time to fill in the template, plug in all the pieces. This is just housekeeping work making sure everything is neat and orderly. Now we're going to start working in the content.opf. And if you remember from a previous video the content.opf, this is our complete file, this is our picture book, and the content.opf is the housekeeping, it's the brains of the operation. So I'm going to open that Dreamweaver, and detach it from the workspace, because we don't really need any of those tools, and minimize that.
And now we can get this nice and big and read it. Now, as I said in a previous video, the first few lines are in every eBook you're ever going to see, so you only need to deal with them once. You put them in your first template and you leave them there forever, until they change. But that's a very incremental, very slow moving kind of change. Now the next lines, the Kindle-specific Fixed Layout, coming down through here have to precisely with the book that we're working on. Now before we get going with that I just want to reiterate that all of these grey areas are comments and throughout the template I've left a lot of comments saying this is this and this is that and this is how you do that, so whenever you see these grey areas it's just for information, they do not have anything to do with the actual operation of the file.
So starting with line 8 here we're going to run through this quickly. Pre-paginated means that it's a fixed layout book, that's just the term for fixed layout. Original-resolution 1080x540, and those figures are in pixels, it's 1080 pixels by 540 pixels, and that's the size of the book that we started out with. The Little Red Hen was 1080 pixels by 540 pixels tall. And we're working in landscape orientation. You could also work in portrait orientation, or you can put it into auto, in which case as the user moves the device around the orientation of the page will move as well.
I recommend keeping it on landscape for books that you're creating as spreads, especially for children's picture books where usually the whole spread is very important to keep together. RegionMagnification, you know those text popups, is true, of course. Primary-writing-mode in horizontal, left to right, right here. There are other writing modes. I think there are Hebrew, there's Japaneses, I think there's Chinese as well, so you can do some research in Kindle guidelines and find that. Now this next one is a matter of some conversation in the fixed layout for Kindle world, book-type, children.
One advantage of making eBooks is that the text is live, that it's searchable, it's definable, you can make notes sometimes, depending on the device you're using, you can activate text to speech, so the device will read the book aloud to you. The funny thing is when you use book-type, children none of that is enabled. You'll have live type, because we're going to be putting live type into the HTML documents and the type will actually be there, it won't be an image, it'll be actual type, but it will not be searchable, it will not be available to any of those accessibility features.
Why Amazon has put out a product aimed at children where you cannot enable text to speech, for example, is sort of an odd question. However, one way around this is you can say book-type equals none, or just leave this book-type out all together. It does not disable any of the fixed layout features, it does not disable magnification, it does not disable the popup, but it does leave text to be live. However, because Amazon recommends that you say children I'm going to leave that here in this case.
It's up to you, as the person building and or selling the file which content you want to use, children, none, the other option is comic and that's for comic books, and that's a whole different kettle of fish as far as file building and magnification and not really the subject of this video. So we move down to specifics about the book that really these kind of things appear in every eBook. The Dublin Core is a set of metadata that gives you specifics about the book that you're inside, like the title, the creator author, the creator illustrator, the publisher, the rights, who has the rights, what's the copyright, the language, the date of creation, when you modified it last, and it's important to keep that modified line up to date as you move through the production process, because if you're moving this book onto and off of Kindle Fire as you're doing quality assurance, if you change the modification date in here just a little bit, you can change this from 09 to 08, that'll present a whole new file to your Kindle Fire when you're side-loading it into there.
If you keep it on 09 then it might think that even though you've done massive changes inside if this modification date stays the same the Fire might not really recognize it and you'll spend a lot of time side-loading it and reside-loading it and seeing the book without your changes made and going crazy. So the easy way around that is to change this modification date. Any of these numbers in here can be changed. They don't really mean anything in the larger scheme of things, but they're a handy way to change the internal properties of the book. Now we move down to the manifest and the manifest, if you remember for the earlier video, lists every item that's in the book.
It lists every HTML document, it lists every image, it lists every navigation document, it lists the CSS style sheets, every item that's in the book is listed in the manifest. And every item has a unique identifier, id=cover, id=ncx, id=stylesheet. As I said, these ids must be unique, you can never use page01 twice. Because if you do and you try to create the Kindle book using Kindle Previewer or Kindle Gen you'll get an error message saying ids are duplicated and please fix.
So the beauty of the (mumbling) approach here is that these things are written once and you never really had to write them again. At some point you might add pages if you have this template set for 32 pages you might have a 48 page book, you might have a 64 page book, in which case you'll have to add pages, but just make sure that every id you have is always unique. The book that we're working on now has the first few pages set up already and what we're going to be doing is adding page06 and page08, and we're going to be population the text, add images, doing some styling work, and doing other work in them.
So what I want to do here is move this comment, see this comment begins up here and ends down here and everything in between up here and down here is invisible to the operating system, to the reading system. So if we want to make page06 visible and page08 visible we simply take this, cut it, command X, control X, put our cursor here, put in a couple lines, move the cursor up, and paste that same line.
Now 06 and 08 are available, they're as active as 01, 02, and 04, but the rest of the pages are not. So we can just bring those up, so they're nice and tidy and inline. Now the fonts we'll discuss in another video, but if you remember from our early discussion of the content.opf and generic names I always name my Roman typefaces roman, display typefaces display, if I have bold or italic I name them bold or italic. And in here is where I put the name of the font.
This is one of the two places where the font's name is placed, it's here and in the CSS itself. But whenever I call for that particular font, whenever I call for JosefinSlab-SemiBold, in this case I'm calling that roman, anytime I need to use that font in the CSS I'll just write in roman and it'll pick that up. Now in here I put the font license. This I obtained when I downloaded the font from Google Fonts, it's in the package that you can download. And I put it here and I also put it on the copyright page, just so it's visible to the reader.
Because in this case it gives the name of the font designer and I sort of think it's nice to recognize the font designer on the copyright page. And we'll be working on that copyright page in another video. Now down here is images, again, keeping with the unique ids. Image01, 03, 04, 05. These cheep guys are part of an earlier page that we'll get to in a later video, they're not part of the template, but they will be added when we add those actual images. But 01, 03, 04, 05 are all part of the pages that we already have been working on.
And again, here we have all the other images that are possible for the book commented out. So what I'm going to do to activate 0607, 0809 is move my comment selection beginning, add a couple of lines, paste that comment in there, let's take out a couple of lines in here. And now 0607, and 0809 are available to be used by the reading system. And that's the close of the manifest.
And you can see here we have 32 pages of images, or 32 images, just as we had 32 pages of HTML documents up there. So we have an image for every page. And those are all the background images that are used on the background of each page, they're not selectable, they're not interactive at all, they just sit on the background and the live text sits on top of them. Now down here in the spine, if you remember the spine lists the play order of all the HTML documents, so we already have 01, 02, and 04 in there, because those are already placed in the book and we're putting 06 and 07 in here now, so basically I just take that and Copy, change 04 to 06, because I know that I always name pages consecutively and I know that I'm adding pages 06 and 08 now, so I don't even need to go back up and see what the id is, I know that it's 06 and 08.
And that's pretty much it for maintaining the content.opf. A lot of the stuff at top stays the same, except for the resolution, depending on your original source document, whatever the book is that you're working from. And we'll talk more about the aspect ratio and the actual book size when we talk about images later in the course. Most other stuff stays as is and then you put in the specific book title, author, illustrator, publisher, copyright notice, and then down here is just a matter of housekeeping.
You select this, you move this into the comment area, you move it out of the comment area. So once this is done it's time to move onto the populating the HTML and working on the CSS. And remember, any time you add anything, and for example, these cheep01, cheep02, and this curve, these are added at some point later on in the video, anytime you add anything it has to be put into the content.opf. I have these here now just as an early reminder that as they're getting added they have to be added to the content.opf, otherwise the reading system won't really know that they're there and won't know what to do with them, won't know what they are, because here it is telling them what they are, they're images and they're jpegs.
So if you have them in the package and they're not called out here in the content.opf the device won't know what to do with it. So now it's onto populating the HTML.
- What is a fixed-layout ebook?
- Good candidates for fixed layout
- Comparing the Kindle format to EPUB3
- Managing fonts
- Inserting images
- Using the Kindle Previewer
- Exporting InDesign documents for Kindle formatting
- Working with the Kindle fixed-layout template
- Using media queries