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 03-11-2015, 07:13 AM   #1
roger64
Wizard
roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.
 
Posts: 2,333
Karma: 2385865
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
svg image on top of a background png image

Hi,

I have seen an image on a children's book and I try to reproduce it on an EPUB2. Basically, I use:
- a png image (about 50% percent of its surface is transparent) as a background-image
- a svg image containing two blocks of text which is supposed to display within the transparent part of the background image.

The results so far are not that great. Both images display fine but my problem is that they coincide not perfectly. Could someone have a look at the code of the page?

Spoiler:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="fr-FR" xmlns="http://www.w3.org/1999/xhtml">
<!-- This file was converted to xhtml by Writer2xhtml ver. 1.5.1. See http://writer2latex.sourceforge.net for more info. -->
<head>
<title>Libertine</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
<link href="styles/styles1.css" rel="stylesheet" type="text/css" />

<style type="text/css">
body {
background-image: url(enfant.png);
background-repeat:no-repeat;
margin: 0 0 0 0;
}
</style>
</head>

<body>

<div>
<img alt="Image" src="texte-enfant.svg" style="width:100%" />
</div>
</body>
</html>
roger64 is offline   Reply With Quote
Old 03-11-2015, 05:41 PM   #2
RbnJrg
Guru
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: 999
Karma: 3598443
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Hi Roger;

I didn't the try but I think you must use the background not in "body" but in the div tag, something like:

Code:
<div class="enfant_back">
     <img alt="Image" src="texte-enfant.svg" style="width:100%" />
</div>
and in your .css file:

Code:
.enfant_back {
     background-image: url(enfant.png);
     background-repeat: no-repeat;
     background-size: Npx Mpx;
     margin: 0 0 0 0; 
}
where N is the width and M the height of your svg image (or you can try to adjust the svg viewbox to mach the .png image to avoid distortion; in this last case, you also must adjust the position of the svg text).

As I told you, I didn't the try but I think it should work

Regards
Rubén
RbnJrg is offline   Reply With Quote
Advert
Old 03-11-2015, 08:04 PM   #3
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 11,141
Karma: 12523952
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
If you put the bitmap image inside the SVG itself then any text or vector graphics should be on top of the image assuming you place it within the boundaries of the png file.

Dale
DaleDe is offline   Reply With Quote
Old 03-12-2015, 12:05 AM   #4
roger64
Wizard
roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.
 
Posts: 2,333
Karma: 2385865
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
Thank you both for your advices. I had initially a complete svg image with a png inside, but I scrapped it because it was huge and did not display properly. But there may probably have been mistakes on my side.

I am not sure if the use of a background image is such a great idea. The display is very rigid.

I am also trying another idea, putting together the two images within the same container and using a negative margin to make them fit together. It displays nicely on the Calibre editor but poorly on an EPUB. I began with the svg on top of the png, and tried also the other way (png on top), using the property:
Code:
background-color:transparent
.

Anyway, I will follow on trying.
roger64 is offline   Reply With Quote
Old 03-12-2015, 09:53 AM   #5
roger64
Wizard
roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.
 
Posts: 2,333
Karma: 2385865
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
This is to report success using the following solution:

- import the png file (cleaned previously with Gimp) into Inkscape and link it (not incorporate)
- fill up the text part with the Text tool of Inkscape.
- save the svg file as a simple svg
- import both images in the EPUB
- insert the svg file in the xhtml file
- declare the new position of the png file within the svg file

... and that's it.

Pretty convenient! Thanks for your help!!


but one thing: the png image does not display on the EPUB!! However if I import the EPUB in Calibre and then convert it to PDF using Jellby's plugin, I get a perfect PDF with text and image...

There is probably an easy explanation...

Last edited by roger64; 03-12-2015 at 11:17 AM. Reason: Mystery
roger64 is offline   Reply With Quote
Advert
Old 04-20-2015, 11:08 AM   #6
roger64
Wizard
roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.
 
Posts: 2,333
Karma: 2385865
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
Hi

I resumed my trials and got some advice. I am still not here...

1. - Take a png image. Import it to Inkscape as a link, write some lines of text around the drawing, save the text as a plain svg. The image and the text display fine with Inkscape.

2. - Import both png image and svg text in the joint EPUB2. I made sure the svg text has the link to the png image within the EPUB2.

3. - Here are my two best trials:
- a common svg wrapper: the text is well displayed, the png image is missing
- a svg file using an object tag. Text and image are well displayed but the whole is way too big and I cannot scale it.

Using svg inline was no better. Using an image tag was worse.

Here are the files for you to look at. If somebody manages to get a fine display, I'll be very happy to learn how to do it and to understand what I missed.

Note: the used font is Linux Libertine O but it has not been embedded. Do not take into account the display of the font.

Copyright: text from Charles Perrault (died 1703), image from Arthur Rackham (died 1939).
Attached Files
File Type: zip svg.zip (410.6 KB, 66 views)

Last edited by roger64; 04-20-2015 at 11:11 AM. Reason: inline
roger64 is offline   Reply With Quote
Old 04-20-2015, 02:59 PM   #7
jbacelar
Interested in the matter
jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.
 
jbacelar's Avatar
 
