svg image on top of a background png image - Page 2

roger64 · 04-22-2015, 03:01 PM

Thanks for the link and reply.

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.

RbnJrg · 04-22-2015, 05:45 PM

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).

jbacelar · 04-22-2015, 06:08 PM

Quote:

Originally Posted by RbnJrg

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.

RbnJrg · 04-22-2015, 07:29 PM

Quote:

Originally Posted by jbacelar

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".

jbacelar · 04-23-2015, 03:32 AM

Quote:

Originally Posted by RbnJrg

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?

roger64 · 04-23-2015, 06:20 AM

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.

Doitsu · 04-23-2015, 06:32 AM

Quote:

Originally Posted by jbacelar

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.

jbacelar · 04-23-2015, 10:51 AM

Quote:

Originally Posted by Doitsu

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.

Doitsu · 04-23-2015, 12:01 PM

Quote:

Originally Posted by jbacelar

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.

roger64 · 04-24-2015, 09:39 AM

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

Doitsu · 04-24-2015, 11:00 AM

Quote:

Originally Posted by roger64

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

No. AFAIK, everything renders as expected.

04-24-2015, 09:39 AM	#25
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	@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? Attached Thumbnails Last edited by roger64; 04-24-2015 at 10:03 AM. Reason: checking

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Background image with text on top?	Psymon	ePub	144	05-26-2020 05:48 PM
Kindle paperwhite crop background-image on top/bottom	j.puff@ppp.eu	Kindle Formats	2	08-28-2013 11:58 AM
Kindle paperwhite crop background-image on top/bottom	j.puff@ppp.eu	Kindle Developer's Corner	1	08-26-2013 06:02 PM
Scaling up an image via SVG	Kayto	ePub	27	01-26-2013 03:38 AM
hotlinking png image	bobcdy	Sigil	21	09-21-2010 04:56 AM

04-22-2015, 03:01 PM	#16
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	Thanks for the link and reply. 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.

04-23-2015, 06:20 AM	#21
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	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.

Advert

Advert