Strange chapter header issue?

[Kratos]

Originally Posted by DreamWriter

..I have the same problem that Kratos reports. Chapter 1 is fine when I navigate there using the 5-way (or TOC) and go back and then forward, but on the other chapters the heading is one or two lines lower when I do that. When I navigate the same way to the chapter heading and go forward and then back, all chapter headings are fine. This does not happen in Kindle Previewer -- only on my K3.

If I move to each chapter heading using the page-forward button (on the side of the Kindle) and then go back/forward at a chapter heading, all is fine. This makes me wonder if the problem may be in the NCX file rather than the HTML.

Any thoughts?

I would normally speculate that I had done something wrong but as DMSmillie said earlier in the thread my original html file when opened in a browser works perfectly. What is strange is that considering the large amount of people creating Kindle books there seems to be so few experiencing this issue. Are others doing something different, is it the word processor we are using, is it to do with the conversion software Mobipocket, or is the fault only with the preview prc, and is it fixed after Kindle Conversion? I swear this process has aged me!

[DreamWriter]

Kratos (and others), do you put coding in the HTML at the beginning of each chapter to indicate a page break? I've been using

<mbp:pagebreak />

In the latest "Amazon Kindle Publishing Guidelines" on page 7 it says: "Use the page break standard CSS page-break-before and page-break-after attributes." I plan to experiment with that.

I just recently started using Mobipocket Creator. I was using KindleGen before, but the resulting .mobi files were about twice the size since it includes the source code in the file. I don't recall whether this chapter position problem existed with the KindleGen file, but I'll test that.

This may be something with the Kindle device itself. As I mentioned, this does not happen in Kindle Previewer. There are several other peculiarities that may be related to the chapter headers changing. Use the five-way or TOC to go to Chapter 5, for example. Then use the page-forward button (on the side) to get to the end of Chapter 5. Note where that chapter ends on the page. Then use the 5-way to move forward to Chapter 6 (the next chapter). Then page-back. The last page of a chapter will always end at the bottom of the screen, not where it did before. Yet, this doesn't happen if you use the page-forward button to move forward to Chapter 6 (from the end of Chapter 5) and then page back!

Also, try this. Go to a chapter using the 5-way or TOC. Page back. Then page forward. Then, if you press the 5-way to go forward, it stays on that chapter instead of moving to the next one. This tells me that it's not positioning properly right at the beginning of the chapter, but slightly before.

The odd thing to me is that this does not happen on Chapter 1. Chapter 1 is not the first item in my NCX or Table of Contents, but it IS where I've set the book to open in the OPF. That's the only thing I can determine that makes it different from the other chapters. The HTML looks the same.

I suppose we need to keep this in proper perspective. It's really a minor glitch. How many people are going to use the 5-way or TOC to go to a chapter heading and then page back and then move forward? I see this behavior in many (maybe all?) Kindle/.mobi books, not just my own. There is one particular book where most of the chapters work properly, though. Actually, very few books on my Kindle even have 5-way navigation enabled.

Kratos, You can email your .prc or .mobi file to Amazon using the @kindle.com address (or the free one) and they will automatically send the file back to you as an .azw file so you can test that. I've done that a number of times.

I'll let you know if my experiments provide any answers. And if anyone else figures it out, I'd love to know!

[DaleDe]

The basic problem is with the format itself. There are no real page boundaries in mobi/azw format. Pages are formulated as they appear. So if you move forward page by page you will be fine. The reader keeps a cache of a few pages so you can backup a page and then forward and it will work fine. But if you jump forward and then backup the unit has no idea what size the previous page should be so it just makes a guess and fills the page as best it can and then when you go back forward it can be off a bit. There is no real good solution that will always work.

Dale

[DreamWriter]

Okay, I think I found a solution! I'm not sure why it works, but it does for me.

I did numerous experiments, with various combinations of coding. First, I used KindleGen to create the .mobi from the original HTML. The same problem with the chapters was there, so it isn't something peculiar only to Mobipocket Creator.

Now, I don't know if I can explain this clearly enough, but I'll try. I am not an expert in either HTML or CSS. I know enough to get by, but I'm sure that things are not "technically" correct.

My chapters are not wrapped within any <div> tags. I don't know if that would change anything. I have an external CSS file, but you could include the CSS within the HTML.

This is what worked for me at the beginning of each chapter:

HTML code:

<mbp:pagebreak />
<a name="Chapter1" /><h4 class="CHAPTERTITLE">Chapter 1</h4>

CSS code that is called by the H4 class from the HTML above:

h4.CHAPTERTITLE
	{page-break-before:always;
	page-break-after:avoid;
	margin-top:35pt;
	margin-bottom:0pt;
	margin-left:0pt;
	margin-right:0pt;
	text-align:center;
	text-indent:0pt;
	font-weight:bold;}

