Need Example SVG wrapper including caption

GrannyGrump · 11-04-2013, 03:38 AM

I am having trouble beating this into my weary brain. Sometimes it feels like the W3C site is speaking Greek, and I ain't Greek.

I've been using svg wrappers for just the image for quite a while. Now I want to try adding a caption.

Would someone be so kind as to post a code example of a simple svg wrapper (with png or jpg image) that has a simple caption at the bottom?

I don't want to get into rotating or any of the other Mardi Gras stuff right now

I'll even save some of my Halloween candy for you

Tex2002ans · 11-04-2013, 04:18 AM

I see you have learned nothing in a year and 9 months!

https://www.mobileread.com/forums/sho...d.php?t=166836

The last I recall this "image and caption" being brought up was in this topic, with RbnJrg's (non-SVG) code:

https://www.mobileread.com/forums/sho...d.php?t=223178

Doing something with HTML+CSS would probably have slightly better support/compatability/convertability (I don't know how well something like Calibre would handle converting a slightly more complex SVG?). Although I would be interested in an SVG solution as well. I know I am slacking in my SVG learning.

Toxaris · 11-04-2013, 06:16 AM

Be aware that RbnJrg uses height: 100% for body and HTML. That can have unexpected results on Sony readers, sometimes even blocking the next button. It might also happen on other readers, but at least on the TRS-1.

mrmikel · 11-04-2013, 07:30 AM

If you wrap them both together, then a Sony will see them as one block. If they are oversize, then my PRS-300 displays it also on the following page, overlapping the text.

RbnJrg · 11-04-2013, 08:44 AM

Quote:

Originally Posted by GrannyGrump

I am having trouble beating this into my weary brain. Sometimes it feels like the W3C site is speaking Greek, and I ain't Greek.

I've been using svg wrappers for just the image for quite a while. Now I want to try adding a caption.

Would someone be so kind as to post a code example of a simple svg wrapper (with png or jpg image) that has a simple caption at the bottom?

I don't want to get into rotating or any of the other Mardi Gras stuff right now

I'll even save some of my Halloween candy for you

Hi Granny;

In your .css stylesheet, write the following:

Code:

html {
    height: 100%;
    margin: 0;
}

body {
    height: 100%;
    margin: 0;
}

#container {
    height: 85%;
}

.img_caption {
    height: 15%;
    text-align:center;
    margin-top: 10px;
    font-weight: bold;
}

p {
    text-align: justify;
    text-indent: 1em;
    font-size: 1em;
    margin-bottom: 1em;
}

And in your .html file write this code:

Code:

<body>
  <div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 248 310" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="310" width="248" xlink:href="../Images/Obama.jpg"></image>
    </svg>
  </div>

  <div class="img_caption">
    Barak Obama<br />
    President of the United States of America
  </div>
</body>

Of course, you'll have to adapt the viewBox of your SVG wrapper according to your image. Also take in count that the height of the id "container" plus the height of the class "img_caption" must be equal to 100%. This solution is not so perfect as my solution for the .kf8 format but this one works in ADE

Below I attach screenshots on my ADE and the respective ePub.

Regards
Rubén

Toxaris · 11-04-2013, 10:18 AM

Like I said, that solution does not work on all readers and can even block your reader from turning the page. YMMV.

DaleDe · 11-04-2013, 12:24 PM

It is also legal and quite possible to add text using SVG itself which will make the caption part of the image frame itself.

Dale

Tex2002ans · 11-04-2013, 12:58 PM

Quote:

Originally Posted by DaleDe

It is also legal and quite possible to add text using SVG itself which will make the caption part of the image frame itself.

Yes, this is what I believe GrannyGrump was initially asking for. Anyone have any examples of this? I don't recall ever running into any in all of these "image + caption" threads.

RbnJrg · 11-04-2013, 01:23 PM

Quote:

Originally Posted by Tex2002ans

Yes, this is what I believe GrannyGrump was initially asking for. Anyone have any examples of this? I don't recall ever running into any in all of these "image + caption" threads.

You have two variations:

1. Caption inside the svg image wrapper:

Code:

<body>
  <div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 248 310" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="310" width="248" xlink:href="../Images/Obama.jpg"></image>
    </svg>
    
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
         <text x="33%" y="95%" fill="red">Barak Obama</text>
    </svg> 
  </div> 
</body>

2. Caption outside the svg image wrapper:

Code:

<body>
  <div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 248 310" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="310" width="248" xlink:href="../Images/Obama.jpg"></image>
    </svg>   
  </div> 

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <text x="40%" y="20" fill="black">Barak Obama</text>
  </svg> 
</body>

But is not easy to center the text proceding of that way.

Regards
Rubén

RbnJrg · 11-04-2013, 01:26 PM

Quote:

Originally Posted by Toxaris

Like I said, that solution does not work on all readers and can even block your reader from turning the page. YMMV.

