08-29-2012, 01:16 PM | #1 |
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 |
Resident Curmudgeon
Posts: 73,983
Karma: 128903378
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 } Code:
.noindent { text-indent: 0 } .spacebreak { margin-top: 2em; text-indent: 0 } 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. |
Advert | |
|
08-29-2012, 04:27 PM | #3 |
Resident Curmudgeon
Posts: 73,983
Karma: 128903378
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, 05:48 PM | #4 |
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-29-2012, 06:35 PM | #5 |
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 } Maybe it's easier to dig right into mobi ... but all I want is some blank lines! |
Advert | |
|
08-29-2012, 06:44 PM | #6 | |
Evangelist
Posts: 480
Karma: 270594
Join Date: Aug 2010
Device: palm tx, Windows7, Galaxy A5
|
Quote:
|
|
08-30-2012, 02:45 AM | #7 | |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
Quote:
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... |
|
08-30-2012, 03:26 AM | #8 | ||
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
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:
|
||
08-31-2012, 08:59 AM | #9 |
Resident Curmudgeon
Posts: 73,983
Karma: 128903378
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 } |
08-31-2012, 03:21 PM | #10 |
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. |
|
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 |