Italic versus oblique

[sgirsberger]

So, I've got this lovely EPUB with all the right spacing and appearance and everything is working beautifully every way the devices turn, except for one weird thing on the iPad in iBooks.

In every instance in which a sans serif font is used, the oblique or slanted version of the font displays as serif italic. I have tried using a span class with a sans serif font-family specified in addition to font-style set as oblique, I've tried setting the font-style to italic, but it ALWAYS displays serif italics. I feel pretty strongly about the sans serif obliques, but I don't know which permutation is going to get me there.

Before you ask, no, there is no font embedding. I spec'd the fonts that are on the iPad -- Seravek, "Gill Sans", sans-serif -- as the font-family, but they're not embedded, and I really don't want to embed them. The publisher wants to keep this as simple as possible.

Any advice on this subject is greatly appreciated! Thanks in advance.

[Toxaris]

Without any coding example of the xhtml and css it will be impossible to help.

[Jellby]

Originally Posted by sgirsberger

I spec'd the fonts that are on the iPad -- Seravek, "Gill Sans", sans-serif -- as the font-family, but they're not embedded, and I really don't want to embed them. The publisher wants to keep this as simple as possible.

Then do not specify any font at all, just generic "serif" and "sans-serif". There's no portable way of referring to device fonts. What you are doing may work in your current iBooks (I guess) version, but it may even break in some other version/reader. (And, after all, you see it's not working in your reader now )

About the italic/slanted issue, what Toxaris says. We need to see exactly the HTML and CSS code. It might be as simple as some stray font-family property being inherited, or it could be an iBooks bug.

[Toxaris]

To be honest, I never tried oblique for a font style, so not sure if it will work in readers. I would not be surprised if it is not generally supported in readers.

[Jellby]

I believe what sgirsberger is that the italic portions appear with the serif italic, instead of sans-serif italic (which is often just slanted/oblique).

[mrmikel]

Have you used this font before to know what it actually contains?

Unfortunately, there is no way to know how complete the font inside the iPad is.

[sgirsberger]

Originally Posted by Toxaris

Without any coding example of the xhtml and css it will be impossible to help.

Absolutely correct. Maybe I should substitute <em> and forget about using bold-obliques?

Examples of the xhtml:

<h4>The <span class="bold-oblique">Power</span> of Fiction</h4>

<p class="Text-Indented">As Kylene has written, “Nonfiction lets us <span class="italic">learn</span> more; fiction lets us <span class="italic">be</span> more.”</p>

Examples of the css for p, h4, and the spans discussed:

p {
-epub-hyphens:auto;
-webkit-hyphens:auto;
color: #000000;
font-family: "Iowan Old Style Roman", Georgia, serif;
font-size: 0.875em;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1.429;
text-align: left;
text-indent: 18px;
}
h4 { /*B Head (text head level1) */
-epub-hyphens: none;
-webkit-hyphens: none;
color: #000000;
font-family: Seravek, "Gill Sans", sans-serif;
font-size: 1.125em;
font-style: normal;
font-variant: normal;
font-weight: bold;
line-height: 1.40625;
margin-bottom: 2px;
margin-left: 0px;
margin-right: 0px;
margin-top: 15px;
text-align: left;
text-indent: 0px;
}
span.italic {
font-style: italic;
font-weight: normal;
font-variant: normal;
}
span.oblique {
font-style: oblique;
font-weight: normal;
font-variant: normal;
}
span.regular {
font-style: normal;
font-weight: normal;
font-variant: normal;
}
span.bold {
font-style: normal;
font-weight: bold;
font-variant: normal;
}
span.bold-italic {
font-style: italic;
font-weight: bold;
font-variant: normal;
}
span.bold-oblique {
font-style: oblique;
font-weight: bold;
font-variant: normal;
}

[sgirsberger]

Originally Posted by mrmikel

Have you used this font before to know what it actually contains?

Unfortunately, there is no way to know how complete the font inside the iPad is.

Actually, you can unpack the fonts from within an iPad. See this article:

http://hints.macworld.com/article.ph...11216055744412

[Jellby]

Originally Posted by sgirsberger

span.italic {
font-style: italic;
font-weight: normal;
font-variant: normal;
}
span.oblique {
font-style: oblique;
font-weight: normal;
font-variant: normal;
}
span.regular {
font-style: normal;
font-weight: normal;
font-variant: normal;
}
span.bold {
font-style: normal;
font-weight: bold;
font-variant: normal;
}
span.bold-italic {
font-style: italic;
font-weight: bold;
font-variant: normal;
}
span.bold-oblique {
font-style: oblique;
font-weight: bold;
font-variant: normal;
}

Agh! That's ugly CSS code. You could just have, if anything:

span.italic {
font-style: italic;
}
span.oblique {
font-style: oblique;
}
span.bold {
font-weight: bold;
}

the properties not defined will be inherited from the container, and you can use more than one class (<span class="italic bold">) if needed.

In any case, note that the ePub spec says:

"Reading Systems need not distinguish italic and oblique from each other."

What happens if you just use italic (or <em>) in that code? As I said, the italic sans-serif, if it exists, is what I think you want.

[Toxaris]

Originally Posted by Jellby

In any case, note that the ePub spec says:

"Reading Systems need not distinguish italic and oblique from each other."

I was too lazy too look it up, but this is what I expected. This or that oblique was not supported. Probably most readers will interpret this as italic, because that is easier. Oblique needs to be calculated in most cases and italic is usually readily available.

Some readers might support it though.

[sgirsberger]

Yes, I know this. : ) Originally generated from InDesign. I haven't excised the excess yet.

I'm going to give <em> a shot. Seems logical.

[sgirsberger]

D'oh! Of course <em> should work! It should apply italics based on the underlying formatting. So, if a heading is bold, defined font-weight: bold; in css, then you're just adding <em> onto that, not doubling up on bold (in theory), with a style that adds bold and italic to the base style.

Too bad it doesn't work like this in layout applications.

[JSWolf]

font-style: oblique

Does that actually work in ADE? Does it work in iBooks?

[Toxaris]

Originally Posted by JSWolf

font-style: oblique

Does that actually work in ADE? Does it work in iBooks?

Jellby looked it up in the specs. It might work, but it is perfectly according to the specs if oblique is displayed as italics.