View Full Version : Conditional CSS rules


Jellby
01-18-2009, 02:53 PM
Hi all,

Today I uploaded my first epub file with embedded fonts (http://www.mobileread.com/forums/showthread.php?t=34347), and while I think it works fine, there are some things I miss.

I wanted the code for using the embedded fonts in the CSS to something like an add-on, something that could be activated or deactivated, like a line that could be commented out. I arrived at a not so satisfying solution: Use an "@import" statement at the beginning of the standard .css file (it has to be at the beginning) directing to an auxiliary file and tag the rules in this auxiliary file with "!important", so that they override the rules in the standard one. I could have added a "<link>" in each file's "<head>" instead, but that would mean modifying the file for every chapter.

The other problem is that I would like to apply some modifications (font size, margins... defined in the auxiliary .css) only if the embedded font is being used, and use the normal parameters in the normal .css otherwise. If a system does not support embedded fonts or if the user somehow disables it, I don't want the books to use settings "optimized" for a font that's not being used.

Any thoughts on how this could be improved (if possible)?

llasram
01-18-2009, 04:00 PM
I arrived at a not so satisfying solution: Use an "@import" statement at the beginning of the standard .css file (it has to be at the beginning) directing to an auxiliary file and tag the rules in this auxiliary file with "!important", so that they override the rules in the standard one. I could have added a "<link>" in each file's "<head>" instead, but that would mean modifying the file for every chapter.

I didn't scientifically verify it, but when I was hand-creating EPUBs it appeared that ADE rendered books which used CSS @import statements visibly more slowly than just <link/>ing each stylesheet directly from the markup. If you're planning to use @import statements, you may want to confirm whether or not that is in fact the case. (My guess is that it causes an extra trip through through the archive-reading layer, because the renderer doesn't know it needs until it starts to parse the CSS.)

brewt
01-18-2009, 07:56 PM
Left top side = Calibre, which doesn't seem to have too much on the embedded font front. Hyperlinking, and most styling considerations work well. Limited user-defined font support, at the font-family level.
Right top side = Sony Ebook Library Viewer, which is similar to ADE and a real Reader. No back button, so limited hyperlink support. Embedded fontiness=go, baby, go. Some known issues/bugs with css support.
Left Bottom = Stanza. No Fonts, no graphics, no hyperlinks.
Right Bottom = FB Reader. No Embedded fonts. Hyperlinks, user-defined fonts, if your style name match theirs.

The current state of viewing software (not to mention the epub standard) has no scripting support, so allowing for differences (like in real browsers) in softwares that don't support even some advanced features is, uh, ambitious (as of today, anyway).

-bjc

............Overusing parentheses again. Heller is my hero....

kovidgoyal
01-18-2009, 09:05 PM
You can get the embedded fonts to work in the calibre viewer as well, provided you use the same font family name int the @font rule as the actual font family name in the TTF file.

Jellby
01-19-2009, 04:52 AM
You can get the embedded fonts to work in the calibre viewer as well, provided you use the same font family name int the @font rule as the actual font family name in the TTF file.

Really? I think I did that... don't you need to have the font installed for that to work?

kovidgoyal
01-19-2009, 01:24 PM
No, calibre reads the font from the epub file and uses it to render the text.

Jellby
01-19-2009, 01:32 PM
Well, as far as I know I used the same family name as in the file. In fact, my Opera version does not seem to support embedded fonts, but if I install the font files it picks the right font. Maybe I'd need to specify other font properties in the "@font-face" section? Or maybe Brewt is using an older Calibre version?

kovidgoyal
01-19-2009, 01:57 PM
remove the quotes from the path to the font file and it will work fine. (quotes will be supported in the next release)

brewt
01-19-2009, 07:31 PM
Or maybe Brewt is using an older Calibre version?

Version 0.4.128 (15 Jan, 2009)

Ach, how old fashioned of me.......:o

-bjc

btw - TPATP looked fabulous......

Jellby
01-20-2009, 05:22 AM
remove the quotes from the path to the font file and it will work fine. (quotes will be supported in the next release)

Good to know.

Just to be on the safe side, I'm not breaking any specification by using quotes, am I?

llasram
01-20-2009, 09:32 AM
Good to know.

Just to be on the safe side, I'm not breaking any specification by using quotes, am I?

Not that I know of. The CSS 2.1 spec has this, and OPS just references the CSS specs:

The format of a URI value is 'url(' followed by optional whitespace followed by an optional single quote (') or double quote (") character followed by the URI itself, followed by an optional single quote (') or double quote (") character followed by optional whitespace followed by ')'. The two quote characters must be the same.