Image as Header for Chapter

[Peter21]

Hi
In order to avoid the chapter title being separated from the image following it, due to small screen constraints, I have incorporated the chapter title into a jpeg, at the beginning of a chapter. i.e. it is no longer "text", and cannot be given the H2 tag.

Now sigil picks up H2 headings to create the TOC, and so cannot see the image as a chapter heading.
Is there any way round this?

thanks a lot

Peter

[Tex2002ans]

You should be able to assign the chapter heading <img> an id, and then you can use Tools - Table of Contents - Edit Table of Contents to manually add/tweak the TOC:

http://web.sigil.googlecode.com/git/..._contents.html

[theducks]

Originally Posted by Peter21

Hi
In order to avoid the chapter title being separated from the image following it, due to small screen constraints, I have incorporated the chapter title into a jpeg, at the beginning of a chapter. i.e. it is no longer "text", and cannot be given the H2 tag.

Now sigil picks up H2 headings to create the TOC, and so cannot see the image as a chapter heading.
Is there any way round this?

thanks a lot

Peter

<h3 title="Chapter 1"><img alt="" src="../Images/chap01.jpg">

[Toxaris]

I would actually create a hidden header with the chapter name. In the book the image will show, but in the NCX the chapter name will be displayed.

[drjenkins]

Originally Posted by theducks

<h3 title="Chapter 1"><img alt="" src="../Images/chap01.jpg">

This is pretty much how I do it. Here's a slighlty more complete example:

<h3 title="Chapter 1"><img alt="Chapter 1" src="../Images/chapter_1.jpg" /></h3>

I set the img alt text the same as the chapter title. The title text appears in toc.ncx and the alt text is available for impaired readers.

[Peter21]

Thanks to you all....putting the image code within the heading tag did the trick.

Peter

[Hitch]

Originally Posted by Peter21

Thanks to you all....putting the image code within the heading tag did the trick.

Peter

Wait.

Did you literally put the image tag inside the heading tag? Or did you do what Ducky, I think it was, advised--just create an invisible heading? That didn't wrap the image?

Depending upon where you're going from here, having the image tag inside the heading tag might cause you issues. Are you planning on converting this book to a MOBI, by any chance, and making an inline (HTML) TOC?

Hitch

[Peter21]

Thanks hitch

This is the code I used:
<h2 title="Introduction"><img alt="overviewmap" src="../Images/overviewmap.jpg" /></h2>

The book will be converted to a .mobi file, which I am previewing using kindlegen.
On the first run this line came out blue in the TOC; I got round this with the following line in CSS:
a, href {text-decoration: none; color: black;}

which I guess will turn all links black...a bit clumsy maybe? Any suggestions very welcome.

Peter

[Toxaris]

That CSS will not work on most readers, they will display it with a blue line. Hitch is right, although it is correct in essence, it can give you problems on readers. Hence my advise earlier to put the image in a <div> and create an empty hidden header with the fallback text.

[Peter21]

Originally Posted by Toxaris

That CSS will not work on most readers, they will display it with a blue line. Hitch is right, although it is correct in essence, it can give you problems on readers. Hence my advise earlier to put the image in a <div> and create an empty hidden header with the fallback text.

OK....How would I create an empty hidden header....could you give an example of the code?
Many thanks
Peter

[Toxaris]

Sure, no problem. Put this in your stylesheet:

.hidden { display: none; }

Then use the following in your HTML:

<h1 class="hidden">This is your hidden title.</h1><div>your image</div>

Word of warning. You can also use 'display: hidden', but that will occupy space. It will effectively show the header, but make the text color the same as the background. With 'display: none' it will not be displayed at all and will not occupy space on the page.

[Jellby]

Originally Posted by Toxaris

Word of warning. You can also use 'display: hidden'

That would be 'visibility: hidden', but it's not in the required CSS set for ePub 2, so you should not rely on it.

[Toxaris]

Originally Posted by Jellby

That would be 'visibility: hidden', but it's not in the required CSS set for ePub 2, so you should not rely on it.

doh!

[DaleDe]

Originally Posted by Jellby

That would be 'visibility: hidden', but it's not in the required CSS set for ePub 2, so you should not rely on it.

The difference between visibility:hidden and display:none is that hidden will continue to take up the space it would have used had the characters been there while none removes the data and the space it would have taken. As noted above only display:none is mentioned in the ePub spec.

Dale

[Hitch]

Originally Posted by Peter21

Thanks hitch

This is the code I used:
<h2 title="Introduction"><img alt="overviewmap" src="../Images/overviewmap.jpg" /></h2>

The book will be converted to a .mobi file, which I am previewing using kindlegen.
On the first run this line came out blue in the TOC; I got round this with the following line in CSS:
a, href {text-decoration: none; color: black;}

which I guess will turn all links black...a bit clumsy maybe? Any suggestions very welcome.

Peter

Hi, Peter:

Everybody answered the other stuff, but do NOT use

a, href {text-decoration: none; color: black;}

(I didn't fix the coding) because then, when someone uses Night Mode, they won't be able to see anything that's a link. Chapter heads, if they link back, the TOC...el zippo. Don't do that. Amazon gets all frowny if they get complaints from readers that like to read in Night Mode (black background, white lettering--see what will happen if the text is set to be black permanently? ;-)

Hitch