10-27-2012, 06:26 PM | #1 |
Member
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 |
10-28-2012, 12:09 PM | #2 |
Evangelist
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. |
Advert | |
|
10-28-2012, 07:21 PM | #3 |
Member
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 |
|
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 |