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