11-25-2012, 10:59 PM | #1 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977896
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
CSS - How big is TOO big?
When I've converted books, the CSS usually ends up with 30 - 40 items (those books have illustrations, drop-caps, quoted letters & publications, embedded fonts, and sometimes tables).
My current project already has over 90 CSS items (lots of short stories with lots of different layout needs), and likely to increase. Should this be a concern? Ought I to start finding ways to pare it down? Am I worrying for no reason at all? |
11-26-2012, 06:29 AM | #2 |
Connoisseur
Posts: 70
Karma: 515184
Join Date: Sep 2011
Location: Brasília
Device: Kindle3, iPad, Nook, Kobo, Positivo Alfa
|
I think performance should always be a concern. eReaders generally aren't really powerful machines. A tidy CSS is desirable, for sure, but you should verify the size of your HTML files too. If they are too big, performance will suffer a lot.
To achieve maximum performance, it helps to optimize your code with tools like HTML Compressor, CleanCSS, or Helium. |
Advert | |
|
11-26-2012, 07:21 AM | #3 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977896
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
So far I have always worked with Sigil (code the tags in Notepad++ first because I customized the syntax coloring, using a lot of autohotkey scripting for auto-typing).
I always make a separate file for each chapter / story, so that keeps the file size down. I will give those tools a try and see what happens. Thanks for the suggestions. What I also need to find out is if there is a recommended maximum number of classes in a CSS. One thing that is a contradicting issue is that everyone says "don't use empty paragraphs with nbsp;, style a div or a paragraph to make a larger top margin." But maybe I only need that style one time, and further down the page I need a different one-time style, etc. And before I know it, I have a dozen styles with one-time use. (well, not all for top margins, but just in general). Any advice for that scenario? |
11-26-2012, 08:21 AM | #4 | |
Evangelist
Posts: 450
Karma: 343115
Join Date: Nov 2009
Location: Romania
Device: PW2 2014
|
Quote:
Personally, I don't think even the weakest e-reader will have problems with a long CSS file, because it's only loaded when the chapter (the HTML or XHTML file) is loaded, not on each page turn. It can affect page turn only if the chapter is really long (over 300 KB), or chuck full of images. But this is entirely dependant on the e-reader. Some of them pre-cache the next file. Last edited by DSpider; 11-29-2012 at 01:52 PM. |
|
11-26-2012, 08:39 AM | #5 |
Grand Sorcerer
Posts: 27,546
Karma: 193191846
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Make classes for common scenarios (top margins, left margins, italics, etc...) and then stack them with other classes as necessary (elements can have more than one class). Or make judicious use of the '+' CSS operator to handle special situations rather than creating a ton of classes that only get used once.
|
Advert | |
|
11-26-2012, 08:41 AM | #6 |
Connoisseur
Posts: 70
Karma: 515184
Join Date: Sep 2011
Location: Brasília
Device: Kindle3, iPad, Nook, Kobo, Positivo Alfa
|
Regarding the use of empty paragraphs: it's good practice to remove them because this separates presentation from structure in your content, and keeps everything related to visual presentation in one place – your CSS. Also, that empty line could be interpreted by screen readers like JAWS, which can be used to read aloud ePUB content in Adobe Digital Editions.
|
11-26-2012, 10:31 AM | #7 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977896
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
@DSpider, I do use a master CSS, but this one is getting bigger than I have been used to, and getting hard to remember and use the different bits. I used to try doing individual CSS on each file, but it was so much hassle to edit.
@DiapDealer, I have recently started to use the "+" operator, but I'm not too well-versed on stacking. I've copied some from the gurus' books in the library, and adapted them for my own use, but don't really have a handle on how it works. Do you have a recommendation for a link with tutorial or more information? @PageLab - I"m trying to be a good little granny and not use empty paragraphs, but golly, they are so tempting sometimes. So far, I've resisted. Thanks guys, for the input. Much appreciated. Last edited by GrannyGrump; 11-26-2012 at 10:47 AM. |
11-29-2012, 08:45 AM | #8 |
Connoisseur
Posts: 80
Karma: 1023042
Join Date: Nov 2011
Device: Kobo Touch, iPad
|
We can do that!?!?!?!?!
THANKS A LOT for opening my eyes. This is really helpful for my project right now! Last edited by Ti-Ron; 11-29-2012 at 10:12 AM. |
11-29-2012, 01:51 PM | #9 |
Evangelist
Posts: 450
Karma: 343115
Join Date: Nov 2009
Location: Romania
Device: PW2 2014
|
Of course. Just define them in the HTML/XHTML file before the <body> tag.
For example: Code:
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Chapter-5.html</title> <link href="../Styles/template_5.css" rel="stylesheet" type="text/css" /> </head> <body> ... |
11-29-2012, 02:10 PM | #10 |
Connoisseur
Posts: 80
Karma: 1023042
Join Date: Nov 2011
Device: Kobo Touch, iPad
|
Now that I see it, it's as clear as water, but I didn't think of this solution before!!!!
Thanks for the head's up! |
11-30-2012, 10:40 AM | #11 |
Well trained by Cats
Posts: 29,779
Karma: 54830978
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
You can also use more than 1 in the same document:
Code:
<head> <title>Chapter-5.html</title> <link href="../Styles/standard.css" rel="stylesheet" type="text/css" /> <link href="../Styles/template_5.css" rel="stylesheet" type="text/css" /> </head> and template 5 is the additional styles needed for this document. IIRC if a selector duplicates previously defined one (in standard), the last style found is used, so you could even override 'standard' |
11-30-2012, 11:57 AM | #12 |
Connoisseur
Posts: 80
Karma: 1023042
Join Date: Nov 2011
Device: Kobo Touch, iPad
|
Woah, there's a world of possibility!
I know, I know I'm only an ePub Padawan! "A lot to learn, I have." |
12-08-2012, 05:43 AM | #13 |
Wizard
Posts: 1,496
Karma: 11250344
Join Date: Aug 2010
Location: NE Oregon
Device: Kobo Sage, Forma, Kindle Oasis 2, Sony PRS-T2
|
I think I just learned something too! I was also concerned about my CSS getting too long, but adding stylesheets for specific chapters had not occurred to me. World of possibilities indeed!
|
12-08-2012, 06:45 AM | #14 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
It occurs to me that splitting them up could help the e-readers processing a little. It could keep it from having to process/store a lot of extraneous material that doesn't apply to a particular chapter.
|
12-08-2012, 12:25 PM | #15 |
Guru
Posts: 878
Karma: 2457540
Join Date: Nov 2011
Device: none
|
You can always use inline style code for one-off formatting requirements.
But DON'T GET COMPLICATED! If your book is going to be any use, it must work on a range of devices. For instance, the Nexus 7 is becoming very popular. A commonly-chosen eBook reader for it, Aldiko, seems to ignore quite a lot of stylesheet instructions. It's often best to simply pour in your text, surround it by <p> tags, and let the device decide how it displays. |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Why did the Big Publishing Houses get so big? | fjtorres | General Discussions | 25 | 11-13-2012 12:15 PM |
Willing to answer questions of publishing - small press, big-six, and big-six. | MichaelSullivan | Writers' Corner | 31 | 08-21-2012 04:10 PM |
Saying Hi and also a big thank you! | paratwa | Introduce Yourself | 5 | 05-10-2011 12:32 AM |
Hi from Big D | bthurman | Introduce Yourself | 5 | 01-08-2010 08:13 AM |
big hello and big hug | dongdongliushui | Introduce Yourself | 5 | 07-16-2009 02:44 PM |