06-22-2013, 11:24 PM | #1 |
Novice
Posts: 14
Karma: 10
Join Date: Jun 2013
Device: Kindle Paperwhite
|
Using a CSS "style reset"
Hi,
I'm wondering if anyone could comment on using a so-called "style reset" to remove any default margins and paddings an e-reader may impose on the reading of the ebook automatically. Example (from Guido's Guide): Code:
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, pre, table, th, td, tr { margin: 0; padding: 0; } It seems like a great little fix, but as I've been trying to wrap my head around the dos and donts of ebook formatting (which seems almost impossible in itself ) I've become very wary of trying to force/manipulate anything unless I know it's accurate. I may be paranoid but would really like to learn from the beginning to create ebooks that are following best practices and the guidelines to be as safe for the future as possible, and for maximum compatibility. For example, being encouraged in several guides to force text-alignment to avoid automatic justification by the kindle reader, only to then read in Amazon's guidelines that this is strongly advised against (for various reasons) - and so on. It seems that this field of ebook making is indeed a tricky one to learn due to the massive amount of conflicting (mis)information out there and the apparently rapidly evolving nature of the field itself. It must be a huge challenge for you professionals out there - for good and bad . Thanks in advance for your assistance - and a huge thanks to the community for all the incredible information you are sharing so generously on this board. /end rant, but being my first actual post - I had to say WOW and thank you! Namaste, Santosha |
06-22-2013, 11:27 PM | #2 |
Wizard
Posts: 2,251
Karma: 3720310
Join Date: Jan 2009
Location: USA
Device: Kindle, iPad (not used much for reading)
|
Since .mobi doesn't actually support the use of styles, it is going to depend on the tool you use to convert, and what it interprets such a style to be in HTML.
|
06-22-2013, 11:31 PM | #3 | |
Novice
Posts: 14
Karma: 10
Join Date: Jun 2013
Device: Kindle Paperwhite
|
Quote:
I may not be understanding you fully, but here are some comments/clarifications: I was under the impression that pre-KF8 kindle formats (.mobi if I'm correct) do support CSS, just not as much CSS as KF8/AZW3. Is this not correct? Also, I intend to build everything (book html, front matter, ToC, NCX, OPF) in HTML by hand using sample skeleton codes and then compiling in KindleGen/KP. Thanks for your assistance! |
|
06-23-2013, 03:15 AM | #4 | |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
For example, a <p> tag in mobi can only have indent and top margin (no side or bottom margins). The indent is given as "width", the top margin is given as "height": <p width=1em height=2em> |
|
06-23-2013, 06:49 AM | #5 |
mostly an observer
Posts: 1,515
Karma: 987654
Join Date: Dec 2012
Device: Kindle
|
I build my books on Sigil with a style sheet (posted online at http://notjohnkdp.blogspot.com -- Dec 23 post, I think it is). I am very pleased with the KDP conversion for Mobi 7 devices, which except for obvious differences like font face follows the KF8 format very closely.
Far be it from me to second-guess Guido, but I would be a bit nervous about overriding most defaults. I do prefer the Mobi 7 paragraph layout (first paragraph indent and no space between paragraphs) to that of the Fire, so I do specify that. |
06-23-2013, 09:04 AM | #6 | |
Wizard
Posts: 1,542
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Code:
* { margin: 0; padding: 0; } http://meyerweb.com/eric/articles/webrev/200006a.html http://reference.sitepoint.com/css/universalselector And is safe to use it. Of course, after that, if you want an item to have margins, you will have to indicate it in your style sheet. Regards Rubén |
|
06-23-2013, 02:53 PM | #7 | |
Novice
Posts: 14
Karma: 10
Join Date: Jun 2013
Device: Kindle Paperwhite
|
Quote:
So it is actually for example the KindleGen that converts the CSS to equivalents in mobi? This brings me to another question. It's probably a quite basic one but I haven't understood yet -- what regulates whether KindleGen will create a KF8 file (AZW3?) or a Mobi file from what I give it to compile? Because if I've understood your comment above correctly, it means that if it does convert it to mobi, all of my CSS will be converted/stripped. I would love to know! Thanks again for your clarifications! |
|
06-23-2013, 03:00 PM | #8 | |
Novice
Posts: 14
Karma: 10
Join Date: Jun 2013
Device: Kindle Paperwhite
|
Quote:
I guess my question is also -- do I want to use it? What's your opinion? It was recommended on a blog guide and it does seem like a good idea if it does indeed create positive results rather than compromise compatibility. But my second question is then: If KindleGen, for example, converts CSS styling (such as the reset) to mobi-equivalents (where they exist), how will such a "style reset" convert over to .mobi? Also, if I as you say might want to have an item with margins, can I override the style reset later in the CSS? I.e. does a following, specified style property override the universal selector? Thanks a lot for your help! |
|
06-23-2013, 03:55 PM | #9 | |||
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
Quote:
Quote:
Code:
* { margin: 0; } p { margin: 1em; } You should probably read some CSS tutorial, it might help you understand how it works. |
|||
06-23-2013, 04:26 PM | #10 | |||
Wizard
Posts: 1,542
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Quote:
1. Styling "in-line": Code:
<p style="margin-left: 1em">... some text ...</p> Here in your css stylesheet you should write something like: Code:
.ml { /* here you can use any name */ margin-left: 1em; } Code:
<p class="ml"> ... some text ... </p> Code:
.ml { margin-left: 1em !important; } Quote:
Regards Rubén |
|||
06-28-2013, 10:50 PM | #11 |
Novice
Posts: 14
Karma: 10
Join Date: Jun 2013
Device: Kindle Paperwhite
|
Jellby and Rubén -- many thanks!
|
06-29-2013, 12:01 AM | #12 |
Resident Curmudgeon
Posts: 73,974
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Why not just do this in body? That makes much more sense and more people will actually understand it if they were to read the CSS.
Code:
body { margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; widows: 0; orphans: 0 } Last edited by JSWolf; 06-29-2013 at 12:05 AM. |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
automatic reset of font size in field "comments"? | Grins | Calibre | 3 | 12-19-2012 03:24 AM |
epub CSS versus "Regular" CSS | konrad | ePub | 4 | 02-18-2011 09:29 AM |
Classic What happens if I "Reset to Factory Defaults" when I have a rooted nook? | chas0039 | Nook Developer's Corner | 0 | 11-26-2010 05:52 PM |
Accessories JAVOedge "Fiber" book-style case. | NogDog | Amazon Kindle | 0 | 07-13-2010 11:23 PM |