[RbnJrg]

Originally Posted by JSWolf

1. ch2.jpg is 485x1200 pixels.
2. Yes, it has to be compatible with RMSDK (ADE).

The method suggested by jbacelar is correct. Sometime ago I posted a tutorial about how to add captions with SVG wrapper (https://www.mobileread.com/forums/sh...04&postcount=7). It's very easy to adapt that procedure to an "upper caption". Do the following:

1. Your image has a width of 485px and a height of 1200px. According to that, you normally would define the "viewbox" of a svg wrapper as:

viewBox="0 0 485 1200"

2. But now you want to add upper captions to that image. So, the first thing you have to do is to modify the size of the viewbox, so that it will be a bit larger. Let's say that our new viewBox definition will be:

viewBox="0 0 485 1325"

3. Since our image has a height of 1200px, then we need to position it at x="0" y="125" (y="125" because the height of the viewbox is 1325 and the height of image is 1200; "y" is the difference between those two measures). Then our svg wrapper would be (so far):

  
<div style="margin:0; padding:0; text-align:center">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 485 1325" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image height="1200" width="485" x="0" y="125" xlink:href="../Images/ch2.jpg"></image></svg>
</div>

3. Now we need to add the captions; font-sizes must be in pixels. To do that we need to add, to the previous wrapper, the new following code:

  
<div style="margin:0; padding:0; text-align:center">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 485 1325" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text text-anchor="middle" font-family="serif">
         <tspan x="242" y="30" font-size="25" font-style="italic">CHAPTER</tspan>

         <tspan x="242" y="80" font-size="45" font-style="normal" font-weight="bold">Two</tspan>
    </text>
    <image height="1200" width="485" x="0" y="125" xlink:href="../Images/ch2.jpg"></image></svg>
</div>

Why the viewbox is 1325? If you see the position of the second caption (y=80) and its size (45 pixels) that means that the caption will end at y=80+45=125. Since the image has a height of 1200, then we need to add 125 pixels to have enough space to write the captions.

Here you can see how it looks in ADE:



Below you can check the respective epub.

Regards
Rubén