embedded fonts in epub

[RbnJrg]

Originally Posted by serendipity22

Fonts don't show on Amazon, Scribd and Barnes&Noble. Cannot test Apple or Tolino.

They show on Kobo.

The Amazon's online reader ("Look Inside") utilizes the KF7 format, and KF7 doesn't support embedded fonts. But if you download a sample of the ebook you uploaded (and if your reader is not a KDX or K2) then you'll see your diagrams perfectly. Regarding Scrib, AFAIK, it doesn't support embedded fonts. I don't know what to tell you about B&N.

The other option you have (and I utilized it sometimes), is to use tables to display a chess board. You only need a few images for pieces (six for White and six for Black) and to color (with .css) each square of the table accordingly. Of course you don't need to do that by hand; there are free programs that export chess boards as tables; your only work is to paste the generate code in your ebook.

[Toxaris]

Personally I think I would use SVG images for the diagrams. Those are generally supported and can be scaled together with the fonts.

[RbnJrg]

Originally Posted by Toxaris

Personally I think I would use SVG images for the diagrams. Those are generally supported and can be scaled together with the fonts.

The problem here is the OP wants the diagram is showed in the Amazon online reader ("Look Inside") and as that reader only supports the KF7 format, then svg images are not an option The only way KF7 shows diagrams is by using .gif/.bmp images (quite heavy with lot of diagrams) or tables.

[Hitch]

Originally Posted by RbnJrg

The problem here is the OP wants the diagram is showed in the Amazon online reader ("Look Inside") and as that reader only supports the KF7 format, then svg images are not an option The only way KF7 shows diagrams is by using .gif/.bmp images (quite heavy with lot of diagrams) or tables.

Yup, what he said ^.

Hitch

[AlanHK]

A couple of points:
this plugin: CSSfromfonts creates all the CSS to define the fonts in the files you have imported.

As for diagrams, for chess diagrams I'd use GIFs which are perfectly sharp. PNG is better, but is not supported in Kindle, (PNG gets converted to GIF or JPEG and made larger and blurrier in the process), so I just use GIF for diagrams, maps, etc.

After making a diagram in whatever you use, I use Irfanview to covert to GIF and reduce the colour depth. For most b/w linework 4 bits is sharp but has a couple of greys to antialias curves. Two bits has jaggies. It's roughly 1/5th the size of a 256 colour image.
Irfanview can be batched to convert a folder of images to GIF at 4 bits.

[serendipity22]

Originally Posted by RbnJrg

The Amazon's online reader ("Look Inside") utilizes the KF7 format, and KF7 doesn't support embedded fonts. But if you download a sample of the ebook you uploaded (and if your reader is not a KDX or K2) then you'll see your diagrams perfectly. Regarding Scrib, AFAIK, it doesn't support embedded fonts. I don't know what to tell you about B&N.

The other option you have (and I utilized it sometimes), is to use tables to display a chess board. You only need a few images for pieces (six for White and six for Black) and to color (with .css) each square of the table accordingly. Of course you don't need to do that by hand; there are free programs that export chess boards as tables; your only work is to paste the generate code in your ebook.

I am using tables for my Amazon books. However they are not working for any books I publish on d2d. Also, they may work in the preview after uploading, but there gaps between the lines in the 'look inside', and smaller gaps in the diagrams when I download a sample.

[RbnJrg]

Originally Posted by serendipity22

I am using tables for my Amazon books. However they are not working for any books I publish on d2d. Also, they may work in the preview after uploading, but there gaps between the lines in the 'look inside', and smaller gaps in the diagrams when I download a sample.

Can you post the code of one of your diagrams here?

[serendipity22]

Originally Posted by RbnJrg

Can you post the code of one of your diagrams here?

Its a board with a white king on a1 and a black king on h8.

<html xmlns='http://www.w3.org/1999/xhtml'>
<head><title>chess</title>
<link rel='stylesheet' type='text/css' href='styles.css'>
</head>
<body>
<table class='center' border=0 cellpadding=0 cellspacing=0><tbody>
<tr><td><img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp>
<img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp><img src=pieces/bk2.jpg alt=cp></td>
</tr><tr><td><img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp>
<img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp></td></tr>
<tr><td><img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp>
<img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp></td></tr>
<tr><td><img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp>
<img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp></td></tr>
<tr><td><img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp>
<img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp></td></tr>
<tr><td><img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp>
<img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp></td></tr>
<tr><td><img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp>
<img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp></td></tr>
<tr><td><img src=pieces/wk2.jpg alt=cp><img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp>
<img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp><img src=pieces/b.jpg alt=cp><img src=pieces/w.jpg alt=cp></td></tr>
<tr><td></td></tr></tbody></table></body></html>

