Font handling in SVGs

[chrisridd]

I'm about to draw a bunch of line art diagrams for a book intended for my Inkpad Color 3.

Using SVG is the "obvious" choice, however I did a quick test and it doesn't look like PB honours the specified typeface at all. Essentially everything looks like Times.

I'm drawing using Affinity Designer 2; here's a bit of my exported SVG using Times New Roman:

<text x="448.819px" y="706.625px" style="font-family:'TimesNewRomanPSMT', 'Times New Roman', serif;font-size:50px;">12pt ks@%</text>

And here's a bit of my test using Arial:

<text x="448.819px" y="708.863px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:50px;">12pt artscGR</text>

Both look plausible to me, but both get rendered wrong. Times is apparently a little wider than Times New Roman, and I noticed some text getting truncated on the RHS, so I think it is using Times.

Are there any known issues here or tricks I can use? At the end of the day I can always embed a PNG, or get the export to render text as curves, but the downsides of those options are clear.

Edit: I also tried the latest Inkscape, but it was no better.
Edit: I tried embedding the font and using @font-face in CSS - no change. I tried <link>ing the stylesheet into the SVG files - also no change.

[Doitsu]

I experimented with this more than 10 years ago and back then it only worked with ADE 4. Unfortunately, not much has changed since then.

Unless you can convince your readers to use ADE 4.x, you'll probably have to convert all SVG text to paths.

[chrisridd]

After some googling I think I've determined that PocketBook doesn't support fonts embedded in EPUBs at all, which I suspect then carries over to not supporting them in SVGs. That's really quite annoying. Surely the RMSDK supports this?

One question might be, if I installed a font in the usual system/fonts directory, can I refer to it in CSS, either with or without a @font-face? This would make the books completely non-portable, but would be a potential workaround.

Separately, I noticed that <pre> does not render with a monospaced font. But <tt> does, which is a bit surprising.

So "<pre><tt>...</tt></pre>" it is...

[Moonbase59]

Originally Posted by chrisridd

[…] I've determined that PocketBook doesn't support fonts embedded in EPUBs at all […]

I have a Pocketbook Era (PB700), firmware U700.6.8.4183, and it does work well with embedded fonts. See thread in the German E-Reader Forum, which also has a test file.

That’s not SVG though, just normal embedded fonts.

[chrisridd]

Originally Posted by Moonbase59

I have a Pocketbook Era (PB700), firmware U700.6.8.4183, and it does work well with embedded fonts. See thread in the German E-Reader Forum, which also has a test file.

Interesting. It doesn't fully work on my Inkpad Color 3. Photos attached. (Note to self, dust screen.)

But clearly it is working a bit, so that's something to build on.

Originally Posted by Moonbase59

That’s not SVG though, just normal embedded fonts.

Getting the CSS to load the font is an important step though as you can make SVG link to the same CSS file.

Thanks for the link!!

[Moonbase59]

You’re welcome!

The left pic (of the PB) looks like mine when I’ve set a font override (lower menu, "A" symbol). Are you sure this is set to "default" (which should use the embedded fonts)?

Oh, also make sure the PocketBook uses its built-in EPUB3 reader, not the EPUB2 reader. You can long-tap the book and select "Open With …" → "PB Reader (EPUB 3)". (Although this should normally default to the correct one if you haven’t changed the PB’s extensions.cfg.)

[chrisridd]

Originally Posted by Moonbase59

You’re welcome!

The left pic (of the PB) looks like mine when I’ve set a font override (lower menu, "A" symbol). Are you sure this is set to "default" (which should use the embedded fonts)?

Ah, using "default" that makes a huge difference - everything uses the new fonts.

But if you look at the bottom of my first photo, you can see one of the custom fonts being used - the line starting "besitze". But in the CSS, that's using the same rule ("block_2" class) as the paragraph above it starting "Hervorhebungen" that is being rendered differently. What?! This is why I said it works "a bit".

Editing the rules to add "!important" to the font-family doesn't seem to make a difference when I'm not using "default".

I wonder if continually replacing the book via Calibre is confusing the PB? Maybe it has cached the old version.

Originally Posted by Moonbase59

Oh, also make sure the PocketBook uses its built-in EPUB3 reader, not the EPUB2 reader. You can long-tap the book and select "Open With …" → "PB Reader (EPUB 3)". (Although this should normally default to the correct one if you haven’t changed the PB’s extensions.cfg.)

Yes, I'm using the EPUB3 reader.

[Moonbase59]

Originally Posted by chrisridd

But if you look at the bottom of my first photo, you can see one of the custom fonts being used - the line starting "besitze". But in the CSS, that's using the same rule ("block_2" class) as the paragraph above it starting "Hervorhebungen" that is being rendered differently. What?! This is why I said it works "a bit".

It’s been some years since I made that test file. Had a very quick look in Sigil, and I would assume (without looking) that the PB font override does affect <p>aragraphs but not <li> in an <ul> (the three lines starting with "besitze" are actually an unordered list).

Reader overrides can be quite tricky… ;-) I’m rather sure my Tolino Vision 5 did that differently.

[chrisridd]

I did also ask PocketBook support for some guidance, along the lines of what Kobo provide on Github.

They implied that they may help a commercial author, but essentially they told me to pound sand.