Epub: using icons mapped to characters in special font

[gdutoit]

I want to make an epub of a book that contains 30-odd small icons used throughout the text. (It's a wine guide, and the icons indicate things like the rating of the wine, eco-friendliness, good value, and so on.)

I made special font used in the print version so that the icons are simply part of the text. But in the epub version I don't think it will work that way. I tried embedding and using the font, but it didn't work on ipad.

I suppose it would work to make bitmaps of the characters, but that too will be quite a business: the book uses a different color for highly rated wines, and when the icons appear in those paragraphs, they have to be in the color of the text. And some are reversed out of a colored background. So I'll have to make a bitmap version of each in three colors, and then insert the right color jpeg in the right paragraph. All this is possible, though cumbersome (it's a 600-page book) via regex, but it would be so much simpler if the font option could work.

Any ideas?

[Dr. Drib]

[sigh]

Moved to the epub forum.

Please take the time to become familiar with our site.



Don
(Moderator)

[DomesticExtremis]

Originally Posted by gdutoit

I want to make an epub of a book that contains 30-odd small icons used throughout the text. (It's a wine guide, and the icons indicate things like the rating of the wine, eco-friendliness, good value, and so on.)

I made special font used in the print version so that the icons are simply part of the text. But in the epub version I don't think it will work that way. I tried embedding and using the font, but it didn't work on ipad.

I suppose it would work to make bitmaps of the characters, but that too will be quite a business: the book uses a different color for highly rated wines, and when the icons appear in those paragraphs, they have to be in the color of the text. And some are reversed out of a colored background. So I'll have to make a bitmap version of each in three colors, and then insert the right color jpeg in the right paragraph. All this is possible, though cumbersome (it's a 600-page book) via regex, but it would be so much simpler if the font option could work.

Any ideas?

I think the problem is iPad (or iBooks generally).
Assuming you have all the fonts setup in xhtml/css correctly for epub,
you need to add a magic incantaion to you epub to force the ipad to
use the embedded font.
You will need a file called com.apple.ibooks.display-options.xml,
containing the following:

<?xml version="1.0" encoding="UTF-8"?>
<display_options>
<platform name="*">
	<option name="specified-fonts">true</option>
	</platform>
</display_options>

It needs to be placed in the META-INF directory within the epub.

The Calibre tweak book feature is the best way to to this.
Explode the book and copy the file in place. Rebuild the book.

Calibre also contains a half decent epub viewer which means you
can check your book looks ok on devices other than iPad (most of the
market).

[Tex2002ans]

There was lots of discussion here:

https://www.mobileread.com/forums/sho...d.php?t=222825

which dealt with different ways to include the "apple symbol" in an EPUB.

Originally Posted by gdutoit

So I'll have to make a bitmap version of each in three colors, and then insert the right color jpeg in the right paragraph.

GASP!!! GIF or PNG here... DO NOT use the dreaded JPG for artificial (non-photographic) images.

First: Font Embedding
Second: SVG
Third: PNG as a last resort

[gdutoit]

Originally Posted by Dr. Drib

[sigh]

Moved to the epub forum.

Please take the time to become familiar with our site.



Don
(Moderator)

I'm sorry. You're quite right.

[Doitsu]

Originally Posted by gdutoit

I made special font used in the print version so that the icons are simply part of the text. But in the epub version I don't think it will work that way. I tried embedding and using the font, but it didn't work on ipad.

Since you mentioned iPad problems,you may want to try DomesticExtremis's suggestion and embed com.apple.ibooks.display-options.xml.

You also may want to download ADE and open your ePub with it.

If the icons show up in ADE, but not on an iPad you most likely made a mistake embedding com.apple.ibooks.display-options.xml.

If the icons don't show up on ADE either, there's either a font or CSS problem. In that case post a small ePub sample with the font in it.

[gdutoit]

Originally Posted by DomesticExtremis

I think the problem is iPad (or iBooks generally).
Assuming you have all the fonts setup in xhtml/css correctly for epub,
you need to add a magic incantaion to you epub to force the ipad to
use the embedded font.
You will need a file called com.apple.ibooks.dispaly-options.xml,
containing the following:

<?xml version="1.0" encoding="UTF-8"?>
<display_options>
<platform name="*">
	<option name="specified-fonts">true</option>
	</platform>
</display_options>

It needs to be placed in the META-INF directory within the epub.

The Calibre tweak book feature is the best way to to this.
Explode the book and copy the file in place. Rebuild the book.

Calibre also contains a half decent epub viewer which means you
can check your book looks ok on devices other than iPad (most of the
market).

Thank you very much for your specific advice and sample file. I gave it a try and, after uninstalling the font from my computer, the font displays correctly on Calibre and ADE, but it still doesn't display in ibooks on the iphone or ipad.

(Curiously, when the file is opened and saved in Sigil, com.apple.ibooks.dispaly-options.xml is deleted from the META-INF folder.)

Thanks also for pointing out Caliber's Tweak Book feature to me — I'd never noticed it before, and it certainly makes exploding and rebuilding painless.

In case you want to have a look, I've made a small sample epub (17 kB).

[gdutoit]

