CSS: Spans vs Font Families

[SigilBear]

I'm using Sigil to create epubs and iBooks primarily to preview them, and I have a recurring CSS problem that's driving me nuts. I'm not really sure if it's just a problem with spans or with a variety of nested elements, but here goes...

Imagine a div that has a CSS style specifying font families, either inline or in an attacked style sheet...

    <div style="font-family: Arial, Verdana, sans-serif; font-size: 75%;">Text</div>

If I put a span inside that div, it may or may not inherit the div's CSS properties. Most of the time, I think it inherits all the properties EXCEPT font families. If I give the span its own CSS rule, it still doesn't work. In the following example, all the text is relatively small (75%), as it should be, and the text in the span is red. But the text in the span has serifs, when it should look the same as the text surrounding it.

    <div style="font-family: Arial, Verdana, sans-serif; font-size: 75%;">Text <span style="font-family: Arial, Verdana, sans-serif; color: #f00;">Red Text</span></div>

I've tried various combinations of inline styles vs style sheets. It seems to be some kind of bug, because sometimes the text inside a certain element will look OK on one page, but the same combination of classes and styles doesn't work on the next page.

Things usually look OK in Sigil, but when I open my project in iBooks, the errors appear.

I should add that I haven't installed any fonts in my epub. About all I'm using are Arial and Verdana, which are installed in my computer and presumably in most people's computers.

Have any of you had a similar problem?

[Dr. Drib]

Now moved out of the Writers' Forum and to the Sigil Forum.

The Writers' forum is not for technical programming issues or programming code.


Don
(Moderator)

[DiapDealer]

Nothing Sigil specific, here. Moving to the EPUB forum.

[fbrzvnrnd]

I see it right in ADE too. I think the problem is related to Ibooks and its way to handle embedded font. Try to add the configuration file in META-INF folder.

[Dr. Drib]

Originally Posted by DiapDealer

Nothing Sigil specific, here. Moving to the EPUB forum.

Thanks, Doug.

It certainly didn't belong in the Writers' Forum!

[JSWolf]

The problem is that the ePub is picking up the fonts from your system. You have to embed the fonts in the epub for it to work properly and all that garbage you have in the XHTML should be in the CSS as a class.

And there is an XML file you need to put in the ePub (and correctly configured) so iBooks will display embedded fonts. You'll have to look up what that file is, how to write it, and where to put it.

If this book is going to be sold, you'll need to have a license for the fonts you want to embed.

[SigilBear]

Originally Posted by JSWolf

The problem is that the ePub is picking up the fonts from your system.

Ah, that may be the solution. Thanks.

[SigilBear]

I Googled for more information and found an interesting suggestion: Instead of specifying fonts, just make a class like this...

.Class { font-family: sans-serif; }

Then let Kindle, iBooks or whatever use its sans-serif default font. I tried it, and it didn't fix the span issue I described in iBooks. But is this a scheme that works with Kindle or iBooks in general?

[Turtle91]

You should use classes and CSS to style your files. Inline or embedded styling should be kept to a minimum.

As far as using a device's default fonts - or specifying any font for that matter - IMO you should avoid defining fonts at all. Let the user determine what font they wish to read in via their own device settings. Only if the font is very specific and helps tell the story should it be defined in the CSS - and then it is safest to embed the font in the ePub to ensure that it is used on the widest number of devices possible.

Of course, there are some devices that just don't play well with fonts (and other standards) - you will just need to accommodate them if you must sell on that platform.

[theducks]

The WHY

When you put it inline, then change your mind. you need to touch ALL those places.
When you use a stylesheet: there is only 1 place to mess up

[Doitsu]

Originally Posted by SigilBear

Then let Kindle, iBooks or whatever use its sans-serif default font. I tried it, and it didn't fix the span issue I described in iBooks. But is this a scheme that works with Kindle or iBooks in general?

Have you tried adding a com.apple.ibooks.display-options.xml file in your META-INF folder?

(You can use DiapDealer's AddiBooksXML Sigil plugin to add this .xml file.)

[Hitch]

Originally Posted by Doitsu

Have you tried adding a com.apple.ibooks.display-options.xml file in your META-INF folder?

(You can use DiapDealer's AddiBooksXML Sigil plugin to add this .xml file.)

Doits:

If memory serves, that file isn't needed any longer, BUT, if the OP is viewing this with a first-gen iPad, he might still have issues without it.

FWIW.

Hitch

[JSWolf]

Originally Posted by Hitch

Doits:

If memory serves, that file isn't needed any longer, BUT, if the OP is viewing this with a first-gen iPad, he might still have issues without it.

FWIW.

Hitch

What version iOS did this go away?

[Hitch]

Originally Posted by JSWolf

What version iOS did this go away?

I don't recall, Wolfie. I think it was the 2nd gen, but one of the Mac guys here will remember better than I. But I know it hasn't been needed for at least 3 years, maybe even 4-5. :-)

Hitch

[SigilBear]

Originally Posted by Turtle91

As far as using a device's default fonts - or specifying any font for that matter - IMO you should avoid defining fonts at all. Let the user determine what font they wish to read in via their own device settings.

In other words, it would then indeed be OK to use this in my style sheets:

.Class { font-family: sans-serif; }

That would certainly make life easier. My first epub doesn't use any special fonts, though my second one will.

Thanks.