html & css to fight the Nook centering problem

[Dia435]

Hi All -

I have succeeded in having an epub that is validated across the board on three tests. It reads correctly on ADE, ipad, (the kindle version reads correctly on Kindle Previewer), reads correctly in Calibre, and Sigil.

Unfortunately - as is to be expected - my heads, and my flourishes (little artwork in between chapters) are all flushing left - IN NOOK.

I have followed Liz Castro's blog site advice about coding w/html and css to combat that Nook problem. But it still is reading wrong. Here is my current code (for my h1 heads) below.

Please keep in mind as I said, that it reads correctly everywhere but on the Nook (and possibly may not read right on the Sony Reader, etc.).

Here's the CSS:

h1
{margin: 0 0 20px 0;
text-align:center;
text-indent:0;
page-break-before:always;
page-break-after:avoid;
font-size:24px;
font-family:"Times New Roman",serif;}
.wrap
{text-align:center}
.center
{text-align:center;
width: 100%;
background: none;
display:inline-block}
.mismatch
{text-align:left;
width: 100%;
background: none;
display:inline-block }
h2
{margin: 13px 0 13px 0;
page-break-after:avoid;
font-size:19px;
font-family:"Cambria",serif;}



And here's the html - with a few headings that I was testing in my epub as a sample - -

<div class="center" id="sigil_toc_id_4">
<h1><a href="../Text/Lightin-Up%21_0004.xhtml#toc">Here is some text that should be centered</a></h1><a id="_Toc337392450"></a>
</div>

<h1 class="sgc-8 sgc-2" id="sigil_toc_id_4"><a href="../Text/Lightin-Up%21_0004.xhtml#toc">Silence</a><a id="_Toc337392450"></a></h1>


I was coding similar to the html and css tips on Liz Castro's site - http://www.pigsgourdsandwikis.com/search/label/nook


thx very much - Dia

[Jim Lester]

Does it work correctly in ADE 2.0?
Does it work correctly if you turn 'Publisher Defaults' on?

Most likely the StyleSheet override of CSS by the Nook is causing you problems. If you change the css to have a class selector for h1
h1.CenterMe { .... }

and mark up the html accordingly
ie <h1 class="CenterMe" ...>...</h1>

You may have better luck.

Note1: Specifying the font-size in px is a BAD IDEA, use em instead. Users can and will want to change the font size to suit their reading needs. This will mean that your header will either appear much bigger or much smaller than you intend. If you do this to your body text, your readers will be quite rightfully miffed at you (See recent news for JK Rowling for an example).

Note2: Specifying margins in px, is not as bad as specifying font-size in px but may also get you unintended results.

[Dia435]

Jim -

Thanks for your tips. I will change the font size to em's.

I checked the publishers defaults - it was off - I put it on - but no difference in the h1 heads.

It does, interestingly enough, read perfectly in ADE - with all heads and flourish images centering as they should.

I will make the changes you mentioned - with the css, and then with the html - to have a class selector for the h1.


thx for now - Dia