How to generate a Nav or TOC w/Pictures

[Kabukikaiser]

Hello,

So, I am using pictures for my chapter titles in order to use a fancy font and, of course, the TOC generator doesn't recognize them except as empty text when I use <h1></h1> to tag them, which leaves me with a TOC of empty texts.

I don't think I have another choice but to fiddle with the .ncx file so that the chapter titles show instead of nothing... Do you know how to do this or can you think of another solution?

[KevinH]

Yes, embed the fancy font and replace the images with text so that your toc is accessible to those who are visually impaired and need screen reading software.

Alternatively, add a title attribute to each heading tag in text which the toc generation software will give precedence to and still be accessible.

[DNSB]

Personally, if you must use images, I would add a title="text" and alt="text". Something like the below:

<h3 class="center" title="Chapter 6"><img alt="Chapter 6" class="imgw61" src="../Images/chapter_06.jpg"/></h3>

The title will be used to generate the ToC entry while the alt will allow a screen reader to say chapter 6.

[KevinH]

Originally Posted by DNSB

Personally, if you must use images, I would add a title="text" and alt="text". Something like the below:

<h3 class="center" title="Chapter 6"><img alt="Chapter 6" class="imgw61" src="../Images/chapter_06.jpg"/></h3>

The title will be used to generate the ToC entry while the alt will allow a screen reader to say chapter 6.

Good point! I forgot about alt of images being needed as well.

[Tex2002ans]

Originally Posted by Kabukikaiser

So, I am using pictures for my chapter titles in order to use a fancy font and, [...]

Bad idea.

This has been discussed quite a few times over the years. Here's some of the more recent threads:

• 2019: "create a useable TOC when book uses images for chapter headings"
• My 2019 comment on /r/selfpublishing: "Any tips on adding ornamental art in Sigil or Scrivener?"

And why are images-of-text bad?

In the 2018 post I link to in that 2nd response:

Originally Posted by Tex2002ans

The gist is that images of text are:

• Not Accessible
  • Not readable by TTS
  • Not copy/pastable
  • Not able to be looking up by dictionary (Greek->English one)
• Don't follow user preferences
  • Color, font, font size, [...]

Originally Posted by Kabukikaiser

of course, the TOC generator doesn't recognize them except as empty text when I use <h1></h1> to tag them, which leaves me with a TOC of empty texts.

There are a few ways to do this:

- - -

Method 1. Like DNSB said, using title="" is how you manually override what appears in Sigil's TOC generator:

<h1 title="1. The Beginning">Chapter 1: The Beginning</h1>

Would appear as:

• 1. The Beginning
  
  • In the TOC + after Tools > Table of Contents > Generate Table of Contents.
• Chapter 1: The Beginning
  
  • In the text itself.

Method 2 (Strongly recommend against). There are ways to "hide" an <h1> using CSS's display: none:

HTML:

<div class="chaptertitle">[[[Your image code here]]]</div>

<h1 class="invisible">Chapter 1: The Beginning</h1>

CSS:

 h1.invisible {
	display: none;
}

but this has the potential to break in many readers.

Method 3. Like KevinH said, embed+subset a "fancy font" and use it only for your chapter titles:

HTML:

<h1 class="fancytitle">Chapter 1: The Beginning</h1>

CSS:

h1.fancytitle {
	font-family: "Lucida Handwriting", cursive, sans-serif;
}

For info on how to do that, see my mini-tutorial I wrote for embedding Japanese fonts. (Instead of <span class="japanese">, you'll be using <h1 class="fancytitle">. You can then follow Steps 4+.)

For more info on "embedded font" issues (licensing, "Publisher Fonts" setting, etc.), see discussion in this recent thread: "ePub chinese fonts".

- - -

All methods (and pros/cons) were discussed in detail in those linked threads.

I completely recommend against using "chapter heading as images" though.

[Karellen]

Originally Posted by Tex2002ans

Method 1. Like DNSB said, using title="" is how you manually override what appears in Sigil's TOC generator:

<h1 title="1. The Beginning">Chapter 1: The Beginning</h1>

I have tried to use this in Calibre editor for epub v2 and it does not work for me. Is this a Sigil only function and not standard html/css, or maybe epub v3 only?

I currently use the following, but thought the above might be simpler, if I could get it to work.

<p class="chapterh3">Chapter 1</p>
<h3><span class="hide">1 - </span>The Casimir Engine</h3>

[KevinH]

Perfectly standard xhtml. Calibre just uses some other way to build ToC entries.
You should really ask in the calibre forums about how they generate ToC entries.

[Karellen]

Thanks @KevinH, will do.