size relative to textsize

[AlanHK]

I want to embed a small image of a symbol in the text, to act as a letter.

Is there a way to style it so it scales with the text?

I've looked at several retail books and so far those that do this just have a small image, e.g 16x24 px, and put it as e.g.

.imgepub {height: auto; width: auto;}

So it stays at a constant size if you zoom the text.

So is there a way to refer to the current font size?

I tried
.textsize { height: inherit; width: inherit; }

But that didn't work; presumably it inherits from <img>.
I can't put it inside a <p> tag without starting a new paragraph.


Ten minutes later:
SOLUTION (Seems that stating the problem helps to solve it).

.textsize { height: 1em; width: 1em; }

-- maybe just
.textsize { height: 1em; }
would be more general, if you have an image of several symbols or a word.

[Jellby]

It doesn't need to be 1em, depending on the image it may be larger or smaller, just specify the size in em units and it will scale with the text size.

However, note that the best size is font-depending, so what looks fine with one font may be a bit too large or a bit too small with another font.

[AlanHK]

Originally Posted by Jellby

It doesn't need to be 1em, depending on the image it may be larger or smaller, just specify the size in em units and it will scale with the text size.
However, note that the best size is font-depending, so what looks fine with one font may be a bit too large or a bit too small with another font.

Well, thanks, but once I realised what "em" meant in this context the rest was straightforward.

[JSWolf]

Is this a symbol that's available in a font? if so, embed a font with that symbol and do that. Too many publishers take the lazy way out and it looks awful.

[Turtle91]

Originally Posted by JSWolf

Is this a symbol that's available in a font? if so, embed a font with that symbol and do that. Too many publishers take the lazy way out and it looks awful.

This is what I was thinking...but you shouldn't even need to embed a font if it is a unicode letter rather than a made-up new symbol...you can simply use the unicode:

Try this website for an online table of unicode characters...click on the one you want, copy to clipboard, then paste.

[AlanHK]

Originally Posted by JSWolf

Is this a symbol that's available in a font? if so, embed a font with that symbol and do that. Too many publishers take the lazy way out and it looks awful.

To add a few (like 6) Chinese characters in a book, you need to embed an 8 megabyte font. I have done that, and even when I used font shrinking, it was still 3 or 4 MB of font for a few glyphs. If font shrinking actually gave a font with only the glyphs needed it would be about 10 kB, but none of the utilities I tried did that despite claiming to.

So if it was just one Chinese character, I preferred to use a 1 kB image and size it as the code discussed above. Of course, more than a handful isn't sensible to do that.


But in some books I was reading, not creating, I see there are few words of say Russian or Greek, and they are ugly miss-sized images plonked on the page. If I can work out what they are supposed to be by OCR or otherwise, I replace them with Unicode, as those glyphs are in the default fonts and don't need an embedded font.

I guess these books were created from some process that only recognises English and throws everything else into an image; e.g. it's very common to see asterisks as a scene separator done as images (sometimes a dozen slightly different images), so If I notice that I replace them with text.

Embedded fonts do have uses, of course. One book had a few words in blackletter so adding a 40 kB font replaced the larger images and gave better results.

[doubleshuffle]

Originally Posted by AlanHK

To add a few (like 6) Chinese characters in a book, you need to embed an 8 megabyte font. I have done that, and even when I used font shrinking, it was still 3 or 4 MB of font for a few glyphs. If font shrinking actually gave a font with only the glyphs needed it would be about 10 kB, but none of the utilities I tried did that despite claiming to.

Have you tried subsetting the font? It's easily done in Calibre's book editor, and there should be a Sigil plugin as well for that.

Sorry it that's what you've already tried, but that should strip all unused glyphs. If it doesn't with the fonts you've tried, it might be a bug worth reporting.

[AlanHK]

Originally Posted by doubleshuffle

Have you tried subsetting the font? It's easily done in Calibre's book editor, and there should be a Sigil plugin as well for that.

Sorry it that's what you've already tried, but that should strip all unused glyphs. If it doesn't with the fonts you've tried, it might be a bug worth reporting.

That's what I did try.

It made the font about half the original size, but still obviously contained thousands of glyphs in addition to the 6 actually used.

I had a deadline so had to submit it regardless of bloat.

I haven't had time since to return to it.

[Toxaris]

Originally Posted by AlanHK

That's what I did try.

It made the font about half the original size, but still obviously contained thousands of glyphs in addition to the 6 actually used.

I had a deadline so had to submit it regardless of bloat.

I haven't had time since to return to it.

Try to use a ttf font instead of an otf font. Subsetting works a lot better on the otf fonts. Also, I understood from others that the subsetting in Calibre is not always that good in reducing the size of the font.

[SBT]

What about using Fontforge and copying the required glyphs into a new, blank font?
However, converting the font to SVG may be the safest bet.

[AlanHK]

Originally Posted by SBT

What about using Fontforge and copying the required glyphs into a new, blank font?
However, converting the font to SVG may be the safest bet.

