Need Example SVG wrapper including caption - Page 2

At_Libitum · 11-04-2013, 04:16 PM

Quote:

Originally Posted by RbnJrg

I think this time we have the whole solution

now don't go and eat all that candy at once now.

as an aside, if that doesn't run into support issues again, the added image 'margin' could be made to look like a 'real' nameplate

or make the space transparent to not lose the text in night mode switching

RbnJrg · 11-04-2013, 04:22 PM

Quote:

Originally Posted by Jellby

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

However, in ADE doesn't work to use percentages with that property. You need to use PIXELS (I don't know why, maybe another ADE bug). So to center horizontally any text, you must use the property text-anchor="middle" AND x="nn" where "nn" is the half of width of the object, div, etc. (where you are going to write the text) in pixels.

At_Libitum · 11-04-2013, 05:23 PM

text-anchor itself does not specifically place the text, it only moves the point on which coordinates are based within the text string relative to the starting point of the text . The coordinates you specify act relative to the anchor point.

in other words, text-anchor moves the anchor point within the text and the x,y moves the anchor point within the svg container

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

Quote:

Originally Posted by At_Libitum

now don't go and eat all that candy at once now.

as an aside, if that doesn't run into support issues again, the added image 'margin' could be made to look like a 'real' nameplate

or make the space transparent to not lose the text in night mode switching

You don't really need an image margin. You can separately specify the size of the canvas in the SVG statement itself. And the div can be removed I believe.

RbnJrg · 11-04-2013, 06:11 PM

Quote:

Originally Posted by At_Libitum

text-anchor itself does not specifically place the text, it only moves the point on which coordinates are based within the text string relative to the starting point of the text . The coordinates you specify act relative to the anchor point.

in other words, text-anchor moves the anchor point within the text and the x,y moves the anchor point within the svg container

That's very right, but "x" and "y" must be in pixels in order to work in ADE. In theory, x and y can be set in em, pt, %, px, etc. but in ADE only works pixels.

RbnJrg · 11-04-2013, 06:14 PM

Quote:

Originally Posted by DaleDe

You don't really need an image margin. You can separately specify the size of the canvas in the SVG statement itself.

Hi Dale;

Do the try and watch what happens with that procedure

The caption doesn't remain with the image in ADE. For that reason I posted what I posted in

https://www.mobileread.com/forums/sho...3&postcount=15

DaleDe · 11-04-2013, 06:55 PM

This seems to work fine for me.

RbnJrg · 11-04-2013, 08:32 PM

Quote:

Originally Posted by DaleDe

This seems to work fine for me.

Ahhhh, you changed the size of the viewbox and not the size of "height" (let's say instead of height="100%" to use height="95%" doesn't work). That is a better solution

And yes, works in ADE

Just minor modifications to the code you used:

Code:

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

    <text text-anchor="middle" x="124" y="330">
      Barak Obama
      <tspan x="124" y="350">President of the United States of America</tspan>
    </text>
  </svg>
</body>

I have adjusted the "width" of the viewbox and also added the tag <tspan> to add the second line of text (so both lines are centered).

Regards
Rubén

At_Libitum · 11-04-2013, 09:46 PM

funny how we're right back at the my original suggestion, only using pixels instead of percentages.

DaleDe · 11-05-2013, 02:11 AM

Ah yes, the goal was to get something that was like what you originally wanted but one that worked instead of being broken. The difference isn't percentages vs. pixels, it was using pixels correctly to define the full space instead of restricting them to just the size of the image. The solution will work fine in ADE and likely most others.

So is it funny ha ha, or funny peculiar in your mind.

Dale

Jellby · 11-05-2013, 04:08 AM

Quote:

Originally Posted by DaleDe

And the div can be removed I believe.

The <svg> element, like an <img>, has to be contained in a block element (<div>, <p>...), it cannot be a direct child of <body>. Or maybe this is only when you use a doctype...

At_Libitum · 11-05-2013, 11:55 AM

Quote:

Originally Posted by DaleDe

So is it funny ha ha, or funny peculiar in your mind.

guess the TIC smiley wasn't enough. Just thought it was slightly comical to come out with something close to the starting point.
no double bottoms.

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

Quote:

Originally Posted by Jellby

The <svg> element, like an <img>, has to be contained in a block element (<div>, <p>...), it cannot be a direct child of <body>. Or maybe this is only when you use a doctype...

ePub check passes it fine although Sigil flight crew complains but not in a nice way. There error lists all sorts of block items but not body.

element 'svg' is not allowed for content model '(p|h1|h2|h3|h4|h5|h6|div|ul|ol|dl|pre|hr|blockquo te|address|fieldset|table|switch|form|noscript|ins |del|script)'

Sigil won't save a file without adding the doctype but even with this ePub_check 3.0 does not complain.

Dale

Jellby · 11-05-2013, 03:24 PM

Quote:

Originally Posted by DaleDe

ePub check passes it fine although Sigil flight crew complains but not in a nice way. There error lists all sorts of block items but not body.

element 'svg' is not allowed for content model '(p|h1|h2|h3|h4|h5|h6|div|ul|ol|dl|pre|hr|blockquo te|address|fieldset|table|switch|form|noscript|ins |del|script)'

What it lists is all the elements that are allowed where the <svg> is.

I don't know who is right, but here is Valloric's reasoning.

DaleDe · 11-05-2013, 06:26 PM

Quote:

Originally Posted by Jellby

What it lists is all the elements that are allowed where the <svg> is.

I don't know who is right, but here is Valloric's reasoning.

Interesting. I suspect the requirement was relaxed since SVG in 3.0 can be anywhere including its own file.

Dale

11-04-2013, 05:23 PM	#18
At_Libitum Addict Posts: 265 Karma: 724240 Join Date: Aug 2013 Device: KyBook	text-anchor itself does not specifically place the text, it only moves the point on which coordinates are based within the text string relative to the starting point of the text . The coordinates you specify act relative to the anchor point. in other words, text-anchor moves the anchor point within the text and the x,y moves the anchor point within the svg container Last edited by At_Libitum; 11-04-2013 at 05:27 PM.

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

11-04-2013, 09:46 PM	#24
At_Libitum Addict Posts: 265 Karma: 724240 Join Date: Aug 2013 Device: KyBook	funny how we're right back at the my original suggestion, only using pixels instead of percentages.

11-05-2013, 02:11 AM	#25
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	Ah yes, the goal was to get something that was like what you originally wanted but one that worked instead of being broken. The difference isn't percentages vs. pixels, it was using pixels correctly to define the full space instead of restricting them to just the size of the image. The solution will work fine in ADE and likely most others. So is it funny ha ha, or funny peculiar in your mind. Dale