In the first post we looked at the programs used in the conversion of Creating Flow with OmniFocus to the ePub format. Now we’ll look at adjusting colors, headings and page breaks, dealing with the Table of Contents, and creating links.
Headings and Page Breaks
One of the first hair-pullers of the conversion process was trying to set page breaks. One would ideally like to have each chapter begin fresh with a page break. Even if I had specifically inserted page breaks or section breaks in Pages, this did not consistently get translated to the ePub version. Doing some research online, I had discovered various code to insert in the html to get it to work. But even these did not consistently work.
Opening the ePub file exported from Pages in Sigil showed where the “chapters” were automatically set. These were listed in sections on the left hand column.
I place chapters in quotes because they only marginally seemed related to the chapters I had in mind when designing the book.
Thankfully, Sigil provides a chapter break function which would indeed make the appropriate page breaks. With the PDF and Sigil program resting side-by-side, I could then make the appropriate cuts, pastes, and creations of chapters to begin setting the text appropriately.
Table of Contents
Things began to appear somewhat better. However, upon inspection, the Table of Contents, was empty! The fix to this was simple, however. The ePub format uses the html heading tag to signify chapter titles. The title and major sections of the book can receive <h1> … </h1>, smaller sections could receive <h2> … </h2>, and so on. In other words, placing these tags around the titles of chapters and the like would signify them as titles. These translated appropriately into the Table of Contents at the chosen levels of indenting.
Default Text Color
There is a significant amount of work to do in CSS. It goes way beyond the scope of this post to discuss it in depth. One thing I did want to point out was that, like many programs that export to some form of html, there is a large amount of redundant coding. Much of the CSS work is in simplifying the resultant code.
For example, Pages exported text with the specified color: “000000” which corresponds to black. This is fine when viewed normally, but if a reader wanted to flip the background to black and the text to white or otherwise, then the screen would instead appear empty. (Thank you to the tester who pointed this out.)
To handle this, I deleted these color references from the styling sheet allowing individual eReaders to do their default processing.
Linking
Breaking the chapters into sections worked nicely for formatting appropriate page breaks, but it apparently completely destroyed the html linking. Besides being image intensive, Creating Flow with OmniFocus also takes advantage of html linking with the document. A reader can jump from one section of the text to another relevant section as they are linked. This worked fine in the PDF and in the immediately exported ePub file, but once the chapters and headings were adjusted, many of the links stopped working .
Linking in ePub works similarly to any html linking. The format is:
<a href=“url”>Link Title</a>
The url, however, if it is linking to another section within the document, needs a specific format. Here is an example:
<a href=”../Text/Section0007.xhtml#b1″>The Introduction</a>
“Section0007.xhtml” refers to the destination section or chapter as titled in the left hand column.
“#b1” refers to an “anchor” in that section. This is where the reader is taken when the link is pressed. In other words, one specifies a section from the link, and the destination section has a place marked to which the reader could go.
Therefore, one needs to add a unique identifier to function as an anchor. Just before the chapter title (or wherever the appropriate destination would be), I would add:
<span id=“the anchor”></span>
In this case it was:
<span id=”b1″></span>
This was a bit of a detailed and tedious process. However, in the end, I do believe it is worth it. Being able to move from one section to another is very important for a textbook-like resource.
Coming up …
In the third and final post of the series, we’ll look at handling and replacing images.
