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