Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 05-20-2024, 01:33 PM   #1
chrisridd
Guru
chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.
 
chrisridd's Avatar
 
Posts: 949
Karma: 2146660
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?
chrisridd is offline   Reply With Quote
Old 05-20-2024, 03:05 PM   #2
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,567
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by chrisridd View Post
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.

Last edited by RbnJrg; 05-20-2024 at 03:15 PM.
RbnJrg is offline   Reply With Quote
Advert
Old 05-20-2024, 04:42 PM   #3
chrisridd
Guru
chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.
 
chrisridd's Avatar
 
Posts: 949
Karma: 2146660
Join Date: Nov 2011
Location: London, UK
Device: Kobo Aura, Kobo Aura ONE, PocketBook InkPad Color 3
Quote:
Originally Posted by RbnJrg View Post
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.

Quote:
Originally Posted by RbnJrg View Post
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.

Quote:
Originally Posted by RbnJrg View Post
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.

Quote:
Originally Posted by RbnJrg View Post
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.
chrisridd is offline   Reply With Quote
Old 05-20-2024, 06:30 PM   #4
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 74,669
Karma: 130140792
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by RbnJrg View Post
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.
JSWolf is offline   Reply With Quote
Old 05-21-2024, 03:58 AM   #5
chrisridd
Guru
chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.
 
chrisridd's Avatar
 
Posts: 949
Karma: 2146660
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.
chrisridd is offline   Reply With Quote
Advert
Old 05-21-2024, 04:52 AM   #6
Karellen
Wizard
Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.
 
Karellen's Avatar
 
Posts: 1,170
Karma: 4949904
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
Quote:
Originally Posted by chrisridd View Post
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...
Attached Thumbnails
Click image for larger version

Name:	cssfonts.jpg
Views:	32
Size:	146.5 KB
ID:	208419  
Karellen is offline   Reply With Quote
Old 05-21-2024, 04:57 AM   #7
Quoth
the rook, bossing Never.
Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.
 
Quoth's Avatar
 
Posts: 11,699
Karma: 87663461
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.
Quoth is offline   Reply With Quote
Old 05-21-2024, 09:39 AM   #8
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,567
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by chrisridd View Post
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.

Last edited by RbnJrg; 05-21-2024 at 09:44 AM.
RbnJrg is offline   Reply With Quote
Old 05-21-2024, 11:06 AM   #9
chrisridd
Guru
chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.
 
chrisridd's Avatar
 
Posts: 949
Karma: 2146660
Join Date: Nov 2011
Location: London, UK
Device: Kobo Aura, Kobo Aura ONE, PocketBook InkPad Color 3
Quote:
Originally Posted by RbnJrg View Post
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 is offline   Reply With Quote
Old 05-21-2024, 11:46 AM   #10
chrisridd
Guru
chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.
 
chrisridd's Avatar
 
Posts: 949
Karma: 2146660
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.
chrisridd is offline   Reply With Quote
Old 05-21-2024, 03:12 PM   #11
Quoth
the rook, bossing Never.
Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.Quoth ought to be getting tired of karma fortunes by now.
 
Quoth's Avatar
 
Posts: 11,699
Karma: 87663461
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
Quote:
Originally Posted by chrisridd View Post
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.
Quoth is offline   Reply With Quote
Old 05-21-2024, 03:47 PM   #12
chrisridd
Guru
chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.chrisridd ought to be getting tired of karma fortunes by now.
 
chrisridd's Avatar
 
Posts: 949
Karma: 2146660
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.
chrisridd is offline   Reply With Quote
Reply

Tags
rmsdk, svg text

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
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


All times are GMT -4. The time now is 06:45 PM.


MobileRead.com is a privately owned, operated and funded community.