in styles.css
I have been experimenting with different styles.

Do I need a doctype at the top?


table
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

.center {
margin-right: auto;
margin-left:auto
}

[Turtle91]

If you have a device that supports nth-child selectors you can make this reeeally easily...

Spoiler:

<!DOCTYPE html>
<html>
<head>
<title>Chess Board</title>

<style>
table {border-collapse:collapse; border:1px solid black; width:80px}
tr  {padding:0; height:10px}
td  {padding:0; width:10px; background-color:white}
img {width:10px}  */ with Square image /*

tr:nth-child(odd) td:nth-child(even) {background-color:black}
tr:nth-child(even) td:nth-child(odd) {background-color:black}
</style>

</head>
<body>

<table>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td><img src="bk2.jpg" alt=""/></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td><img src="wk2.jpg" alt=""/></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

</body>
</html>

If you don't, then you can use your technique, but make sure you have the proper quotation marks around the src="pieces/b.jpg" alt="" (you don't need alt=cp).

You can get rid of any styling in the table itself. Simply give it a class and then put the proper (to your taste) styling in the linked stylesheet. See example for possible css.

Cheers,


edit: I think your extra lines came from the spaces (line breaks) you had between the <img> tags.

[serendipity22]

I am still struggling with this.

I have an ongoing issue with look inside not walking for some books. The strange think is I had 5 similar books with graphics all done done in the same way,.


I use tables in html to display images. Sometimes it works fantastically, in others the rows have a large gap between them. I added this style to tables:

table{

line-height: 1px;

}



It helps, but not in all cases.

[Turtle91]

"I think your extra lines came from the spaces (line breaks) you had between the <img> tags."

...at least in the example you showed before... once those spaces were removed there wan't any problem for me. Check that there are no spaces or line-breaks within your table.

[Hitch]

Originally Posted by serendipity22

I am still struggling with this.

I have an ongoing issue with look inside not walking for some books. The strange think is I had 5 similar books with graphics all done done in the same way,.


I use tables in html to display images. Sometimes it works fantastically, in others the rows have a large gap between them. I added this style to tables:

table{

line-height: 1px;

}



It helps, but not in all cases.

You mentioned something previously about Draft2Digital, D2D. Are you uploading an ePUB to D2D, which is then FTPed to Amazon and thence converted into a MOBI? Or are you uploading a MOBI directly to Amazon?

IME--and yes, I know that this doesn't make sense--you can get very different end results in loading an ePUB to KDP, versus loading a MOBI that you already built from that ePUB. I know, I know, that shouldn't be the case, but, for example, for a 2-year period, we had to build MOBIs and thence load them to the KDP, or the embedded fonts wouldn't work correctly. Or, we had to unzip an ePUB, put it into its constituent parts in zipped folders, and load THAT to the KDP, to get the fonts to "take."

Embedded fonts and font manipulation at the KDP is alchemy, prayer, and luck. Yes, yes, there's some skill involved, but we make nearly a thousand books each year, most of which have embedded fonts, and getting them to work can be frustrating as hell. Things that make NO sense--like loading a zipped folder of the exact-same damn book, versus an ePUB of the book--just seem to happen. I would recommend that you refine and pay attention to the mechanics of a process that works for you, whether it's loading the constituent parts, or the zipped folder, or a built mobi, etc. and then stick to it.

FWIW, we've had the most problems with building MOBIs, at the KDP, from ePUBs--if you are using a distributor/aggregator, that's all that they do, load the ePUBs, and that might play into it.

ALSO, KFX is upon us, and that plays in to all sorts of new mystery stuff, too.

That's my $.02.

Hitch

[serendipity22]

I have started a new thread about this as the my question is irrelevant to embedded fonts.

Having said that, I have never got embedded fonts to work in Amazon Look Inside for epubs, that I use them in my print books and on Apple.

[JSWolf]

Originally Posted by serendipity22

I have started a new thread about this as the my question is irrelevant to embedded fonts.

Having said that, I have never got embedded fonts to work in Amazon Look Inside for epubs, that I use them in my print books and on Apple.

If all you are doing is using embedded fonts to simulate your print version, don't. It's not a pBook. And most people won't like your fonts anyway. Plus, given that Kindles don't default to the embedded fonts on, most won't even see them. So leave out the fonts if you don't actually need them.

[Notjohn]

Originally Posted by JSWolf

If all you are doing is using embedded fonts to simulate your print version, don't. It's not a pBook. And most people won't like your fonts anyway. Plus, given that Kindles don't default to the embedded fonts on, most won't even see them. So leave out the fonts if you don't actually need them.

Huzzah!