What makes it work is having BOTH the

<mbp:pagebreak />

before the beginning of each chapter AND the

page-break-before:always;

code in h4.CHAPTERTITLE CSS. One or the other alone did not work for me!

Now, when I use the 5-way or TOC to move to a chapter and then page-back/page-forward using the button on the side of the Kindle, the chapter title stays in the correct location on the page. (Note that it may move when you first open the file and try that. That's because the book name and battery icon are taking up space at the top until you page forward/back. When that top indicator line disappears, then all the chapters are where they should be.)

I hope that makes some sense! I'd be interested to know if this works for you too!

[Kratos]

Hi DreamWriter. I'm guessing you are an experienced coder. I don't know any html but i'd really, really like your method to work for me. Or being honest, any method! What I've learnt is that h1 is for heading 1 which I used for my chapter titles.

So what changes do I have to do? Do I first change the style setting of the chapter titles in my word doc to heading 4?

Then add that first html code at the beginning of the chapter?

<mbp:pagebreak />

and then find CSS code for h4 in my html (is it only in one place?) and add this code

{page-break-before:always;

at the top line?

I downloaded your husband's sample file it works as you described. Also I love the star effect, it looks really pretty and I didn't know the Kindle could do this.

Wouldn't it be a good idea if Amazon supplied a default template that works?

[DaleDe]

Originally Posted by Kratos

Wouldn't it be a good idea if Amazon supplied a default template that works?

It is a nice work-around but wouldn't it be even better if Amazon didn't need this at all. Either of the fixes should have worked by themselves. To require both is a bug.

[DreamWriter]

Kratos, thanks for testing my .mobi sample file and letting me know that it works okay for you! I was working on the chapter heading problem for hours this morning, and I'm a bit burned out (as you can imagine), so it helps to have several pairs of eyes looking at it.

And, no, I'm not a very experienced coder. Everything I know, I have learned online and from books. I know for a fact that my HTML isn't 100% technically correct. It was hobbled together as I was learning, and if I had it to do over again, I'd do a better job on the website and other projects, but it seems to work okay. (I did all the coding by hand, not using any website creation program.)

The H1, H2, H3, H4 tags really just set the size of the headings relative to the text size. I chose H4 only because I liked that size with the star/line graphic and the subtitle (which I have set as H3). You can leave your titles as H1.

Before you make any changes, be sure to back up your original HTML (and Word file) in case things get messed up!

First, be sure to choose HTML filtered when you save as HTML from Word, as it's a bit cleaner. Once you have the HTML code that was generated from the MS Word file, you would insert this just before each chapter:

<mbp:pagebreak />

Immediately after that, I have:

<a name="Chapter1" /><H4 class="CHAPTERTITLE">Chapter 1</H4>

(Actually, you can ignore the class="CHAPTERTITLE" part of it. Yours will read:

<H1>Chapter 1</H1>

I had several styles for my H4 headings, but you'll probably have only one for your H1, so you don't need to specify a class.)

It's been quite a while since I worked with HTML that was freshly created from MS Word, but I remember that even the "filtered" HTML is quite a mess! But somewhere in there, I believe there is reference to a style for H1. It's probably near the top of the HTML code, somewhere between <HEAD> AND </HEAD>. It may look something like this:

<STYLE>
H1 {text-align:center; font:normal;.......}
</STYLE>

You want to add this in there:

page-break-before:always;

I put it at the beginning, so it would go right before text-align:center; -- just to the right of the opening { bracket.

That's really all you need to do. I hope it works for you!

The only other thing I should mention again is that I do not have any <div> and </div> tags in the HTML around the chapters. MS Word may insert those into the HTML automatically. If so, you can keep the <div> tags and see if it works. But if it doesn't work, that could be why.

I hope that helps!

[DreamWriter]

Originally Posted by DaleDe

It is a nice work-around but wouldn't it be even better if Amazon didn't need this at all. Either of the fixes should have worked by themselves. To require both is a bug.

Yes! There is no logical reason why my fix works, while using

<mbp:pagebreak />

or

page-break-before:always;

alone does not. I tried positioning things in many different ways too.

As I mentioned earlier, in the latest "Amazon Kindle Publishing Guidelines", on page 7 it states:

Text guideline #2: page breaks

Use the page break standard CSS page-break-before and page-break-after attributes.

There is no mention of

<mbp:pagebreak />

at all. I tried their suggestion alone, and it didn't work perfectly.

If anyone does comes up with a better (more logical) solution, I'm all ears.

[Kratos]

ALMOST!
DreamWriter, it is so nearly perfect. Each chapter title preserves it formatting however I navigate there so at least it doesn't look so broken. There is one negative which is when I am on the chapter page and press the back button I have a blank page with an underscore in the top left corner. Or when I finish a chapter the next page is a blank page with an underscore in the top left corner.

What I have done is opened by file. Near the start under the style tag I entered the line of code you said and it looks like this

#h1
        {page-break-before:always;
	margin:0pt;
	margin-bottom:.0001pt;
	line-height:115%;
	page-break-after:avoid;
	font-size:18.0pt;
	font-family:"Times New Roman";
	color:black;
	font-weight:bold;
	text-decoration:underline;}

Then I entered this line of code <mbp: pagebreak /> at the start of every chapter. So it actually comes before the p class information for normal text.

So after my table of contents, this is all the text for Chapter 1

<mbp:pagebreak />

<p class=MsoNormal style='line-height:150%'><b><span style='font-size:12.0pt;
line-height:150%;font-family:"Times New Roman"'>&nbsp;</span></b></p>

<b><u><span style='font-size:18.0pt;line-height:115%;font-family:"Times New Roman";
color:black'><br clear=all style='page-break-before:always'>
</span></u></b>

<h1 class="heading1style" id="_Toc289087672">My Chapter One Name</h1>
<br>
</h1>

And this is what it looks like at the start of my second chapter. There also an extra line that says 'text-decoration'. I don't know if this is relevant.

<mbp:pagebreak />

<b><u><span style='font-size:18.0pt;line-height:115%;font-family:"Times New Roman";
color:black'><br clear=all style='page-break-before:always'>
</span></u></b>

<h1><span style='text-decoration:none'>&nbsp;</span></h1>

<h1 class="heading1style" id="_Toc289087673">My chapter 2 name</h1>

So there is a bit of code adding that extra page. Any ideas?

[DreamWriter]

Completed changed (edited)!

Ugh, MS Word makes such a mess of things when converting to HTML!

First, make sure you have backed up the HTML in case this doesn't work as expected. Also, you might want to change just a few chapters and test before changing your entire document.

For Chapter 1, I would probably delete everything in red:

<mbp:pagebreak />

<p class=MsoNormal style='line-height:150%'><b><span style='font-size:12.0pt;
line-height:150%;font-family:"Times New Roman"'>&nbsp;</span></b></p>

<b><u><span style='font-size:18.0pt;line-height:115%;font-family:"Times New Roman";
color:black'><br clear=all style='page-break-before:always'>
</span></u></b>

<h1 class="heading1style" id="_Toc289087672">My Chapter One Name</h1>
<br>
</h1>

What you'll be left with is:

<mbp:pagebreak />
<h1 class="heading1style" id="_Toc289087672">My Chapter One Name</h1>

Deletion of that coding may remove a blank line or two above your chapter heading because &nbsp; adds a blank line. If needed, you could add coding to the h1 style to move the heading down a bit, like this (add in whatever number of pts works for you):

margin-top:5pt;

In this section of the removed code above, it was instructing to break the page:

style='page-break-before:always'

So, when you added that page-break code to the h1 heading style, now you have two page breaks, which creates a blank page. I believe the <u> and </u> codes there were causing the small underlines.

For your second (and subseqent?) chapters, I would delete all the coding in red:

<mbp:pagebreak />

<b><u><span style='font-size:18.0pt;line-height:115%;font-family:"Times New Roman";
color:black'><br clear=all style='page-break-before:always'>
</span></u></b>

<h1><span style='text-decoration:none'>&nbsp;</span></h1>

<h1 class="heading1style" id="_Toc289087673">My chapter 2 name</h1>

So, what you're left with is:

<mbp:pagebreak />
<h1 class="heading1style" id="_Toc289087673">My chapter 2 name</h1>

Let me know if that works. At least you're making progress in the right direction!

[Kratos]

Dreamwriter. IT WORKS! Thank you so, so much.

Unbelievable. The amount of time and effort I've spent trying to convert this blasted thing, and just when I thought I was at the finish line this strange, obscure problem that nearly made me go mental. But you have taken the time to look at my code, examine it and discover a solution. I am so grateful to you. Thank you.


I'm a bit of a perfectionist (sorry.) On testing I saw I had two more problems which I believe I fixed.
Some of my chapters required a page break underneath the title. I originally removed these lines of code.

<br>
</h1>

But then I saw there was no space between chapter title and text so I put them back, I have my space and it looks great. But would the br still work without /h1? Or does the /h1 need to stay in?

I also saw I had the same issue with the table of contents! i.e. it works well when I 'Go to toc' on scroll right and back. But when I scroll left and then back right on to the toc, then the 'Contents' is one line down.


This is the code for my toc

<b><span style='font-size:13.0pt;line-height:115%;font-family:"Times New Roman"'><br
clear=all style='page-break-before:always'>
</span></b>

<p class=MsoNormal align=center style='text-align:center'><b><span
style='font-size:13.0pt;line-height:115%;font-family:"Times New Roman"'>&nbsp;</span></b></p>

<p class=MsoNormal><a name=toc></a><b><u><span style='font-size:18.0pt;
line-height:115%;font-family:"Times New Roman"'><br>
Contents</span></u></b></p>

What I did was delete those first two paras, and add that mbp line, it now looks like this..

<mbp:pagebreak />

<p class=MsoNormal><a name=toc></a><b><u><span style='font-size:18.0pt;
line-height:115%;font-family:"Times New Roman"'><br>
Contents</span></u></b></p>

In testing the file the toc now is consistent. It works. I just wanted to make sure that removing those lines is safe and wont unravel everything. And if it is safe for me to have deleted them why were they even in there?

Apart from that I can't say this enough... THANK YOU! I'm so truly utterly grateful.

[DaleDe]

But then I saw there was no space between chapter title and text so I put them back, I have my space and it looks great. But would the br still work without /h1? Or does the /h1 need to stay in?

br is the break command to make a new line as you discovered. Properly for xhtml (epub) it should be <br /> to indicate that it both opens and closed the break tag.
The /h1 is the closing tag for the title. It begins with <h1> and ends with </h1>. This is the proper way to define an h1 tag in xhtml. It is not proper to leave out the closing part of the tag although some reading tools may let you get away with it. It won't pass any of the checks. Glad it is all working.

Dale

[DreamWriter]

YAY! I'm so glad that it worked for you!

Originally Posted by Kratos

I'm a bit of a perfectionist (sorry.)

I am a perfectionist also , so I understand.

As you will recall, your code originally looked like this:

<mbp:pagebreak />

<p class=MsoNormal style='line-height:150%'><b><span style='font-size:12.0pt;
line-height:150%;font-family:"Times New Roman"'>&nbsp;</span></b></p>

<b><u><span style='font-size:18.0pt;line-height:115%;font-family:"Times New Roman";
color:black'><br clear=all style='page-break-before:always'>
</span></u></b>

<h1 class="heading1style" id="_Toc289087672">My Chapter One Name</h1>
<br>
</h1>

Two of the lines I suggested that you remove were those last two, highlighted in red.

Every <h1> tag should have a corresponding < /h1> in order to "end" it. (That's what the forward-slash means there.) As you can see, your chapter title is wrapped in a pair of <h1> and </h1>, but I see no <h1> in the code you supplied that goes with that very last </h1> (right after <br>). It's possible that there's an <h1> somewhere above the code snippet you supplied in that earlier post. I don't know why it would've been done that way, though. The wonders of MS Word to HTML conversion.

On testing I saw I had two more problems which I believe I fixed.
Some of my chapters required a page break underneath the title. I originally removed these lines of code.

<br>
</h1>

But then I saw there was no space between chapter title and text so I put them back, I have my space and it looks great. But would the br still work without /h1? Or does the /h1 need to stay in?

The answer may depend on whether there is a <h1> somewhere above the code snippet that you provided earlier. You don't want to have an <h1> without a corresponding </h1> to close it. You might want to see if you can find an unpaired <h1> above that code snippet. I can't imagine why there would be one, but if there is, you should keep the </h1>.

If I would have done the coding, I would have included spacing under the chapter headings by using the h1 style to add that extra space, rather than using <br>. Remember this style code?

#h1
        {page-break-before:always;
	margin:0pt;
	margin-bottom:.0001pt;
	line-height:115%;
	page-break-after:avoid;
	font-size:18.0pt;
	font-family:"Times New Roman";
	color:black;
	font-weight:bold;
	text-decoration:underline;}

You could substitute the .0001pt in that line highlighted in red above with a larger pt (point) value. You could try 5pt and see how that looks. Increase or decrease as you like. But this would only be done if you removed all the unneeded <h1> (if it exists), <br> and </h1>.

What I did was delete those first two paras, and add that mbp line, it now looks like this..

<mbp:pagebreak />

<p class=MsoNormal><a name=toc></a><b><u><span style='font-size:18.0pt;
line-height:115%;font-family:"Times New Roman"'><br>
Contents</span></u></b></p>

In testing the file the toc now is consistent. It works. I just wanted to make sure that removing those lines is safe and wont unravel everything. And if it is safe for me to have deleted them why were they even in there?

I think it should be fine the way you have the TOC coding now. As for why MS Word put the coding there in the first place -- who knows? It puts all kinds of unnecessary coding into the HTML. When I converted my husband's book from MS Word to HTML, it was one big pain in the *** to clean up! (Search and replace can be your friend.)

I hope you're happy with the results!