SVG and fonts

[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?

[RbnJrg]

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.

[chrisridd]

Originally Posted by RbnJrg

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.

I'm using Affinity Designer, exporting as SVG "Digital small size" - some sort of "profile" anyway - which means the text comes out as:

<text x="248.563px" y="641.791px" style="font-family:'DINAlternate-Bold', 'DIN Alternate', sans-serif;font-weight:700;font-size:12px;">Height</text>

That looks pretty plausible. The names match the various names in the TrueType file.

Originally Posted by RbnJrg

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?

Ah, good point. I'm using epub3.

Originally Posted by RbnJrg

The font you want for your svg, is it embedded in your epub? Because svg honors embedded fonts.

Yes it is embedded in the epub. It is not used by anything in the HTML or CSS, only by name in the SVG (see above) and in the OPF:

<item id="DIN_Alternate_Bold.ttf" href="Fonts/DIN%20Alternate%20Bold.ttf" media-type="font/ttf"/>

And the whole point of my post was that it is not honouring the embedded font.

Originally Posted by RbnJrg

And the easiest way to use that font (or fonts) is by mean of the tag <foreignObject>:

Ah, that's interesting. It seems a bit perverse to do that instead of svg:text but if it works... I will try that later.

[JSWolf]

Originally Posted by RbnJrg

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.

Pocketbook uses the latest RMSDK so it can do ePub 3.

[chrisridd]

Well I can't even get an embedded font to work in basic HTML/CSS, so I will have to figure that out first.

[Karellen]

Originally Posted by chrisridd

Well I can't even get an embedded font to work in basic HTML/CSS, so I will have to figure that out first.

Like this...

[Quoth]

Unless it's for your own use personally you can't rely on embedded fonts. Calibre Editor lets you check font status and embed them.

Creating in in Inkscape is good advice. Then no reliance on font embedding.

[RbnJrg]

Originally Posted by chrisridd

Well I can't even get an embedded font to work in basic HTML/CSS, so I will have to figure that out first.

By chance, did you ALSO embedd your custom font in your svg image? The following is a very old (10 years ago! ) post of mine that can be of help to you:

https://www.mobileread.com/forums/sh...51&postcount=9

But many things have changed since that old post. The code I wrote still will work in ADE 2.x/3.x (that is, epub2) and also in ADE 4.x as epub2. But in not many places more. Why? Because ereaders based on Webkit/Readium won't honor embedded fonts in a svg image. And as practically all epub3 ereaders of today are based on webkit or Readium, your custom fonts won't be displayed on them. So you should do what you don't want to do: convert your svg text in paths so your text will be showed everywhere.

In the post I mention above, you can find my test epub. First, open that epub in ADE (you'll see that the custom font Marnie is showed). Then open that epub in Sigil (for example); you'll see that the custom font is not displayed (also is not displayed on any of the three Sigil's plugins to read epubs). Why? Because Sigil is based on webkit. You neither will be able to watch the custom font in Thorium (that is based on Readium). So your best bet is to convert your svg text in paths.

[chrisridd]

Originally Posted by RbnJrg

By chance, did you ALSO embedd your custom font in your svg image? The following is a very old (10 years ago! ) post of mine that can be of help to you:

No, I created a different test book with HTML, CSS, and a font. No SVG.

The embedded font wasn't rendered, with either PB Reader version. I will look at your test files.

[chrisridd]

So I tried one of the T S Eliot samples with embedded fonts from IDPF's github.

The embedded font wasn't used in either version of PB Reader.

I figured it out!

The HTML didn't specify any font at all apart from the custom paragraph. The reader app was set to use my current favourite font, and that seems to be overriding everything in the book. That seems a bit heavy-handed to me.

Changing the reader to use the "default" font (whatever that might be, some kind of serif font) and ... the embedded font renders.

Using "!important" in the CSS using the embedded font does not help.

This has been a nice little detour. Plenty of potholes and roadworks, to be sure.

[Quoth]

Originally Posted by chrisridd

The reader app was set to use my current favourite font, and that seems to be overriding everything in the book. That seems a bit heavy-handed to me.

That's common. Some readers/apps only override the body font and some override everything. Some apps never allow publisher fonts. Kindle you have to select Publisher.
On Kobo eink the behaviour is different for epub and kepub (or renamed epubs to use that renderer), One of those overrides all fonts with chosen and the other just most or body.

If it's accessibility rather than cosmetic it makes sense to override all, except the OpenDyslexic font has no advantage and may be worse (a graphic design project with no scientific basis) and for accessibility simply making stuff bigger is best.

[chrisridd]

Perhaps I am indeed used to how the kepub engine did things.

I need to get back to my original problem with SVG text.