Conditional CSS rules

Jellby · 01-18-2009, 02:53 PM

Hi all,

Today I uploaded my first epub file with embedded fonts, 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

Quote:

Originally Posted by Jellby

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

Quote:

Originally Posted by kovidgoyal

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

Quote:

Originally Posted by Jellby

Or maybe Brewt is using an older Calibre version?

Version 0.4.128 (15 Jan, 2009)

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

-bjc

btw - TPATP looked fabulous......

Jellby · 01-20-2009, 05:22 AM

Quote:

Originally Posted by kovidgoyal

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

Quote:

Originally Posted by Jellby

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:

Quote:

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.

01-18-2009, 02:53 PM	#1
Jellby frumious Bandersnatch Posts: 7,536 Karma: 19000001 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Conditional CSS rules Hi all, Today I uploaded my first epub file with embedded fonts, 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)?

01-18-2009, 07:56 PM	#3
brewt Boo-Frickety-Hoo-Erizer Posts: 251 Karma: 686 Join Date: Oct 2007 Device: Kobo Glo HD!	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.... Attached Thumbnails

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
The Rules Of Engagement	indie	Reading Recommendations	3	09-12-2010 08:52 PM
This Site RULES!	Drezin	News	3	12-31-2008 11:10 AM
@page rules	mtravellerh	Calibre	1	12-28-2008 06:01 PM
Rules	Alexander Turcic	Flea Market	0	05-13-2008 04:35 AM

01-18-2009, 09:05 PM	#4
kovidgoyal creator of calibre Posts: 44,546 Karma: 24495948 Join Date: Oct 2006 Location: Mumbai, India Device: Various	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.

01-19-2009, 01:24 PM	#6
kovidgoyal creator of calibre Posts: 44,546 Karma: 24495948 Join Date: Oct 2006 Location: Mumbai, India Device: Various	No, calibre reads the font from the epub file and uses it to render the text.

01-19-2009, 01:32 PM	#7
Jellby frumious Bandersnatch Posts: 7,536 Karma: 19000001 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	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?

01-19-2009, 01:57 PM	#8
kovidgoyal creator of calibre Posts: 44,546 Karma: 24495948 Join Date: Oct 2006 Location: Mumbai, India Device: Various	remove the quotes from the path to the font file and it will work fine. (quotes will be supported in the next release)

Advert

Advert