Issue With Chapter Headings and TOC

yoss15 · 02-05-2012, 12:43 PM

I'm having a weird issue when using Kindle Previewer to convert an ePub to mobi.

When I use the TOC to go to a section of the book, the format of the section heading text is messed up. But if I go back one page and then forward to the section heading again it appears fine. I also get the same thing on my actual Kindle.

Any ideas what this could be? It only seems to happen when accessing a section through the TOC.

Thanks

DiapDealer · 02-05-2012, 02:11 PM

The anchor used in the TOC link is probably dropping you inside a header tag. That's a known bug when creating mobi (at least for the Kindle) files.

The link in the TOC should take you to an anchor before the chapter header. Ideally, the link in the TOC would be directly to an xhtml file with no anchor (one chapter equals one file in the epub), but if that can't be arranged... then have the link in the TOC go to an anchor point preceding the header tag.

TOC-link:

Code:

<a href="my-ebook.xhtml#chap1">Chapter One</a>

Anchor in my-ebook.xhtml the wrong way:

Code:

<h3 id="chap1">Chapter One</h3>

Anchor in my-ebook.xhtml another wrong way:

Code:

<h3><a id="chap1" href="toc.xhtml">Chapter One</a></h3>

Anchor in my-ebook.xhtml the "right" way (well, technically more like the "if you want it to work right" way):

Code:

<a id="chap1" /><h3>Chapter One</h3>

or

Code:

<a id="chap1" /><h3><a href="toc.xhtml">Chapter One</a></h3>

yoss15 · 02-05-2012, 04:50 PM

Thanks a lot for your response.

Unfortunately it didn't seems to work.

My links were initially set up like this,

Code:

      <p class="Chapter-Heading" id="toc_marker-2"><a id="About-the-Author"></a>About the Author</p>

Which seems like it shouldn't have the issue you described I think.

So I changed them to this,

Code:

      <p class="Chapter-Heading" id="toc_marker-2"><a id="About-the-Author" />About the Author</p>

and I still get the same issue.

My TOC is set up as

Code:

<a href="../Text/Introduction.html#About-the-Author">About the Author<br /></a>

Any thoughts?

DiapDealer · 02-05-2012, 08:39 PM

