Drop caps in different font

[vr8ce]

I have a book with multiple embedded fonts. I'm trying to use a different font for a drop cap than the text font. To do so, I created a .dropcap style that specifics the font family, etc.

The calibre editor and book reader both display the drop cap in the correct font.
Neither iBooks on the Mac or iPad do; they display the drop cap at the correct size and placement, but in the body font, not the drop cap font.
Hyper displays the drop caps in the correct font and size, but messes up the columns in landscape mode. (Portrait mode, single-column display is fine.)
FBReader iPad displays the drop caps in the regular font and size, i.e. neither are correct.

I've attached a small test case ebook I created to show what I mean. I removed all of the embedded fonts but the drop cap one, and just have four short chapters. The drop cap font is used on the title page, and it displays correctly there. It's just in the drop caps it doesn't display.

I'm trying to figure out if Calibre has a problem (i.e. shouldn't be displaying the drop caps in the different font), if I have a problem in the file, and if so what I can do to fix it, i.e. display it correctly in iBooks. As can be seen above, I know readers have various levels of support for … everything. But I personally have had good success with iBooks, i.e. if the file is "correct," iBooks will display it correctly. The fact that it shows the wrong font thus makes me think I might have done something incorrectly. Yet, Calibre does show it correctly, so maybe not.

If you don't want to open the book, here's the CSS for the drop cap. (I've tried it with both a div and a span, same results.)

div.dropcaps {
  float: left;
  font-family: OPTIAlpine-BoldItalic;
  font-weight: bold;
  font-style: italic;
  font-size: 90px;
  line-height: 80px;
  padding-top: 1px;
  margin-top: -0.11em;
  margin-right: 0.12em;
  margin-bottom: 0em;
}

And here's a sample of the drop cap code.

<p class="nonindent"><div class="dropcaps"><strong><em>T</em></strong></div>ristique

The strong and em are redundant, since the font style/weight are specified in the class. I've just been trying various things to see if I could get it to work.

[doubleshuffle]

One problem might be that you put a div inside a paragraph. Epubcheck flags that as an error. Use a span instead.

To make iBooks display embedded fonts correctly, you have to add this file to your book:

com.apple.ibooks.display-options.xml

I don't know Hyper at all, so can't give you any advice on that front. FB Reader is notorious for ignoring all formatting anyway.

And you'd better ask a mod to move this to the epub forum. The topic is not specific to the Calibre editor.

EDIT: I overlooked what you said about trying it with a span too. I'd still use the span, but if the div isn't the culprit, the display-options file should do the trick for iBooks.

[DNSB]

Originally Posted by vr8ce

I have a book with multiple embedded fonts. I'm trying to use a different font for a drop cap than the text font. To do so, I created a .dropcap style that specifics the font family, etc.

The calibre editor and book reader both display the drop cap in the correct font.
Neither iBooks on the Mac or iPad do; they display the drop cap at the correct size and placement, but in the body font, not the drop cap font.
Hyper displays the drop caps in the correct font and size, but messes up the columns in landscape mode. (Portrait mode, single-column display is fine.)
FBReader iPad displays the drop caps in the regular font and size, i.e. neither are correct.

I've attached a small test case ebook I created to show what I mean. I removed all of the embedded fonts but the drop cap one, and just have four short chapters. The drop cap font is used on the title page, and it displays correctly there. It's just in the drop caps it doesn't display.

I'm trying to figure out if Calibre has a problem (i.e. shouldn't be displaying the drop caps in the different font), if I have a problem in the file, and if so what I can do to fix it, i.e. display it correctly in iBooks. As can be seen above, I know readers have various levels of support for … everything. But I personally have had good success with iBooks, i.e. if the file is "correct," iBooks will display it correctly. The fact that it shows the wrong font thus makes me think I might have done something incorrectly. Yet, Calibre does show it correctly, so maybe not.

If you don't want to open the book, here's the CSS for the drop cap. (I've tried it with both a div and a span, same results.)

div.dropcaps {
  float: left;
  font-family: OPTIAlpine-BoldItalic;
  font-weight: bold;
  font-style: italic;
  font-size: 90px;
  line-height: 80px;
  padding-top: 1px;
  margin-top: -0.11em;
  margin-right: 0.12em;
  margin-bottom: 0em;
}

And here's a sample of the drop cap code.

<p class="nonindent"><div class="dropcaps"><strong><em>T</em></strong></div>ristique

The strong and em are redundant, since the font style/weight are specified in the class. I've just been trying various things to see if I could get it to work.

A few items.

Using a div inside a p will cause all kinds of errors and makes epubcheck very unhappy.

For an epub aimed for the Apple market, you need to embed a file that gives information about the book including does it include embedded fonts. You might want to check the following page for more information on the file and it's options: com.apple.ibooks.display options.xml.

A few items I would change. I would recommend not specifying fonts that you are not embedding such as the 'font-family: "Charis SIL";' in your body declaration. This can have interesting results (for certain values of interesting). Ditto with using absolute anything, relative is your friend -- specify font sizes in % or em for instance as using pixels will cause the font size to depend on the screen resolution. Specify position relative to the page which again handles different screens better.

Otherwise, you are running into the joy of attempting to make an ebook show the same formatting on multiple platforms and renderers with all their quirky interpretations of the epub specifications -- I won't get into those misbegotten excuses for renderers that use their own internal css instead of your lovingly crafted css. Before getting too serious, I would recommend visiting your nearest warehouse store and stocking up on your preferred headache remedy.

I've attached some screenshots from a Tolino Epos showing the effect of changing the font size on your dropcaps from absolute pixels to em.

[vr8ce]

Originally Posted by doubleshuffle

…
To make iBooks display embedded fonts correctly, you have to add this file to your book…

Interesting. I've never seen that before, I'll try that.

I put it here initially because I got different behavior from Calibre, and I didn't know where the problem was. If the mods want to move it, that's perfectly OK.

Thanks!

[vr8ce]

Thanks everyone. The display options XML file worked a treat. I do know to use a span; as I said in my original post, I was trying anything and everything to get it to work, you just happened to see the one with the div.

I also know the state of reader support of CSS is … suboptimal. I only tried the others just to see if I could identify a general problem. Since I only really care about iBooks and maybe Marvin (this is for me, not publication), this was exactly what I needed. Thanks again.

(And I have asked the mods to move the thread.)

[pdurrant]

Thread moved to ePub at OP's request.