Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 10-27-2012, 06:26 PM   #1
Dia435
Member
Dia435 began at the beginning.
 
Posts: 16
Karma: 10
Join Date: Jul 2012
Device: Kindle Nook iPad
html & css to fight the Nook centering problem

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
Dia435 is offline   Reply With Quote
Old 10-28-2012, 12:09 PM   #2
Jim Lester
Evangelist
Jim Lester is less competitive than you.Jim Lester is less competitive than you.Jim Lester is less competitive than you.Jim Lester is less competitive than you.Jim Lester is less competitive than you.Jim Lester is less competitive than you.Jim Lester is less competitive than you.Jim Lester is less competitive than you.Jim Lester is less competitive than you.Jim Lester is less competitive than you.Jim Lester is less competitive than you.
 
Jim Lester's Avatar
 
Posts: 416
Karma: 14682
Join Date: May 2008
Location: SF Bay Area
Device: Nook HD, Nook for Windows 8
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.

Last edited by Jim Lester; 10-28-2012 at 12:22 PM.
Jim Lester is offline   Reply With Quote
Old 10-28-2012, 07:21 PM   #3
Dia435
Member
Dia435 began at the beginning.
 
Posts: 16
Karma: 10
Join Date: Jul 2012
Device: Kindle Nook iPad
html & css to fight the Nook centering problem

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
Dia435 is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Kindle newbie needs "template" HTML & CSS Rich_H Kindle Developer's Corner 12 09-10-2012 11:16 PM
Kindle Newbie needs "template" HTML & CSS Rich_H Workshop 4 09-10-2012 08:33 PM
Nook not centering anything. why? kateharp ePub 0 05-11-2011 10:53 PM
Best source for learning HTML & CSS bigpallooka Calibre 14 11-08-2010 02:45 PM
centering images with css override? Amalthia Calibre 2 03-30-2009 01:53 PM


All times are GMT -4. The time now is 09:17 AM.


MobileRead.com is a privately owned, operated and funded community.