Posts: 276
Karma: 426060
Join Date: Dec 2011
Location: Spain, south coast
Device: Pocketbook Touch HD
An example of what I use in such cases.
Attached Files
File Type: zip essai.zip (199.6 KB, 58 views)
jbacelar is offline   Reply With Quote
Old 04-20-2015, 04:06 PM   #8
roger64
Wizard
roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.
 
Posts: 2,333
Karma: 2385865
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
Thank you for the demo which saves me a lot of time and hats off! I will study it carefully and try to repeat it.
roger64 is offline   Reply With Quote
Old 04-20-2015, 04:54 PM   #9
RbnJrg
Guru
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: 999
Karma: 3598443
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
By chance Roger, did you see these posts?:

https://www.mobileread.com/forums/sho...88&postcount=1

https://www.mobileread.com/forums/sho...87&postcount=5

Maybe you don't need to use a .svg image; just the background .png and normal text.
RbnJrg is offline   Reply With Quote
Old 04-20-2015, 05:15 PM   #10
roger64
Wizard
roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.
 
Posts: 2,333
Karma: 2385865
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
Quote:
Originally Posted by RbnJrg View Post
By chance Roger, did you see these posts?.
Thanks Rubén for the links that I did not see previously. You are right, there are several possible solutions but I have rather use svg than background images.
My problem today was the link to the png image. If I integrated it within Inkscape, the size of the image increased too much. But as a link, it's OK and very precise.
roger64 is offline   Reply With Quote
Old 04-22-2015, 12:14 AM   #11
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
dgatwood's Avatar
 
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Quote:
Originally Posted by roger64 View Post
Thank you both for your advices. I had initially a complete svg image with a png inside, but I scrapped it because it was huge and did not display properly. But there may probably have been mistakes on my side.
Don't include the PNG image itself in the SVG. Reference the image with an svg image tag. That puts you in control over the exact dimensions of the PNG within the SVG viewport.
dgatwood is offline   Reply With Quote
Old 04-22-2015, 09:42 AM   #12
roger64
Wizard
roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.
 
Posts: 2,333
Karma: 2385865
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
Quote:
Originally Posted by dgatwood View Post
Don't include the PNG image itself in the SVG. Reference the image with an svg image tag. That puts you in control over the exact dimensions of the PNG within the SVG viewport.
Thanks for the tip. Is your proposal something different of what jbacelar proposed in his solution?

If you have something different in mind, would you care writing what you mean? One small example would be immensely useful. Sorry to bother you with this.

I have a question about embedded files : Inkscape produces svg text files with lots of bells and whistles. On the other hand, these plain svg files do recognize correctly the embedded font in the EPUB.

To get the same result with the basic text file I've just written, I have the feeling that I would need to add something else than the font-family element which is within the text tag of plain svg files.

Last edited by roger64; 04-22-2015 at 11:42 AM.
roger64 is offline   Reply With Quote
Old 04-22-2015, 12:16 PM   #13
jbacelar
Interested in the matter
jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.
 
jbacelar's Avatar
 
Posts: 276
Karma: 426060
Join Date: Dec 2011
Location: Spain, south coast
Device: Pocketbook Touch HD
Quote:
Originally Posted by roger64 View Post
To get the same result with the basic text file I've just written, I have the feeling that I would need to add something else than the font-family element which is within the text tag of plain svg files.
The essai with embedded font.
Attached Files
File Type: epub essai with embedded font.epub (303.2 KB, 80 views)

Last edited by jbacelar; 04-22-2015 at 12:49 PM. Reason: Sorry! wrong file.
jbacelar is offline   Reply With Quote
Old 04-22-2015, 02:05 PM   #14
roger64
Wizard
roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.roger64 ought to be getting tired of karma fortunes by now.
 
Posts: 2,333
Karma: 2385865
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
@jbacelar

Your solution is pretty handy, easy to implement (using snippets) and very precise.

Again, thank you for a clear proof on how to do it. As I had used before a "plain svg" file produced by Inkscape, I noticed that Inkscape kept repeating the font-family name for each line of text. And I thought that THIS was necessary for svg text files. Another wrong idea discarded.



Also I thought wrongly that it was necessary to write the text on the transparent part of a png. I did some more tries, and I realize now that it works as well with plain jpg files.

Does the size of the viewbox concerns only the size of the image or the intended size of the svg as a whole (I mean including text space)?

Last edited by roger64; 04-22-2015 at 02:07 PM. Reason: space
roger64 is offline   Reply With Quote
Old 04-22-2015, 02:30 PM   #15
jbacelar
Interested in the matter
jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.jbacelar ought to be getting tired of karma fortunes by now.
 
jbacelar's Avatar
 
Posts: 276
Karma: 426060
Join Date: Dec 2011
Location: Spain, south coast
Device: Pocketbook Touch HD
You're welcome.

Quote:
Originally Posted by roger64 View Post
Does the size of the viewbox concerns only the size of the image or the intended size of the svg as a whole (I mean including text space)?
The viewBox is applied to all the svg, inside we will have shapes, images, text, etc.

I recommend this interesting direction:
http://commons.oreilly.com/wiki/inde...ls/Coordinates

For me it has been a great help.
jbacelar is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Background image with text on top? Psymon ePub 123 12-19-2013 12:30 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


All times are GMT -4. The time now is 10:38 PM.


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