View Full Version : embed font is too narrow - need help


NASCARaddicted
06-04-2011, 05:30 PM
Hello

Right now I am working on an ebook in epub. I just borrowed the paperbook version from the local library. In this book, there are 2 handwritten letters. I want to make the epub as close to the paperbook as possible, so I embed 2 fonts (I found a good explanation on how to do it on threepress.org).

To be exact: I found 2 free ttf fonts that looked like handwriting. It was recommended to convert them to otf, so I did that with a free website. I added them to my xhtml file and checked it with Firefox 4. It looked great.
Then I converted the xhtml file with Calibre into epub. I opened it with the epub viewer of Calibre and everything was still fine. Then I copied the epub on my ebook reader (Bebook One, with ADE) And this is were it starts to look strange.
I made a photo of my e-reader to show you what I mean:

As you can see the normal text looks fine, like it is supposed to be. But the space between the handwritten lines is too small. Just look at the 3rd word of the 1st line "ja" and the 3rd word of the 2nd line "hoffe". They almost touch. On other words, they do really touch. This only happens on my e-reader, in Calibre it looks fine.

Is this caused by the font? As I said, I use 2 different handwritten fonts, but both look similar. Or could this be caused when I converted it from ttf to otf?

Should I use a different font? Or would it help if I set the line height to something like 1 em? Or is there no way to solve this problem?

I hope someone can help me. Thanks in advance.

DaleDe
06-05-2011, 02:24 AM
You need to modify the leading in the paragraph. See http://wiki.mobileread.com/wiki/CSS#Leading and make the change in the CSS

Dale

Jellby
06-05-2011, 04:43 AM
Or modify the font (if allowed) to increase the em size, without scaling the glyphs. Fontforge can do that. In this case, the font will look smaller in the page, because the line height remains constant (that is, if you don't change it).

You could include the handwritten letters as images, too.

HarryT
06-05-2011, 04:53 AM
You could include the handwritten letters as images, too.

That's what I generally do. It has the benefit of being easily convertible to Mobi format, that way.

NASCARaddicted
06-05-2011, 05:37 AM
Thanks for all your answers.

You could include the handwritten letters as images, too.

Personally, I don't think this is a good idea.

I got this ebook in pdf and in this one, the letters have been there as images. About 8 images per letter. They have been scanned badly, so they looked like crap (that was why I went to the library to get the paper version). I manually added the letters to the xhtml file that I got after using ocr on the pdf.

With images, there is no reflow, and the zoom level always is the same. It would be like a pdf file, just labeled epub ...

I haven't much time right now, so I haven't tested any of the other suggestions, but I will get back to you, once I tried.

roger64
06-05-2011, 08:16 AM
With images, there is no reflow, and the zoom level always is the same. It would be like a pdf file, just labeled epub ...

Hi

Images on EPUBs can be made easily reflowable. You just have to add a width % property or equivalent in your CSS. This will definitely save you time.

Jellby
06-05-2011, 08:43 AM
Images on EPUBs can be made easily reflowable. You just have to add a width % property or equivalent in your CSS. This will definitely save you time.

But the text inside the image does not reflow ;) All you can control is the scale of the image as a whole.

HarryT
06-05-2011, 09:07 AM
Using an image may, however, be the only sensible approach. Eg, attached is an image of a letter from my recent version of Dickens's "Bleak House". Given the strange "over-linings" it contains, I could think of no way to incorporate this into the book other than as an image.

JSWolf
06-05-2011, 09:14 AM
To start with, you do not have to convert TTF to OTF. ADE supports both types of fonts for embedding. Second, just play around with line-height and you can then fix the spacing between the lines.

As for including images in the ePub to simulate the handwriting, I agree that it's a bad idea in ePub to do this when you can make it look nice with an embedded font that will re-size when you want it to.

Toxaris
06-05-2011, 11:10 AM
Actually, in real writing it can happen that letters overflow, especially the highs and lows. I kind of like it really.

NASCARaddicted
06-05-2011, 02:17 PM
To start with, you do not have to convert TTF to OTF. ADE supports both types of fonts for embedding. Second, just play around with line-height and you can then fix the spacing between the lines.

Thank you. I already knew that TTF also works, I just thought I heard something like "OTF would be better". However, I found a website where you can upload a TTF font and it will be converted to OTF within seconds - for free. But I guess from now on I will give TTF a try, too. Again thanks for giving me the confidence that line height should work (I still haven't tried it - the first thing that I made when I got to the computer was looking at this thread)


As for including images in the ePub to simulate the handwriting, I agree that it's a bad idea in ePub to do this when you can make it look nice with an embedded font that will re-size when you want it to.

Oh yes, that is so true. And another thing that no one has mentioned so far: you can't do a text search inside an image.



Actually, in real writing it can happen that letters overflow, especially the highs and lows. I kind of like it really.

The way you talk, it seems as if you received a handwritten letter by me :D

Just to add this: the letters in this book are written by young teenage guys. One of them has a correct spelling, the other one makes a few mistakes, like for example, he sometimes forgets a letter, or he accidentally wrote a word twice. So yes, overflowing letters can happen - and in this case it would really fit. But still, I will give it a try with line height.

Jellby
06-05-2011, 02:38 PM
Given the strange "over-linings" it contains, I could think of no way to incorporate this into the book other than as an image.

In that case, I'd probably use the border-top property and not use an image.

As for including images in the ePub to simulate the handwriting, I agree that it's a bad idea in ePub to do this when you can make it look nice with an embedded font that will re-size when you want it to.

I would include the text as an image particularly in the cases where the handwriting itself has some interesting particularity, as here (http://djelibeibi.unex.es/libros/Williams/TomSawyer-053.jpg).

roger64
06-06-2011, 04:14 AM
But the text inside the image does not reflow ;) All you can control is the scale of the image as a whole.

Obviously but a page would stay as a page at different screen sizes, exactly like a full screen photo stays full screen. :)

Probably, if you insert an image with a sufficiently high definition, it could be easily used at lower definitions and could later reflow correctly (so as to be easily readable) between, say 72 dpi and 150 dpi. By "sufficiently high", I mean a value over 150 dpi.

On the contrary, if you insert a low def image and try to do it the other way with a lossy compression like jpg, I agree that the end result would probably be quite bad.

We do it for photos, why not for manuscripts?

NASCARaddicted
06-06-2011, 11:37 AM
just to get back to you guys:

last night, I tried it with line height, and it worked, so thanks for that.

However, you guys also mentioned images that an image will change size, if I use % property? I never thought about that. So far I always used property, based on px, so like 300px height would be half of my 600px screen.

And I thought, I already knew alot about epub - you learn something new everyday ...

roger64
06-06-2011, 04:44 PM
Have a look, it's not perfect but it will give you some more ideas. The text on the table is to be read at minimum size with ebook readers

Look at these images with a 6 inch screen ebook reader, an iPad and a desktop computer. You also can open the epub with Sigil to look the implementation of the % code.

NASCARaddicted
06-06-2011, 11:00 PM
Have a look, it's not perfect but it will give you some more ideas. The text on the table is to be read at minimum size with ebook readers

Look at these images with a 6 inch screen ebook reader, an iPad and a desktop computer. You also can open the epub with Sigil to look the implementation of the % code.

Thanks, I will give it a try.