Use the following code:
1. In your .css stylesheet:
Code:
p {
text-align: justify;
text-indent: 1em;
font-size: 1em;
margin-bottom: 1em;
}
2. In your .xhtml file:
Code:
<body>
<div>
<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"/>
<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>
</div>
</body>
Of course, the size of your image will be different. Also take in count that while the image size is of 248x310px, the viewbox of the svg wrapper is of 248x360 (the differnce in height is due to the space for captions). It works EVEN on ADE 2.0; here you can see a screenshot:
Below you can check the respective .epub.
Regards
Rubén