MobileRead Forums - View Single Post

SigilBear · 06-11-2017, 07:38 PM

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

Code:

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

Code:

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

06-11-2017, 07:38 PM	#1
SigilBear Banned Posts: 244 Karma: 2112680 Join Date: Jan 2017 Device: iBooks	CSS: Spans vs Font Families 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... Code: <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. Code: <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?