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

Go Back   MobileRead Forums > E-Book Formats > Kindle Formats

Notices

Reply
 
Thread Tools Search this Thread
Old 06-22-2013, 11:24 PM   #1
santosha
Novice
santosha began at the beginning.
 
santosha's Avatar
 
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; }
Is it accurate to use something like this?

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
santosha is offline   Reply With Quote
Old 06-22-2013, 11:27 PM   #2
susan_cassidy
Wizard
susan_cassidy ought to be getting tired of karma fortunes by now.susan_cassidy ought to be getting tired of karma fortunes by now.susan_cassidy ought to be getting tired of karma fortunes by now.susan_cassidy ought to be getting tired of karma fortunes by now.susan_cassidy ought to be getting tired of karma fortunes by now.susan_cassidy ought to be getting tired of karma fortunes by now.susan_cassidy ought to be getting tired of karma fortunes by now.susan_cassidy ought to be getting tired of karma fortunes by now.susan_cassidy ought to be getting tired of karma fortunes by now.susan_cassidy ought to be getting tired of karma fortunes by now.susan_cassidy ought to be getting tired of karma fortunes by now.
 
Posts: 1,813
Karma: 1662214
Join Date: Jan 2009
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.
susan_cassidy is offline   Reply With Quote
 
Enthusiast
Old 06-22-2013, 11:31 PM   #3
santosha
Novice
santosha began at the beginning.
 
santosha's Avatar
 
Posts: 14
Karma: 10
Join Date: Jun 2013
Device: Kindle Paperwhite
Quote:
Originally Posted by susan_cassidy View Post
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.
Hi Susan, thanks for your response!

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!
santosha is offline   Reply With Quote
Old 06-23-2013, 03:15 AM   #4
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 5,999
Karma: 4346921
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by santosha View Post
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?
No, it isn't. Pre-KF8 mobi does not support CSS at all. It is only the converter who might recognize some CSS and adapt it to whatever equivalent there might be in mobi.

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>
Jellby is offline   Reply With Quote
Old 06-23-2013, 06:49 AM   #5
Notjohn
Addict
Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.Notjohn ought to be getting tired of karma fortunes by now.
 
Posts: 202
Karma: 246332
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.
Notjohn is offline   Reply With Quote
Old 06-23-2013, 09:04 AM   #6
RbnJrg
Evangelist
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 440
Karma: 299858
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by santosha View Post
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; }
Is it accurate to use something like this?
If you want to remove margins and paddings from all selectors, then you should use the following code instead of the above posted:

Code:
* {
   margin: 0;
   padding: 0;
}
Here you will be using the "universal selector" ( * ):

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
RbnJrg is offline   Reply With Quote
Old 06-23-2013, 02:53 PM   #7
santosha
Novice
santosha began at the beginning.
 
santosha's Avatar
 
Posts: 14
Karma: 10
Join Date: Jun 2013
Device: Kindle Paperwhite
Quote:
Originally Posted by Jellby View Post
No, it isn't. Pre-KF8 mobi does not support CSS at all. It is only the converter who might recognize some CSS and adapt it to whatever equivalent there might be in mobi.

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>
Thanks Jellby!

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!
santosha is offline   Reply With Quote
Old 06-23-2013, 03:00 PM   #8
santosha
Novice
santosha began at the beginning.
 
santosha's Avatar
 
Posts: 14
Karma: 10
Join Date: Jun 2013
Device: Kindle Paperwhite
Quote:
Originally Posted by RbnJrg View Post
If you want to remove margins and paddings from all selectors, then you should use the following code instead of the above posted:

Code:
* {
   margin: 0;
   padding: 0;
}
Here you will be using the "universal selector" ( * ):

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
Thanks Rubén for your input!

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!
santosha is offline   Reply With Quote
Old 06-23-2013, 03:55 PM   #9
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 5,999
Karma: 4346921
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by santosha View Post
what regulates whether KindleGen will create a KF8 file (AZW3?) or a Mobi file from what I give it to compile?
No idea, but I've read that it might create a "dual" mobi file with both the old and new formats included. New devices will read the new format, old devices will read the old one.

Quote:
Originally Posted by santosha View Post
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?
If it converts it, it would probably add "height=0" to every <p>, <div> and <blockquote>, for example.

Quote:
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?
With CSS yes, there are precedence rules based, for instance, on specificity. This means that a more specific style can override a less specific one. In this case:

Code:
* { margin: 0; }
p { margin: 1em; }
the "p" rule is more specific, because it has a tag name, while the universal "*" rule has none. No matter the order of the styles, the "p" will always prevail (in compliant interpreters).

You should probably read some CSS tutorial, it might help you understand how it works.
Jellby is offline   Reply With Quote
Old 06-23-2013, 04:26 PM   #10
RbnJrg
Evangelist
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 440
Karma: 299858
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by santosha View Post
Thanks Rubén for your input!

I guess my question is also -- do I want to use it? What's your opinion?
I don't use it The default margins and paddings are ok for me. But if you do it, is not an error.

Quote:

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?
If you use the universal selector to reset margins and paddings, and later, for example, you want a particular <p> tag with margins, you have to indicate it; that will override what you do with the universal selector but only for the class or the particular tag. Suppose you want a <p> with a margin-left of 1em, then you have two ways:

1. Styling "in-line":

Code:
<p style="margin-left: 1em">... some text ...</p>
2. Styling with a css stylesheet and a class:

Here in your css stylesheet you should write something like:

Code:
.ml {  /* here you can use any name */
   margin-left: 1em;
}
And in your .html page you write:

Code:
<p class="ml"> ... some text ... </p>
Of course, the second way is preferable because you can use that class with any <p>, <div>, etc. where you want a left margin of 1em. Those definitions, have priority over what you defined first with the universal selector. However, if you want to be more sure about the priority of a style, always you can use the property "!important" of that way:

Code:
.ml {
   margin-left: 1em !important;
}
But you won't need it (at least, in the cases I cited above).

Quote:
...what regulates whether KindleGen will create a KF8 file (AZW3?) or a Mobi file from what I give it to compile?...
Kindlegen will generate a book compatible for both .kf8 and .mobi (in a same book, there are two versions, one for .kf8 and another for .mobi). Of that way, if you reader is a modern one, then will read the .kf8 part of the book; on the other hand, is your reader is an old one, then will read the .mobi part of the book.

Regards
Rubén
RbnJrg is offline   Reply With Quote
Old 06-28-2013, 10:50 PM   #11
santosha
Novice
santosha began at the beginning.
 
santosha's Avatar
 
Posts: 14
Karma: 10
Join Date: Jun 2013
Device: Kindle Paperwhite
Jellby and Rubén -- many thanks!
santosha is offline   Reply With Quote
Old 06-29-2013, 12:01 AM   #12
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 36,215
Karma: 17169472
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
Quote:
Originally Posted by RbnJrg View Post
Code:
* {
   margin: 0;
   padding: 0;
}
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
}
I don't like widows and orphans so I turn them off. Also, I prefer the margins drawn out then in the one line. As for padding, I've never seen a reason to set it to any value unless you actually need a specific value.

Last edited by JSWolf; 06-29-2013 at 12:05 AM.
JSWolf 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
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


All times are GMT -4. The time now is 05:15 AM.


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