Originally Posted by Doitsu

Since you mentioned iPad problems,you may want to try DomesticExtremis's suggestion and embed com.apple.ibooks.display-options.xml.

You also may want to download ADE and open your ePub with it.

If the icons show up in ADE, but not on an iPad you most likely made a mistake embedding com.apple.ibooks.display-options.xml.

If the icons don't show up on ADE either, there's either a font or CSS problem. In that case post a small ePub sample with the font in it.

Thanks, Doitsu. See my answer above to DomesticExtremis. I mentioned there that the icons display fine in Calibre and ADE, but not on ibooks, so there may well be an error in the CSS or in the embedding of the file. I'd be glad if you'd have a look at the sample epub.

[gdutoit]

Originally Posted by Tex2002ans

There was lots of discussion here:

https://www.mobileread.com/forums/sho...d.php?t=222825

which dealt with different ways to include the "apple symbol" in an EPUB.



GASP!!! GIF or PNG here... DO NOT use the dreaded JPG for artificial (non-photographic) images.

First: Font Embedding
Second: SVG
Third: PNG as a last resort

Thanks Tex2002ans, I had a look at the thread, and the consensus seems to be that it should work by embedding a font. My concern is that I'm not confident that ereaders will display the font. Many, including ipad, even ignore serif/sans-serif settings.

A possible problem with my font is that the icons are mapped to the positions of other characters. For the printed edition, I took the font in which the body of the book is set, and inserted the icons in the positions of characters not used in the book (š ª « ¢ „ ¯ ² ³ µ » ¿ Ÿ ¹ ‹ ¸ Ð ¤ Ã º ‰ Þ ƒ Š Å Ý ý ß ð ). (Not sure that this was the clever thing to do.) For the epub version, I removed all the characters except the icons, because the rest of it is the font foundry's copyright. Perhaps I should map these characters to new or open positions in the font?

Re: jpeg. I agree. But I'm not at all keen on using inline graphics anyway: I imagine there might be major size issues on various ereaders?

[Jellby]

Originally Posted by gdutoit

For the printed edition, I took the font in which the body of the book is set, and inserted the icons in the positions of characters not used in the book (š ª « ¢ „ ¯ ² ³ µ » ¿ Ÿ ¹ ‹ ¸ Ð ¤ Ã º ‰ Þ ƒ Š Å Ý ý ß ð ). (Not sure that this was the clever thing to do.) For the epub version, I removed all the characters except the icons, because the rest of it is the font foundry's copyright. Perhaps I should map these characters to new or open positions in the font?

Yes, you should not assign a different "meaning" to the standard (Unicode) characters. Instead, you should use the free slots intended for this kind of thing (alternate glyphs, custom icons, non-standardized scripts, etc.)

[Doitsu]

Originally Posted by gdutoit

(Curiously, when the file is opened and saved in Sigil, com.apple.ibooks.dispaly-options.xml is deleted from the META-INF folder.)

If that happened you're using a very old Sigil version. Current versions will display com.apple.ibooks.display-options in the Misc folder and otherwise leave it alone. You may want to download the latest version from the official website.

Note that there was a typo in DomesticExtremis's post. He suggested naming the .xml file:

com.apple.ibooks.dispaly-options.xml

however, the correct name is:

com.apple.ibooks.display-options.xml

I had a quick look at your book and it doesn't seem to contain any font related errors. Please find attached an updated version with com.apple.ibooks.display-options.xml in META-INF folder that you can test on your iPad.

[gdutoit]

Originally Posted by Doitsu

. . . typo in DomesticExtremis's post. He suggested naming the .xml file:

com.apple.ibooks.dispaly-options.xml

however, the correct name is:

com.apple.ibooks.display-options.xml

Good grief! I should've picked that up. Irony is that I carefully copied and pasted it to prevent an error slipping in, but never checked for possible errors already there. Thank you for seeing it, I wonder how long it would have taken me to notice it, if ever.

I checked, and it works in iBooks now. And in ADE, Calibre and Sigil. Is it likely to be okay on Android ereaders too?

As to the file disappearing in Sigil, I'm no longer quite sure what happened. I do have the latest version installed, and I checked now, the XML file remains intact. I'll see if I can reproduce it, but it no longer really concerns me.

[gdutoit]

More on the same issue: android readers.

Thanks to DomesticExtremis pointing me to the com.apple.ibooks.display-options.xml file, the embedded fonts and everything else are rendered perfectly in iBooks.

However, what can be done about the various android readers?

Embedded fonts (and text colour, indents and many other things) are simply ignored on many android readers. The only reader I've tried that displays the CSS correctly, is Mantano.

What to do? This book, for instance, is garbage if the embedded font isn't displayed. Should one impose on the customer saying that the book should be read with a specific ereader? Or is there a way to force the ereader app to recognize the CSS? Or can an app be made that includes the epub and a suitable reader?

[Jellby]

At some point you have to decide that a reader that does not support embedded fonts is not an ePub reader.

[mrmikel]

If it is just for you, you don't have to worry about it. If you have notions of selling it, then you want to cover as many as you can and that is not an easy challenge. Even the Kindle line is not compatible within itself!