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.

JSWolf · 08-29-2012, 04:22 PM

Let's start off with the two most important styles in the CSS...

Code:

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...

Code:

.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...

Code:

@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...

Code:

.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>.

Code:

.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

Quote:

Originally Posted by DaleDe

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

Quote:

Originally Posted by travger

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

Quote:

Originally Posted by travger

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]

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

Code:

.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.

08-29-2012, 01:16 PM	#1
travger Evangelist Posts: 480 Karma: 270594 Join Date: Aug 2010 Device: palm tx, Windows7, Galaxy A5	How much can I delete from css? 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.

08-29-2012, 04:22 PM	#2
JSWolf Resident Curmudgeon Posts: 73,845 Karma: 128597114 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Let's start off with the two most important styles in the CSS... Code: 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... Code: .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... Code: @page { margin-top: 7pt; margin-left: 7pt; margin-right: 7pt; margin-bottom: 0 } Last edited by JSWolf; 08-29-2012 at 04:25 PM.

08-29-2012, 04:27 PM	#3
JSWolf Resident Curmudgeon Posts: 73,845 Karma: 128597114 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Your p1 can be cleaned up to be... Code: .p1 { margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; text-align: justify; text-indent: 1.2em } Last edited by JSWolf; 08-31-2012 at 08:57 AM.

08-29-2012, 06:35 PM	#5
travger Evangelist Posts: 480 Karma: 270594 Join Date: Aug 2010 Device: palm tx, Windows7, Galaxy A5	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>. Code: .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!

08-31-2012, 08:59 AM	#9
JSWolf Resident Curmudgeon Posts: 73,845 Karma: 128597114 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	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 Code: .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.

08-29-2012, 05:48 PM	#4
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	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

08-31-2012, 03:21 PM	#10
travger Evangelist Posts: 480 Karma: 270594 Join Date: Aug 2010 Device: palm tx, Windows7, Galaxy A5	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.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Override ePub CSS with userStyle.css?	barium	Sony Reader Dev Corner	11	07-16-2011 03:25 PM
CSS Help Please	Japes	Calibre	21	06-23-2011 05:05 PM
epub CSS versus "Regular" CSS	konrad	ePub	4	02-18-2011 09:29 AM
css pseudo elements and adjacent combinators in extra css?	ldolse	Calibre	2	12-21-2010 05:09 PM
Delete files in PC not equal to delete in Sony reader 505	sheilalayoli	Sony Reader	5	07-12-2009 03:13 PM