![]() |
#1 |
Guru
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 968
Karma: 2209358
Join Date: Nov 2011
Location: London, UK
Device: Kobo Aura, Kobo Aura ONE, PocketBook InkPad Color 3
|
SVG and fonts
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? |
![]() |
![]() |
![]() |
#2 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,582
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
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. Last edited by RbnJrg; 05-20-2024 at 03:15 PM. |
|
![]() |
![]() |
Advert | |
|
![]() |
#3 | |||
Guru
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 968
Karma: 2209358
Join Date: Nov 2011
Location: London, UK
Device: Kobo Aura, Kobo Aura ONE, PocketBook InkPad Color 3
|
Quote:
<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. Quote:
Quote:
<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. 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. |
|||
![]() |
![]() |
![]() |
#4 | |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,783
Karma: 134321338
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
![]() |
![]() |
![]() |
#5 |
Guru
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 968
Karma: 2209358
Join Date: Nov 2011
Location: London, UK
Device: Kobo Aura, Kobo Aura ONE, PocketBook InkPad Color 3
|
Well I can't even get an embedded font to work in basic HTML/CSS, so I will have to figure that out first.
|
![]() |
![]() |
Advert | |
|
![]() |
#6 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,295
Karma: 6700864
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
|
Like this...
|
![]() |
![]() |
![]() |
#7 |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,247
Karma: 89531599
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
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. |
![]() |
![]() |
![]() |
#8 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,582
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
![]() 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. Last edited by RbnJrg; 05-21-2024 at 09:44 AM. |
|
![]() |
![]() |
![]() |
#9 | |
Guru
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 968
Karma: 2209358
Join Date: Nov 2011
Location: London, UK
Device: Kobo Aura, Kobo Aura ONE, PocketBook InkPad Color 3
|
Quote:
The embedded font wasn't rendered, with either PB Reader version. I will look at your test files. |
|
![]() |
![]() |
![]() |
#10 |
Guru
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 968
Karma: 2209358
Join Date: Nov 2011
Location: London, UK
Device: Kobo Aura, Kobo Aura ONE, PocketBook InkPad Color 3
|
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. |
![]() |
![]() |
![]() |
#11 | |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,247
Karma: 89531599
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
Quote:
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. |
|
![]() |
![]() |
![]() |
#12 |
Guru
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 968
Karma: 2209358
Join Date: Nov 2011
Location: London, UK
Device: Kobo Aura, Kobo Aura ONE, PocketBook InkPad Color 3
|
Perhaps I am indeed used to how the kepub engine did things.
I need to get back to my original problem with SVG text. |
![]() |
![]() |
![]() |
Tags |
rmsdk, svg text |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Look Inside kills SVG and Embedded Fonts | GreggBridgeman | Kindle Formats | 4 | 05-12-2020 07:58 AM |
Can't add cover in Calibre -- get "svg-error" (the property 'svg' should be declared) | Just some guy | Editor | 7 | 04-11-2017 09:54 PM |
Kobo Software Disregards Ebedded Fonts in SVG Images | MikeWV | ePub | 19 | 07-12-2014 03:36 PM |
How to Control Fonts in SVG Images of Charts and Tables? | MikeWV | ePub | 37 | 06-18-2014 10:34 AM |
How to add alternate fonts without replacing system fonts.(this time this is a guide) | techiemonkey | Kindle Developer's Corner | 17 | 09-12-2012 04:55 PM |