In the last two posts of this series, I covered how to set up a fixed format ebook and how to add images to a fixed format ebook. In this post I’ll cover how to place text on specific parts of a fixed format ebook’s “page,” which includes placing text on top of the image.
First, you’ll want to open up your stylesheet (CSS) in Sigil, and add code for each page of your book. This sounds like a lot, but luckily a standard children’s book is 32 pages, so it’s not too bad. Having each line of text on each page in its own class in the CSS stylesheet will let you decide where exactly on the page the text will appear, so that it can be readable on top of the image.
The image above shows page 1 and page 2 of the book. Here is what the CSS code looks like for those two pages:
Basically, I created rules for where the text should go. On page 2, for example, I made the top margin large enough so the text would appear in a fairly plain part of the image, to make it easy to read. I also gave it some space in the left and right margins. I also changed the color on page 2 slightly, to a lighter brown/yellow. The reason you don’t see code for the color on page 1 is because I set that as the default color for all text in the <p> tag.
Now all you have to do is add this style rule to the HTML page. Here is what the code view of page 2 in Sigil looks like:
Once you add this code, your ebook will look a lot like the first image in this post. Congrats, the main parts to create a fixed format ebook are done!
In the next post of this series, I’ll go over how to embed fonts. Tip: you can also embed fonts in reflowable ebooks (ebooks for novels, nonfiction, and basically any type of book that’s not a picture/illustrated book).
