Quote:
Originally Posted by chrisridd
TL;DR: What's the trick for using a specific font in an SVG inside an epub?
I'm trying to embed some diagrams containing text into an epub. I'd very much prefer to embed them as SVG than to render them as 300ppi PNGs. But I cannot figure out how to handle text, which obviously specifies a font-family. I do want to leave the text as text, not convert to curves or pixels.
Unfortunately my ereader (PocketBook, based AIUI on the Adobe RMSDK) does not seem to honour the font-family. OK, so probably the specified font isn't present on the device. Even if the family is described with a list of fallbacks (looks like CSS but probably is not) including the generic sans-serif, I don't get sans-serif.
So I tried including a font in the epub, and ensured that the SVG used the correct name of the font. Nope, that came out as my e-readers default font.
Argh! What do I need to do?
|
It's not easy the answer, specially if you want to do the things by hand. My advice is that you use Inkscape to generate the .svg image, save it as plain svg and then insert that file to your epub.
PocketBook has two render engines; one based on RMSDK for epub2 and one based on webkit for epub3. What kind of epub are you working on?
The font you want for your svg, is it embedded in your epub? Because svg honors embedded fonts. And the easiest way to use that font (or fonts) is by mean of the tag <foreignObject>:
https://developer.mozilla.org/en-US/.../foreignObject
And always use pixels (px) not "em" inside a svg.