Try putting the anchor outside the p tag (since you're not using h tags for your chapter headers). It's the exact same issue... your anchor in the toc link is dropping you inside the styled <p> tag instead of before it like it needs to.

So instead of this:

Code:

<p class="Chapter-Heading" id="toc_marker-2"><a id="About-the-Author" />About the Author</p>

Make it this:

Code:

<a id="About-the-Author" /><p class="Chapter-Heading" id="toc_marker-2">About the Author</p>

And leave your toc href the same as you have it now:

Code:

<a href="../Text/Introduction.html#About-the-Author">About the Author<br /></a>

yoss15 · 02-05-2012, 11:12 PM

Works perfectly now! Sorry I misunderstood your first suggestion.

Is there a collection of weird formatting things like this that people should look out for? I only noticed this by chance and could easily see myself missing it.

DaleDe · 02-07-2012, 01:54 PM

It would be better if you would use h1, h2, etc. for headings. That is what h means and was designed for. Making everything a p tag is not semantically correct even though it is syntax correct. Depending on CSS is not a good idea for MOBI since it doesn't even understand CSS so you are depending on the conversion tool to do the right thing. Don't use div for everything either. Semantics is useful and important and will be even more important in ePub3 in the future.

Dale

02-05-2012, 12:43 PM	#1
yoss15 Enthusiast Posts: 37 Karma: 10 Join Date: Jul 2011 Device: Kindle	Issue With Chapter Headings and TOC I'm having a weird issue when using Kindle Previewer to convert an ePub to mobi. When I use the TOC to go to a section of the book, the format of the section heading text is messed up. But if I go back one page and then forward to the section heading again it appears fine. I also get the same thing on my actual Kindle. Any ideas what this could be? It only seems to happen when accessing a section through the TOC. Thanks

02-05-2012, 02:11 PM	#2
DiapDealer Grand Sorcerer Posts: 27,549 Karma: 193191846 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	The anchor used in the TOC link is probably dropping you inside a header tag. That's a known bug when creating mobi (at least for the Kindle) files. The link in the TOC should take you to an anchor before the chapter header. Ideally, the link in the TOC would be directly to an xhtml file with no anchor (one chapter equals one file in the epub), but if that can't be arranged... then have the link in the TOC go to an anchor point preceding the header tag. TOC-link: Code: <a href="my-ebook.xhtml#chap1">Chapter One</a> Anchor in my-ebook.xhtml the wrong way: Code: <h3 id="chap1">Chapter One</h3> Anchor in my-ebook.xhtml another wrong way: Code: <h3><a id="chap1" href="toc.xhtml">Chapter One</a></h3> Anchor in my-ebook.xhtml the "right" way (well, technically more like the "if you want it to work right" way): Code: <a id="chap1" /><h3>Chapter One</h3> or Code: <a id="chap1" /><h3><a href="toc.xhtml">Chapter One</a></h3> Last edited by DiapDealer; 02-05-2012 at 02:48 PM.

02-05-2012, 04:50 PM	#3
yoss15 Enthusiast Posts: 37 Karma: 10 Join Date: Jul 2011 Device: Kindle	Thanks a lot for your response. Unfortunately it didn't seems to work. My links were initially set up like this, Code: <p class="Chapter-Heading" id="toc_marker-2"><a id="About-the-Author"></a>About the Author</p> Which seems like it shouldn't have the issue you described I think. So I changed them to this, Code: <p class="Chapter-Heading" id="toc_marker-2"><a id="About-the-Author" />About the Author</p> and I still get the same issue. My TOC is set up as Code: <a href="../Text/Introduction.html#About-the-Author">About the Author<br /></a> Any thoughts?

02-05-2012, 08:39 PM	#4
DiapDealer Grand Sorcerer Posts: 27,549 Karma: 193191846 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	Try putting the anchor outside the p tag (since you're not using h tags for your chapter headers). It's the exact same issue... your anchor in the toc link is dropping you inside the styled <p> tag instead of before it like it needs to. So instead of this: Code: <p class="Chapter-Heading" id="toc_marker-2"><a id="About-the-Author" />About the Author</p> Make it this: Code: <a id="About-the-Author" /><p class="Chapter-Heading" id="toc_marker-2">About the Author</p> And leave your toc href the same as you have it now: Code: <a href="../Text/Introduction.html#About-the-Author">About the Author<br /></a> Last edited by DiapDealer; 02-05-2012 at 10:11 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Chapter Headings	Paxman53	Conversion	3	10-12-2011 12:31 PM
Chapter Headings on their own page? Help!	Lee5150	Calibre	3	10-06-2011 08:12 AM
Why H1 and H2 Chapter Headings?	Ransom	Calibre	11	08-10-2011 04:29 PM
Help converting chapter headings	p3aul	Conversion	6	04-03-2011 12:56 PM
Managing HTML Link Behavior, From TOC to Chapter Headings	FlooseMan Dave	Calibre	1	03-31-2010 11:55 PM

02-05-2012, 11:12 PM	#5
yoss15 Enthusiast Posts: 37 Karma: 10 Join Date: Jul 2011 Device: Kindle	Works perfectly now! Sorry I misunderstood your first suggestion. Is there a collection of weird formatting things like this that people should look out for? I only noticed this by chance and could easily see myself missing it.

02-07-2012, 01:54 PM	#6
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	It would be better if you would use h1, h2, etc. for headings. That is what h means and was designed for. Making everything a p tag is not semantically correct even though it is syntax correct. Depending on CSS is not a good idea for MOBI since it doesn't even understand CSS so you are depending on the conversion tool to do the right thing. Don't use div for everything either. Semantics is useful and important and will be even more important in ePub3 in the future. Dale

Advert

Advert