MobileRead Forums - svg image on top of a background png image

MobileRead Forums (https://www.mobileread.com/forums/index.php)

- ePub (https://www.mobileread.com/forums/forumdisplay.php?f=179)

- - svg image on top of a background png image (https://www.mobileread.com/forums/showthread.php?t=257125)

Thanks for the link and reply. :thanks:

I had some trouble producing Prince PDF from an EPUB file without embedded font, until I realized that the PDF was using a different font than the one on my Linux, a font whose metrics were slightly larger, and of course, it spoilt everything... With your last EPUB, everything is fine.

To provide users with a consistent display on all kinds of supports, I think it should be a good practice to embed a font.

Again thanks for your help and demo. :thumbsup:

Hi Roger and Jbacelar;

Sorry but I'm affraid the the embedded font, as is implemented, it won't work on a .svg file. In fact, in the essai.epub that Jbacelar attached the font doesn't work. In order that an embedded font works on a svg file, you must add -in the svg statements, the following definition:

Code:

    <defs>

       <style type="text/css">

         <![CDATA[

           @font-face {

              font-family: "Charis";

              src: url("../Fonts/Charis-SIL2.ttf");

           }

         ]]>

       </style>

    </defs>

You should have in your .css file the following:

Code:

@font-face {

    font-family: "Charis";

    src: url("../Fonts/Charis-SIL2.ttf");

}



body {

    font-family: "Charis"; /* this only is neccesary if you want the embbed font for all the text in your ebook; if you only want the embedded font in your .svg, then don't include this declaration */

}

and in your .xhtml file:

Spoiler:

As you can see, the text should be written by using the tags <tspan></tspan> and in the <text> tag must be defined the styles of the font (font-size; font-family; font-color; font-weight; etc., etc.). The positioning of the text must be defined with <tspan> but font-styles must be defined once, at the beginning, with the <text> tag.

I attach a new essai.epub so you can study the code better.

Regards.
Rubén

UPDATE: if you want to convert the .epub in .azw3 you should replace:

Code:

<text font-family="Charis" style="font-size: 24px">

with

Code:

<text font-family="Charis" font-size="24">

In fact, this last form works for both, .epub and .azw3 so should be preferable to use this sintax. And I think that is better to use a font-size of 22 instead of 24 (to me, it looks better).

Quote:

Originally Posted by RbnJrg (Post 3088461)

In fact, in the essai.epub that Jbacelar attached the font doesn't work.

My epub works perfectly in ADE (2 and 4) and Calibre viewer.

View attachments, and all the covers (V.2) of epubs I uploaded here, in MobileRead.

Quote:

Originally Posted by jbacelar (Post 3088476)

My epub works perfectly in ADE (2 and 4) and Calibre viewer.

View attachments, and all the covers (V.2) of epubs I uploaded here, in MobileRead.

Hi Jbacelar:

I don't dispute that you can see the font on those programs. But if you open your .epub with -for example- Sigil or with Kindle Previewer; you won't be able to see the font Charis SIL.

The correct way to add a custom font (in a .svg image) is as I said in my previous post :) Also you can read this old post mine:

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

But is not my invention that code :) Please, read this:

http://graphicdesign.stackexchange.c...age-on-my-site

and:

http://nimbupani.com/about-fonts-in-svg.html

Of course; you always can consult:

http://www.w3.org/TR/SVG/fonts.html#SVGFontsOverview

By using <defs> inside <svg> tags you can be sure that your custom font will be showed in any reader that supports svg.

Regards

UPDATE: Please, use another font instead of Charis (for example "Fontin") and tell me if your ADE can show it with your method; my ADE can't. Like Charis is similar to Times, maybe you are watching Times in ADE and not Charis; for this reason I ask you do the try with a font like "Fontin".

Quote:

Originally Posted by RbnJrg (Post 3088504)

Hi Jbacelar:

I don't dispute that you can see the font on those programs. But if you open your .epub with -for example- Sigil or with Kindle Previewer; you won't be able to see the font Charis SIL.

UPDATE: Please, use another font instead of Charis (for example "Fontin") and tell me if your ADE can show it with your method; my ADE can't. Like Charis is similar to Times, maybe you are watching Times in ADE and not Charis; for this reason I ask you do the try with a font like "Fontin".

Well, I do not dispute your solution is pure orthodoxy.
But:
1- I insist, mine works perfectly in ADE (see attached).
2- The font CharisSil retouched by JSWolf, is perfectly distinct from the Times font.
3- Please! Kindle Previewer transforms previously epubs in mobis, and we are here in the epub subforum.
4- Currently, for epubs, ¿The orthodoxy is not ADE? :)

Hi

This tired soldier of mine got a lot of powerful assistance. :)

Thanks to both of you for your kind help. Before this thread I did not manage to display it properly and I learnt a lot of useful things along the way.

Quote:

Originally Posted by jbacelar (Post 3088650)

1- I insist, mine works perfectly in ADE (see attached).

RbnJrg is right, your code only works because Charis SIL is installed on your computer. If you delete it from your Windows fonts folder, the text will be rendered in a different font.

BTW, here's another working example, that uses the same font referencing method that RbnJrg suggests.

Quote:

Originally Posted by Doitsu (Post 3088722)

your code only works because Charis SIL is installed on your computer. If you delete it from your Windows fonts folder, the text will be rendered in a different font.

Doitsu sorry, but that's not true.
In my Windows is not installed Fontin font, and... (see the corresponding attached)
Also in my Pocketbook reader all these tests are fine.

To finish this matter, I now have uninstalled Charis Sil, I have restarted the computer, and I insist: everything works correctly.

Quote:

Originally Posted by jbacelar (Post 3088862)

Doitsu sorry, but that's not true.
In my Windows is not installed Fontin font, and... (see the corresponding attached)

Apparently, I missed the updated version (essai with embedded font.epub) that you must have attached sometimes yesterday to this post.

This version does indeed work with all ADE versions.

@Doitsu

I tried your example above. I added this rectangle above the image tag in cover.xhtml

Code:

<rect x="1" y="1" width="598" height="798"

      style="fill: none; stroke: black;"/>

I could see that last letter of the second word (Magnum) was partly out of the screen. I reduced the font-size in the svg image from 150px to 130px (see joint screenshoot) and it looks OK.

Once corrected, I of course suppress the rectangle which is here only for checking purpose.
Note: inserting the rectangle directly in the svg image gives the same result.

As my experience with svg is quite short, did I do something wrong?

Quote:

Originally Posted by roger64 (Post 3089502)

As my experience with svg is quite short, did I do something wrong?

No. AFAIK, everything renders as expected.