How to build an e-book part 2

Once I looked at my e-pub book using some downloaded e-book readers, I discovered that my lovely fonts had mostly been substituted with Times New Roman. That’s not at all what I wanted. So I set about finding out how to embed fonts. That seemed a simple matter in Sigil of control-clicking on the fonts folder and adding an existing resource. I had to make the fonts visible to the finder and then copy them to the desktop, but it was fairly painless. The font files duly appeared. When I ran the validation routine (clicking the green tick icon), I was told the fonts were in the manifest, but not discoverable (i.e. not used in the document). Upon further investigation, and I mean a LOT of further investigation, I found a blog with the fix I needed. Apparently, I need an “at-rule”. They provided an example and, with a little tinkering to get the path to the fonts right, I tried putting this at the top of my .css style-sheet, and it works in Adobe Digital Editions, Nook and Sony e-reader:

Now, when I view the book in nook’s e-reader, I get exactly what I wanted. Or nearly. It seems the chapter headings are being left-aligned, and the small caps doesn’t work. There’s a rather messy work-around for both.

But to explain why, I need to talk about the table of contents. The e-pub format has usually two tables of contents. One, at the front of the book, which is part of the text. I haven’t yet decided if there’s any point in doing this. And another, which is “metadata”, a file you can’t edit which is created by the program and is used by the particular e-book reader your customer has to navigate through your book. The way this works is device-dependent and you can’t alter the formatting, so don’t even think about trying!

The text within “heading 1” tags (<h1> and </h1>), is used to build the table of contents. I tried making this invisible using a class I called “.hidden”, and put it at the end of each chapter, but when viewed by an actual e-book reader, I was directed to the end of the chapter when I used the built-in table of contents. So the heading had to go at the top of the chapter.

Incidentally, not including a heading means you can’t include the particular section in the table of contents. No problem, I decided to make each prelims page a separate chapter, but to omit a heading from it, so the reader just scrolls or clicks through the prelims before getting to chapter one, or else uses the contents to skip them.

I wanted to have my chapter headings use just the title “The View from the Bushes” for example, but felt the reader would like the in-built table of contents to list it as “1: The View from the Bushes”. Luckily this is do-able by adding the following to the <h1> tag:

The table of contents uses whatever value you assign to the “title” attribute.

The nook e-book reader is forcing my chapter heading to left align, so I went back to using a paragraph <p> tag for the chapter heading with the old “.chapterHeading” class to format it and then an <h1> tag repeating the chapter heading which I hid with by adding a “visibility=“hidden” ” attribute to the h1 style. In this case I don’t need to set a title attribute. NB, the id attribute is for some reason being added by sigil, and I can’t stop this happening. I suppose it’s something to do with creating the table of contents. This is how the code looks and it sucessfully restores the centred text when rendered by the nook e-reader and also stops it being defaulted to bold:

Setting the font-variant attribute to small-caps has variable results. It seems not to be well implemented. Even within Sigil, as I vary the point size it switches from small caps to regular unpredictably. In some e-boook readers it doesn’t ever render in small-caps at any point size. One solution would be to use all capitals in the first place and to use a class which displays it at (say) 80% . But this doesn’t really work if there is a sign within the text, like “Stevens and Williams Solicitors” in chapter three. So I defined a class called “.signs”, with a font-size attribute of 80%. Within the text, I used a <span> tag to identify the lower case letters of the sign and applied the “.signs” class to it. The text within the tag was in upper case. I didn’t apply the span to the initial capitals of the text. This is how the class looks in the style sheet:

And this is how the span looks in code view. It’s clumsy, but it works:

It’s a lot of work, and fiddly to do, but at least it gets the output to render correctly. Thankfully there are few instances of signs requiring this format in my book.

I’ve been reviewing this, and have made a few further refinements. I've added a stand-alone page with instructions on how to create an e-book from scratch, using my format, aimed at beginners. I can e-mail anyone a copy of the .css file I’m using. This will make using my format as easy as control-clicking on the styles folder and importing it.