View Full Version : How much can I delete from css?


travger
08-29-2012, 01:16 PM
My main goal is to get nicer mobi out of this epub, but I scrolled and scrolled through the css with it's .p-s and suspicion arose that I don't need them all. Especially as they are all like that (this is most common in-the-middle-of-chapter paragraph):

.p1 {
display: block;
font-family: Times;
font-size: 0.70588em;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1.2;
margin-bottom: 2px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
text-align: justify;
text-indent: 1.25%
}

I started to dabble with html only little time ago, so please forgive if it's trivial question.

Why must every paragraph be block?
Font-family - doesn't reader have it's own settings? I personally prefer uniform font in the books I read (Can't have Times :( ).
Same for size.
Style, variant, weight - won't they be reader's settings?
line-height - again reader's default?
margin-bottom: 2px - I'm not sure if mobi recognizes it
margin-left - reader's settings?
margin-right - reader's settings?
text-align: justify - reader's settings?

I would delete most and leave it like that:

.p1 {
margin-bottom: 2px;
margin-top: 0;
text-indent: 1.25%
}

What bad results could happen?


I don't understand the use of block in the paragraph of the book, and why so much constrictions have to be in the css for ordinary text.
Now at least I see why mobi is so bulky - all this crap is converted to inline for every single paragraph. :eek:

JSWolf
08-29-2012, 04:22 PM
Let's start off with the two most important styles in the CSS...

body {
widows: 0;
orphans: 0;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify
}
p {
margin-top: 0;
margin-bottom: 0;
text-align: justify;
text-indent: 1.2em
}

Now for some other very useful styles...

.noindent {
text-indent: 0
}
.spacebreak {
margin-top: 2em;
text-indent: 0
}

noindent is for when you want a paragraph to start without an indent.
spacebreak is for section breaks.

These 4 styles will cover most of what you need in an eBook.

If you want margins, my suggestion is to leave the margins in the styles at 0 and use an @page to set margins such as...

@page {
margin-top: 7pt;
margin-left: 7pt;
margin-right: 7pt;
margin-bottom: 0
}

JSWolf
08-29-2012, 04:27 PM
Your p1 can be cleaned up to be...

.p1 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
text-align: justify;
text-indent: 1.2em
}

DaleDe
08-29-2012, 05:48 PM
If you are converting to mobi the extraneous CSS likely doesn't matter at all. MOBI does not support CSS anyway and it will all be removed. Some of the CSS elements will be converted to MOBI style HTML by KindleGen and thus preserved in a fashion. The rest will be ignored.

Dale

travger
08-29-2012, 06:35 PM
Thank you, it's quite a bit less.

Meanwhile I experimented a bit - copied some .p-s in css and named them .p51, .p52, deleted some lines in them. Then I took a chapter and changed some respective paragraphs into p51, p52 and started to play around with my new p-s.

Now, p51 is subheading and p52 is first paragraph (indent=0). In mobi there is no space between them, so I tried <br/> and got too much space - not one blank row like I expected. (Obviously margin-top:2em in css did not register in mobi)

Tried <p class="p52" height="200%"> - ok, got blank space. Wanted little bit more - and found that I can't change it. <p class="p52"> looks exactly the same as <p class="p52" height="900%">

Spent half a day experimenting and trying to figure out what is hijacking my margins, at last noticed <body class="calibre">. Always before had <body>.

.calibre {
display: block;
font-size: 1.41667em;
line-height: 1.2;
margin-bottom: 0;
margin-left: 5pt;
margin-right: 5pt;
margin-top: 0;
padding-left: 0;
padding-right: 0
}

Only I can't understand how it's possible, every other code comes after it and should take precedence.

Maybe it's easier to dig right into mobi ... but all I want is some blank lines!

travger
08-29-2012, 06:44 PM
If you are converting to mobi the extraneous CSS likely doesn't matter at all. MOBI does not support CSS anyway and it will all be removed. Some of the CSS elements will be converted to MOBI style HTML by KindleGen and thus preserved in a fashion. The rest will be ignored.

Dale

I know that mobi doesn't support css, I was just curious of how much I can get rid of without hurting epub. But if it doesn't hurt, then why is it there at all?

Toxaris
08-30-2012, 02:45 AM
I know that mobi doesn't support css, I was just curious of how much I can get rid of without hurting epub. But if it doesn't hurt, then why is it there at all?

That is easy enough to answer. Choice your poison:
1. Not everybody knows what they are doing.
2. Result of a 'generating' program, hence a lot of recurring redundant code.
3. Usage of a default stylesheet for every book without cleaning up unused code

Usually it is a combination of all 3...

Jellby
08-30-2012, 03:26 AM
Especially as they are all like that (this is most common in-the-middle-of-chapter paragraph):

.p1 {
display: block;
font-family: Times;
font-size: 0.70588em;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1.2;
margin-bottom: 2px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
text-align: justify;
text-indent: 1.25%
}

I started to dabble with html only little time ago, so please forgive if it's trivial question.

Why must every paragraph be block?
Font-family - doesn't reader have it's own settings? I personally prefer uniform font in the books I read (Can't have Times :( ).
Same for size.
Style, variant, weight - won't they be reader's settings?
line-height - again reader's default?
margin-bottom: 2px - I'm not sure if mobi recognizes it
margin-left - reader's settings?
margin-right - reader's settings?
text-align: justify - reader's settings?

Note that the style is for ".p1", that is, everything with class="p1", not just paragraphs. When deciding what to remove and what to leave there, you must take into account inheritance and usage.

For example, "display: block" is pretty useless if class="p1" is only applied to <p> tags, since paragraphs are already block-level by default, but if there's a <span class="p1">, it may be needed. "font-style: normal" is probably useless too... but maybe the generic "p" style (which would apply to all <p> tags, with or without class) is defined with "font-style: italic", or maybe <p class="p1"> paragraphs are used inside a <div> defined as italic...

Then there are some things that should not be hard-coded, but left to the reader to choose, like font family and size, justification, etc.[/quote]

I would delete most and leave it like that:

.p1 {
margin-bottom: 2px;
margin-top: 0;
text-indent: 1.25%
}

If that's the normal vanilla text paragraph, that's OK. But mixing vertical spacing and indent is not a very good idea, and I'd prefer a larger indent (1-1.5 em). What's more, if you plan is converting this to mobi, just remove it, leave is as default (even for ePub that would be best, if the reading application allows setting default styles).

JSWolf
08-31-2012, 08:59 AM
Actually, it might not be OK. We don't know if the XML uses <div> or <p> and if it does use <p>, is <p> defined?

It's best to go with

.p1 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
text-align: justify;
text-indent: 1.2em
}

If this is the class for most paragraphs.

travger
08-31-2012, 03:21 PM
Thank you for the responses!
My apologies for posting in the wrong forum; just that there was so much talk about code (real treasure-trove!) in Sigil ...

There's not a single <div> in the whole book, <div class=...> is used only as in <div class="calibre3" id="calibre_pb_9"></div>, right after <body...> tag.

<p> is used only for the title page.

<span class= occurs in only one file, and it needs nicer layout anyway.

I thought about wrapping <h> tags around headings, but there's already very nice working toc in place (and I even managed to add some items into it!).


BTW, I very firmly detest spaced paragraphs. And when I'm reading on my PDA, even 2em indent is too big.