That solution works for ADE. But I don't know if it works for the Sony, Nook, Kobo, etc. devices (I only have a Kindle). Perhaps, trial and error is the only way to know if the procedure is suitable for those ereaders.

At_Libitum · 11-04-2013, 01:34 PM

I have noticed that several e-Readers on the iPhone suffer from next-page blockage if using a CSS body height of 100%. Sometimes even to the point that you cannot go back too

EDIT: Almost forgot the most important thing.

You are not limited to using pixel size for the image dimension, you can also use percentages. If you set the viewbox to the exact size of the image and then height and width of the svg container to 100%, it will fit things nicely within the page when positioning the svg elements in the container.

Centering is done via separate anchor attribute. See below example for an svg with embedded caption. Image is scaled down to 95% height, the width will automatically adjust because "preserveAspectRatio" prevents the image from distorting and also controls the alignment within the image container. The reduction in height will place the image container vertically aligned to top. So leave the width at 100% for horizontal centering.

Code:

<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidyMid meet" version="1.1" viewBox="0 0 640 960" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="95%" width="100%" xlink:href="../Images/fullpage.png"/>
<text text-anchor="middle" font-size="xx" x="50%" y="98%" fill="black">Caption</text>
</svg>

You could also put a link around the text like so (rarely supported in e-readers)

Code:

<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidyMid meet" version="1.1" viewBox="0 0 640 960" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="95%" width="100%" xlink:href="../Images/fullpage.png"/>
<a xlink:href="someplace else"><text text-anchor="middle"  font-size="xx" x="50%" y="98%">Caption</text></a>
</svg>

caveat: iBooks will not display this. Most eReaders I tried which support svg images, had no problems with the text caption, but the link feature is badly or not supported by most all I've tried it with...

DaleDe · 11-04-2013, 02:05 PM

Quote:

Originally Posted by RbnJrg

You have two variations:

1. Caption inside the svg image wrapper:

Code:

<body>
  <div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 248 310" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="310" width="248" xlink:href="../Images/Obama.jpg"></image>
    </svg>
    
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
         <text x="33%" y="95%" fill="red">Barak Obama</text>
    </svg> 
  </div> 
</body>

2. Caption outside the svg image wrapper:

Code:

<body>
  <div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 248 310" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="310" width="248" xlink:href="../Images/Obama.jpg"></image>
    </svg>   
  </div> 

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <text x="40%" y="20" fill="black">Barak Obama</text>
  </svg> 
</body>

But is not easy to center the text proceding of that way.

Regards
Rubén

The second svg is not really necessary since the x, y can be used to space the text at the bottom of the image or under it. No need for a wrapper. Just size the svg height to more than the image height and it should be fine. Centering is a trial and error approach but the use can specify the length of the line of text and it will been spaced within the length.

Dale

Jellby · 11-04-2013, 02:16 PM

Quote:

Originally Posted by DaleDe

Centering is a trial and error approach but the use can specify the length of the line of text and it will been spaced within the length.

Can't you use text-anchor="middle"?

DaleDe · 11-04-2013, 02:45 PM

Quote:

Originally Posted by Jellby

Can't you use text-anchor="middle"?

True enough, I had missed that.

Dale

RbnJrg · 11-04-2013, 03:05 PM

Quote:

Originally Posted by At_Libitum

Almost forgot the most important thing.

You are not limited to using pixel size for the image dimension, you can also use percentages. If you set the viewbox to the exact size of the image and then height and width of the svg container to 100%, it will fit things nicely within the page when positioning the svg elements in the container.

Centering is done via separate anchor attribute. See below example for an svg with embedded caption. Image is scaled down to 95% height, the width will automatically adjust because "preserveAspectRatio" prevents the image from distorting and also controls the alignment within the image container. The reduction in height will place the image container vertically aligned to top. So leave the width at 100% for horizontal centering.

Code:

<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidyMid meet" version="1.1" viewBox="0 0 640 960" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="95%" width="100%" xlink:href="../Images/fullpage.png"/>
<text text-anchor="middle" font-size="xx" x="50%" y="98%" fill="black">Caption</text>
</svg>

Hi At_Libitum;

Your solution is very elegant but regrettably, has one fail: it doesn't work in ADE

So, the only solution I see is to employ a image with a blank space below and to add the caption in that blank space. See the following:

1. In the .css stylesheet:

Code:

p {
    text-align: justify;
    text-indent: 1em;
    font-size: 1em;
    margin-bottom: 1em;
}

2. In the .html file:

Code:

<body>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 248 340" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="340" width="248" xlink:href="../Images/Obama.jpg"></image>

      <text text-anchor="middle" x="124" y="325" fill="red" style="font-weight: bold; font-size: 15px">Barak Obama</text>
    </svg>
  </div>
</body>

The original image was 248 x 310 px. With a image processor I modified its canvas size and I added a blank space below of 30px so the new image size is 248 x 340. I added the text in the position y="325" (pixels) and I used a font-size of 15px (so 325 + 15 = 340). Since the original images had a height of 310px, then there is a top margin of 15px for the caption.
To center the text I used the property text-anchor="middle" (as you well pointed out, thank you very much) and a "x" value of 124 (pixels) that is, the half of the image width.