Certainly possible, I've done a fair bit of font hacklng, but messy. For one thing, just locating the characters you need in a huge Chinese font isn't easy if you aren't literate in Chinese.

Otherwise, I stay away from SVG. I used some simple SVG (as generated by the Sigil plugin) to make some ad pages that scaled nicely, but they apparently disappeared on some devices and didn't translate to Kindle at all. Impossible to debug when I don't have the devices myself, so I just dumbed the code down.

The scaled image solution is pretty likely to work in all situations, inelegant though it may be.

However, even if any of these these hacks work they make a mess of code that is a pain to edit and maintain.

If it comes up again I'll have another try at making subsetting work efficiently.

[RbnJrg]

Originally Posted by AlanHK

Otherwise, I stay away from SVG. I used some simple SVG (as generatd by the Sigil plugin) to make some ad pages that scaled nicely, but they apparently disappeared on some devices and didn't translate to Kindle at all.

To convert a glyph in a svg image is a piece of cake. Do the following:

1. Open the font (with the glyph of your interest) with the Windows Font Viewer (you don't need to install the font).
2. After that, open Inkscape.
3. In Inkscape, select the Text tool (or press F8).
4. Now, in the toolbar, select the font family that you open in the step 1 (it will be available on the font family list) and also select a font size of 144.
5. Type the letter (the glyph) you want to convert in a svg image.
6. Press F1 (to change to Select tool); after that the glyph will appear selected.
7. Now select Path/Object to path command in the menu bar.
8. After that select Archive/Document properties... and in the dialog that appears select "Fit page to content".
9. Save all as Plain SVG (very important).

That's all. Now you'll be able to use that glyph as any other image. The resulting file will have no more than 2KB

Kindle (at least Kindle models that support .kf8) has plenty support of svg images. Maybe you didn't save the svg image as plain svg and for that reason you can see the image on those devices. Do the try with the above procedure and the svg will display in Kindle.

Regards

[AlanHK]

Originally Posted by RbnJrg

To convert a glyph in a svg image is a piece of cake. Do the following:

Making the svg isn't the problem. It's that I was told the pages using svg simply did not appear on some devices. (iPad using their Kindle player.)

Since it worked for me, in Sigil, Calibre, and Amazon's Kindle previewer, but not my client, who is on another continent, trying to track down the problems(s) is impractical. Every modify/check takes a day and we have a deadline.

I've had to back off from using elegant code several times because of this kind of issue.

I know some people leap into things like media queries and try to code for every device separately, I don't have the time and am not earning enough from this one job to devote the time and money (to buy hardware) to make it work. So I use the simplest, least demanding code that works in all cases.

In this case, I have 2 solutions that do work: embedded font and embedded image. Going forward I hope I can make the font subsetting work better. A file that works and has standard coding is preferable, to me, even at the cost of a bloated file.

[SBT]

Originally Posted by AlanHK

I know some people leap into things like media queries and try to code for every device separately, I don't have the time and am not earning enough from this one job to devote the time and money (to buy hardware) to make it work. So I use the simplest, least demanding code that works in all cases.

@AlanHK: You are probably sensible in your priorities. I'll add a couple of observations:

• The aesthetic advantage of using SVG instead of raster formats for inline glyphs is that the anti-aliasing is more or less the same as for ordinary text, giving nice crisp outlines. Rasters will very often have a slight fuzziness and jaggedness. The quality of scaling algorithms also vary between e-readers. I've had some bad experiences with PNG downscaling, and now use GIF instead for loss-free compression.
  However, as long as you get the scaling of your character image right, you should get a result satisfacory for all but the most discerning readers...
• Kindle for iOS seems like a near complete train wreck to me. Even with an iPad and Mac available, there seems no way of converting anything except trivial texts to a decent version.
• Specifying width in em's doesn't seem to work for mobi-only devices, you have to have a fixed size. To ensure a sufficient DPI, I specify the width and height HTML attributes (not as CSS). However, this requires use of media queries (Anybody know of a better way?)
• The Previewer isn't quite up to the job (but you've probably noticed that already). I particularly miss proper support for media queries and the opportunity to change line spacing.
• And let's not forget that some devices, particularly older ones, have pretty limited UTF-8 support, so that even with embedded fonts, you risk getting just a '?'

[JSWolf]

Originally Posted by AlanHK

That's what I did try.

It made the font about half the original size, but still obviously contained thousands of glyphs in addition to the 6 actually used.

I had a deadline so had to submit it regardless of bloat.

I haven't had time since to return to it.

I find that if I use ePUBOptimizer to reduce the size of TTF fonts, I can still get a little bit more by using Calibre after that to subset. It works better than either one on it's own. Also ePUBOptimizer optimizes images to be smaller without changing the resolution or quality. Try it, it will work rather well and it will make your book that much better. I have to say that hate is a good word in describing authors (who make their own eBook) and publishers who use graphics instead of an embedded font for some characters. This is a serious no-no and should never be done. You did it and I now hate your eBook.