View Full Version : Problem with embedded fonts


James_Wilde
09-06-2010, 05:25 PM
I have an epub file converted from odt by Calibre. It has subsequently been run through Sigil which has changed the directory structure somewhat. I need some extra characters in the font to handle pinyin, which is basically normal english letters with several accents over and above the ones that can be considered normal.

If I don't embed the font, words with some of these characters have them replaced by ?. It is worth noting that every occurrence of these characters has the additional attribute that the font at the time is italic.

I've done the following to my epub subfiles:

Added the following to the css file:


@font-face {
font-family: "Times New Roman", serif;
font-weight: normal;
font-style: normal;
src: url(../fonts/Times New Roman Regular.ttf);
}

@font-face {
font-family: "Times New Roman", serif;
font-weight: bold;
font-style: normal;
src: url(../fonts/Times New Roman Bold.ttf);
}

@font-face {
font-family: "Times New Roman", serif;
font-weight: normal;
font-style: italic;
src: url(../fonts/Times New Roman Italic.ttf);

Still in the css file, changed the following:

.S-T {
background-color: white;
font-family: "Times New Roman", serif; this line added
font-size: 1em; this line added
font-style: italic;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0
}

Added these lines to content.opx just in front of the /manifest tag:

<item id="tnrbold_font" href="fonts/Times New Roman Bold.ttf" media-type="application/x-truetype-font" />
<item id="tnritalic_font" href="fonts/Times New Roman Italic.ttf" media-type="application/x-truetype-font" />
<item id="tnrregular_font" href="fonts/Times New Roman Regular.ttf" media-type="application/x-truetype-font" />

That's all the changes I have made, apart from adding the three files with the names above to the fonts folder.

One section which contains the strange letters is as follows in a file called index_split_001.xhtml:

<p class="P-P4"><span class="S-T">N</span><span class="S-T2">ǐhǎo</span><span class="S-T3">, said Nancy, and helped them to say the word correctly.</span>&nbsp;</p>

<p class="P-P4">How about thank you, and goodbye? asked Tomas.</p>

<p class="P-P4"><span class="S-T3">Thank you is</span> <span class="S-T2">zhxi</span> <span class="S-T3">and goodbye is</span> <span class="S-T2">zijin</span><span class="S-T3">&nbsp;. It really means see you later.</span>&nbsp;</p>

Now the words "Nǐhǎo", "zhxi" and "zijin" should appear in italics. They don't, and the first word, on my reader and in Adobe epub reader shows as N?h?o. In Calibre and Sigil it appears as Nǐhǎo but not in italics. No other italics appear as they should either.

I'd very much like to solve this one, so if anyone has any suggestions, I'd be extremely grateful.

TIA

Valloric
09-06-2010, 05:44 PM
Now the words "Nǐhǎo", "zhxi" and "zijin" should appear in italics. They don't, and the first word, on my reader and in Adobe epub reader shows as N?h?o. In Calibre and Sigil it appears as Nǐhǎo but not in italics. No other italics appear as they should either.

If the epub came from Sigil, the path should be "src: url(../Fonts/Times New Roman Regular.ttf)"; notice that the Fonts folder starts with a capital F in Sigil 0.2.x. This is important.

The problem with embedded italic fonts not displaying comes from a Qt bug (https://bugs.webkit.org/show_bug.cgi?id=29433), which both Calibre and Sigil use.

charleski
09-06-2010, 06:19 PM
<p class="P-P4"><span class="S-T">N</span><span class="S-T2">ǐhǎo</span><span class="S-T3">, said Nancy, and helped them to say the word correctly.</span>&nbsp;</p>

Now the words "Nǐhǎo", "zhxi" and "zijin" should appear in italics.

Those words are covered by a span using class="S-T2". You haven't shown us the code for that class.

pholy
09-06-2010, 08:18 PM
I have noticed problems with ADE's use of embedded fonts when the @font-face definition contains a fall-back font after the desired font. Apparently the fall-back font should only be used in the css class definition where the embedded font is called for.

I don't know if that is how font-faces are supposed to work according to the CSS standard, or just the way Adobe has chosen to implement embedded fonts. Should this be added to the list of ADE bugs and quirks?

Jellby
09-07-2010, 04:34 AM
Indeed, the "font-family" inside @font-face (http://www.w3.org/TR/css3-fonts/#font-family0) can only have a single family name, unlike the "font-family" in other normal CSS rules.

James_Wilde
09-07-2010, 05:36 AM
I have noticed problems with ADE's use of embedded fonts when the @font-face definition contains a fall-back font after the desired font. Apparently the fall-back font should only be used in the css class definition where the embedded font is called for.

I don't know if that is how font-faces are supposed to work according to the CSS standard, or just the way Adobe has chosen to implement embedded fonts. Should this be added to the list of ADE bugs and quirks?

Thanks, Pholy. Are you referring to the ", serif" after the font name? So that the reader's default serif font might be used by mistake.

James_Wilde
09-07-2010, 05:39 AM
If the epub came from Sigil, the path should be "src: url(../Fonts/Times New Roman Regular.ttf)"; notice that the Fonts folder starts with a capital F in Sigil 0.2.x. This is important.

Oh crap, thanks Valloric. I'll take a good look at that.

The problem with embedded italic fonts not displaying comes from a Qt bug (https://bugs.webkit.org/show_bug.cgi?id=29433), which both Calibre and Sigil use.

Thanks for this, too. I'll check it out.

James_Wilde
09-07-2010, 05:40 AM
Those words are covered by a span using class="S-T2". You haven't shown us the code for that class.

Sorry Charleski. Here it is:


.S-T2 {
background-color: white;
font-size: 1em;
font-family: "Times New Roman", serif;
font-size: 1em;
font-style: italic;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0
}

James_Wilde
09-07-2010, 05:46 AM
Valloric, whilst I've got your attention, is there some way I can take an expanded epub book directory structure and load it into Sigil? I expand an epub and get all the subdirectories and files, make changes, then want to turn it back into an epub with a new name. Or I do the editing outside Sigil and want Sigil to do the compression back to an epub file. Can I persuade Sigil to load the directories so that I can run "Save As"?

charleski
09-07-2010, 06:07 AM
I have noticed problems with ADE's use of embedded fonts when the @font-face definition contains a fall-back font after the desired font.
...
Should this be added to the list of ADE bugs and quirks?

You're going to have to describe the problem in more detail, because I can't see any issues there. A font-face definition like
@font-face {
font-family: "Garamond", serif;
...
}
Will cause the referenced font to be used for both font-family: "Garamond"; and font-family: serif; attributes. You shouldn't really be using fallbacks, though, they were put in because css on the web has to operate in a range of different user environments, whereas an epub's environment should be fully defined at the time it's coded. The only reason to use them is to accommodate the shortcomings in UserAgents like iBooks.

Valloric
09-07-2010, 03:46 PM
Valloric, whilst I've got your attention, is there some way I can take an expanded epub book directory structure and load it into Sigil? I expand an epub and get all the subdirectories and files, make changes, then want to turn it back into an epub with a new name. Or I do the editing outside Sigil and want Sigil to do the compression back to an epub file. Can I persuade Sigil to load the directories so that I can run "Save As"?

Not really, no. Sigil expects an ".epub" file.

But to get such a folder structure into Sigil just zip it up and change the extension to epub (no need to worry about the mimetype, Sigil doesn't care when opening).

Then save. Sigil will take care of turning it into a "proper" epub.

James_Wilde
09-07-2010, 05:07 PM
Thanks, Valloric. That saves me making a script file to be run in a terminal window.

James_Wilde
09-07-2010, 05:15 PM
OK so I've changed the path to have a capital F for Fonts, I've removed the default "serif" from the @fontface statements and I've recompressed into a new epub. The results are:

Adobe had no italics, and some ? instead of pinyin characters
My Iriver had the same as Adobe
Calibre had no italics, but showed the pinyin characters correctly
Stanza had the same as Calibre

Does this suggest anything to anyone? What other changes/additions have I missed?

TIA

charleski
09-07-2010, 08:05 PM
Remove the serif fallback from the font-family attribute in your spans as well.

But I think the best thing to do is for you to create and upload a sample that fails to show your italic font.

James_Wilde
09-08-2010, 09:51 AM
Remove the serif fallback from the font-family attribute in your spans as well.

But I think the best thing to do is for you to create and upload a sample that fails to show your italic font.

Done that, Charleski. Result is now:

Stanza no italics, pinyin ok
Adobe no italics, no pinyin
Calibre no italics, pinyin ok
Iriver no italics, no pinyin

I've uploaded a copy of a much shortened file, comprising merely a part of chapter one. All the words in a foreign language should be in italics, that's the following words/phrases:

Tanda panee lao mehebani
Ji
Nǐhǎo (i and a in this word appear as ? in some cases)
zhxi
zijin

Also note that the epub file includes two images which I have yet to begin experimenting with. Sufficient unto the day is the evil thereof!

Grateful for any help.

charleski
09-08-2010, 01:53 PM
You left off the closing parenthesis in your @font-face definition, so the css doesn't parse. I noticed that in your post above, but thought you'd just failed to copy it over for the post. Also, you've added numbers to the end of the names of the font files that need to be removed.
So replace your font-face definitions with
@font-face {
font-family: "Times New Roman";
font-weight: normal;
font-style: normal;
src: url(../Fonts/Times New Roman Regular.ttf);
}

@font-face {
font-family: "Times New Roman";
font-weight: bold;
font-style: normal;
src: url(../Fonts/Times New Roman Bold.ttf);
}

@font-face {
font-family: "Times New Roman";
font-weight: normal;
font-style: italic;
src: url(../Fonts/Times New Roman Italic.ttf);
}
and it works fine.

Use the css attribute text-indent:1 em to indent the first line of a paragraph. Embedding a bunch of non-breaking spaces isn't a good idea.

James_Wilde
09-08-2010, 05:48 PM
You're the man, Charleski! Thanks.

I still get some funny results. Stanza has not changed its behaviour. It gives me no italics but shows the pinyin correctly. Adobe works fine with both italics and pinyin. Calibre turns everything into italics, and shows the pinyin correctly, and my Iriver shows both italics and pinyin as it should.

I must have missed the closing bracket once when I copied the @fontface statements, and not noticed it even when Valloric pointed out the small 'f' instead of a capital 'F' in the Fonts path.

I'll have a look at what you mean by the numbers at the end of the names of the font files. Don't know where they came from.

And I noticed the non-breaking spaces and assumed this was added by either calibre or sigil and wondered why ems weren't used, but was more concerned with getting the pinyin and italics showing, so I didn't do anything about that. Now I'll try and learn how to do that, and Zelda's epub of TMOAB should help me there.

Anyway, you've solved my problem for me, and I'm extremely grateful. Now I'll set about including the jpegs in the appropriate place, and I can load my own novel onto my own ebook reader, and maybe even upload it somewhere and see if it wakes any interest.

Thanks again.

Valloric
09-09-2010, 05:51 AM
And I noticed the non-breaking spaces and assumed this was added by either calibre or sigil and wondered why ems weren't used, but was more concerned with getting the pinyin and italics showing, so I didn't do anything about that.

Just for the record, Sigil does not add nbsps to the start of paragraphs.

JSWolf
09-09-2010, 06:00 AM
Stanza does not support embedded fonts. Stanza should be avoided at all costs. Stanza uses a sub-par rendering engine that needs a lot of work to fix it.

pholy
09-09-2010, 09:25 AM
Stanza does not support embedded fonts. Stanza should be avoided at all costs. Stanza uses a sub-par rendering engine that needs a lot of work to fix it.

I thought that was true of all rendering engines. Which is/are acceptable?

Not the embedded fonts part, the sub-par part.

When will we create a suite of conformance tests?

JSWolf
09-09-2010, 09:28 AM
I thought that was true of all rendering engines. Which is/are acceptable?

Not the embedded fonts part, the sub-par part.

When will we create a suite of conformance tests?

The problem is that the only real test for ePub is not a real test. That would be ePubCheck. Just because it passes does not mean it works and just because it fails doesn't mean it doesn't work.

James_Wilde
09-09-2010, 03:56 PM
Stanza does not support embedded fonts. Stanza should be avoided at all costs. Stanza uses a sub-par rendering engine that needs a lot of work to fix it.

Thanks for the tip, JS. I have quoted the results with Stanza as it was one of the first epub readers for my Mac laptop that I downloaded, and I just haven't bothered to wipe it.

Any suggestions for what might be more appropriate as a tool for testing epub files one creates oneself, apart from Adobe, of course, and the reading part of Calibre. Can't remember whether Sigils divided screen shows exactly what one has ordered, but that might be another one to use.

jharker
09-13-2010, 10:55 AM
Stanza does not support embedded fonts. Stanza should be avoided at all costs. Stanza uses a sub-par rendering engine that needs a lot of work to fix it.
Just out of curiosity, what about Stanza is sub-par?

I actually don't use Stanza very much, but I did notice that it implements hyphenation, which no other e-reader does (as far as I know). So based on that, I thought that they were actually a bit ahead of the competition.

On the other hand, their hyphenation implementation is really quite poor.

JSWolf
09-22-2010, 09:37 AM
Thanks for the tip, JS. I have quoted the results with Stanza as it was one of the first epub readers for my Mac laptop that I downloaded, and I just haven't bothered to wipe it.

Any suggestions for what might be more appropriate as a tool for testing epub files one creates oneself, apart from Adobe, of course, and the reading part of Calibre. Can't remember whether Sigils divided screen shows exactly what one has ordered, but that might be another one to use.

To be honest, you should be testing your ePub with Adobe Digital Editions. That's what most desktops/laptops and most stand alone readers use.

JSWolf
09-22-2010, 09:38 AM
Just out of curiosity, what about Stanza is sub-par?

I actually don't use Stanza very much, but I did notice that it implements hyphenation, which no other e-reader does (as far as I know). So based on that, I thought that they were actually a bit ahead of the competition.

On the other hand, their hyphenation implementation is really quite poor.

There are a number of things wrong with Stanza. Font embedding is just one of them. I don't know offhand what the issues are. But they are there.

Freeshadow
09-24-2010, 04:07 PM
wasn't lack of support of SVG book covers also one of them?