And this time I didn't use a height of 100% for the html and body tag

And still works for ADE

Below I attach a screenshot of my ADE and the respective epub. I think this time we have the whole solution

Regards
Rubén

11-04-2013, 03:38 AM	#1
GrannyGrump Obsessively Dedicated... Posts: 3,200 Karma: 34977896 Join Date: May 2011 Location: JAPAN (US expatriate) Device: Sony PRS-T2, ADE on PC	Need Example SVG wrapper including caption I am having trouble beating this into my weary brain. Sometimes it feels like the W3C site is speaking Greek, and I ain't Greek. I've been using svg wrappers for just the image for quite a while. Now I want to try adding a caption. Would someone be so kind as to post a code example of a simple svg wrapper (with png or jpg image) that has a simple caption at the bottom? I don't want to get into rotating or any of the other Mardi Gras stuff right now I'll even save some of my Halloween candy for you Last edited by GrannyGrump; 11-04-2013 at 03:40 AM.

11-04-2013, 01:34 PM	#11
At_Libitum Addict Posts: 265 Karma: 724240 Join Date: Aug 2013 Device: KyBook	I have noticed that several e-Readers on the iPhone suffer from next-page blockage if using a CSS body height of 100%. Sometimes even to the point that you cannot go back too EDIT: Almost forgot the most important thing. You are not limited to using pixel size for the image dimension, you can also use percentages. If you set the viewbox to the exact size of the image and then height and width of the svg container to 100%, it will fit things nicely within the page when positioning the svg elements in the container. Centering is done via separate anchor attribute. See below example for an svg with embedded caption. Image is scaled down to 95% height, the width will automatically adjust because "preserveAspectRatio" prevents the image from distorting and also controls the alignment within the image container. The reduction in height will place the image container vertically aligned to top. So leave the width at 100% for horizontal centering. Code: <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidyMid meet" version="1.1" viewBox="0 0 640 960" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"> <image height="95%" width="100%" xlink:href="../Images/fullpage.png"/> <text text-anchor="middle" font-size="xx" x="50%" y="98%" fill="black">Caption</text> </svg> You could also put a link around the text like so (rarely supported in e-readers) Code: <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidyMid meet" version="1.1" viewBox="0 0 640 960" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"> <image height="95%" width="100%" xlink:href="../Images/fullpage.png"/> <a xlink:href="someplace else"><text text-anchor="middle" font-size="xx" x="50%" y="98%">Caption</text></a> </svg> caveat: iBooks will not display this. Most eReaders I tried which support svg images, had no problems with the text caption, but the link feature is badly or not supported by most all I've tried it with... Last edited by At_Libitum; 11-04-2013 at 02:10 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Applescript Wrapper Application for Kindlegen	pdurrant	Kindle Formats	50	02-18-2020 01:16 AM
Adding an SVG Wrapper	ghostyjack	Sigil	16	06-15-2013 05:13 AM
An Issue about a SVG wrapper	RbnJrg	Kindle Formats	29	06-10-2013 08:11 PM
Keeping caption and illustration together	John123	ePub	4	12-02-2012 09:19 AM
Center Image and Caption	SamL	ePub	11	08-12-2011 09:27 AM

11-04-2013, 04:18 AM	#2
Tex2002ans Wizard Posts: 2,297 Karma: 12126329 Join Date: Jul 2012 Device: Kobo Forma, Nook	I see you have learned nothing in a year and 9 months! https://www.mobileread.com/forums/sho...d.php?t=166836 The last I recall this "image and caption" being brought up was in this topic, with RbnJrg's (non-SVG) code: https://www.mobileread.com/forums/sho...d.php?t=223178 Doing something with HTML+CSS would probably have slightly better support/compatability/convertability (I don't know how well something like Calibre would handle converting a slightly more complex SVG?). Although I would be interested in an SVG solution as well. I know I am slacking in my SVG learning.

11-04-2013, 06:16 AM	#3
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Be aware that RbnJrg uses height: 100% for body and HTML. That can have unexpected results on Sony readers, sometimes even blocking the next button. It might also happen on other readers, but at least on the TRS-1.

11-04-2013, 07:30 AM	#4
mrmikel Color me gone Posts: 2,089 Karma: 1445295 Join Date: Apr 2008 Location: Central Oregon Coast Device: PRS-300	If you wrap them both together, then a Sony will see them as one block. If they are oversize, then my PRS-300 displays it also on the following page, overlapping the text.

11-04-2013, 10:18 AM	#6
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Like I said, that solution does not work on all readers and can even block your reader from turning the page. YMMV.

11-04-2013, 12:24 PM	#7
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	It is also legal and quite possible to add text using SVG itself which will make the caption part of the image frame itself. Dale

Advert

Advert