View Full Version : CSS - How big is TOO big?


GrannyGrump
11-25-2012, 10:59 PM
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? :o

PageLab
11-26-2012, 06:29 AM
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 (http://htmlcompressor.com/compressor.html), CleanCSS (http://www.cleancss.com/), or Helium (https://github.com/geuis/helium-css).

GrannyGrump
11-26-2012, 07:21 AM
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?

DSpider
11-26-2012, 08:21 AM
I have a dozen styles with one-time use. (well, not all for top margins, but just in general). Any advice for that scenario?

Either style them with a master CSS file, or with multiple CSS files, one per each chapter.

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.

DiapDealer
11-26-2012, 08:39 AM
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?
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.

PageLab
11-26-2012, 08:41 AM
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.

GrannyGrump
11-26-2012, 10:31 AM
@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.

Ti-Ron
11-29-2012, 08:45 AM
(...) with multiple CSS files, one per each chapter.

We can do that!?!?!?!?! :eek:

THANKS A LOT for opening my eyes. This is really helpful for my project right now! :thanks:

DSpider
11-29-2012, 01:51 PM
Of course. Just define them in the HTML/XHTML file before the <body> tag.

For example:

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

Ti-Ron
11-29-2012, 02:10 PM
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!

theducks
11-30-2012, 10:40 AM
You can also use more than 1 in the same document:
<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>

'standard' is the general' css
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'

Ti-Ron
11-30-2012, 11:57 AM
Woah, there's a world of possibility!

I know, I know I'm only an ePub Padawan! "A lot to learn, I have."

graycyn
12-08-2012, 05:43 AM
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!

mrmikel
12-08-2012, 06:45 AM
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.

exaltedwombat
12-08-2012, 12:25 PM
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.

mrmikel
12-08-2012, 12:41 PM
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.

I think this may speak to which tags and css to use. If it is critical and will look bad without it, do it another way. If it is merely nice and can get ignored, why not put it in for those readers that can use it.

The catch is the now seemingly infinite number of readers and the lack of preview software for every single one of them (like grains of sand on the seashore!)

GrannyGrump
12-10-2012, 04:32 AM
Responses to this thread have inspired me. I am going to try to split my CSS, and also to pare down the styles that are way too similar to each other, and can probably be combined into a single style.

I do agree that simpler is often better, but this project got out of control (I've been digging up different bits and pieces from a dozen different sources, and I should have waited till I had ALL my source material in simple text BEFORE I started working it.) I had way too many brainstorms along the way!

Glad to hear from all of you, great advice from everybody! Thanks.

exaltedwombat
12-14-2012, 06:09 AM
The catch is the now seemingly infinite number of readers and the lack of preview software for every single one of them (like grains of sand on the seashore!)

And that preview software, when available, sometimes doesn't accurately emulate layout on the physical device anyway!

If portability is required, the only thing you can realistically do is simply pour the text in. Let the reader determine how to treat paragraph breaks, whether to justify, serif or sans-serif.

This, however, doesn't seem to be what the market wants :-) Having enjoyed themselves agonising over niceties of layout in a printed edition, "take what you get" isn't what authors want to hear.

GrannyGrump
12-17-2012, 12:48 AM
If portability is required, the only thing you can realistically do is simply pour the text in. Let the reader determine how to treat paragraph breaks, whether to justify, serif or sans-serif.

I agree in principal, but oh! part of the enjoyment for me in re-habbing public domain books is to give them some fancy chapter heads, formatted quotations, etc. I do feel, as do many, that the main body text should be left up to the reader, but is there any harm really in specifying a fancy font just for chapter titles? Otherwise, we all might as well just load up Project Gutenberg plain-text...

'Twould be nice if there were a way to offer *all* readers an option to use the publisher version or their own preference, that was actually *easy to use*.

mrmikel
12-17-2012, 06:30 AM
Since are doing this, as am I, because you enjoy it and wish to provide something useful, you might as well suit yourself.(Strains of Ricky Nelson song....).

Most of what you do with work on most devices, so why not? It will be a learning experience. It will benefit you and it may benefit others who take a look at your work and see how the magic is accomplished. (I am the Mighty Oz!) (grin)

graycyn
12-17-2012, 04:41 PM
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.

I've been testing some of my epubs in Aldiko, and I have generally not seen a problem with my styling being ignored. I did have to enable an option to use publisher styling though, I think that was off by default if I remember right.

Aldiko, Bluefire, Mantano, Nook, Sony and Overdrive (no particular order) seemed to be the apps that did the best job of rendering my epubs as I have styled them.

Moon+, FBReader, Cool Reader, Fabrik and Kobo were not so good. The books are readable, just don't look as nice.

It's definitely a mixed bag of experiences!

graycyn
12-17-2012, 04:49 PM
I gave splitting up my stylesheet a try last night, I like this! It seems to work nicely. I put the text of the book as the main stylesheet, then created another stylesheet for pages that may get styled a little differently, like title page, preface, dedication, contents, copyright and so forth.

For a single chapter that needed extra styling, I added a specific stylesheet just for that chapter.