Quote:
Originally Posted by roger64
Hi
Could some expert try to find a solution of this kind? Once we have the code, it should not be too complicated to go from one standard svg image to another with caption.
Please find enclosed an EPUB2 test file with two images of very different size (without caption!) to play with.
|
Hi Roger;
What you want is quite easy to get. I will give you an example:
1. Suppose that your image has a width of 2000px and a height of 3008px. According to that, you defined the "viewbox" of the svg wrapper as:
viewBox="0 0 2000 3008"
2. Now you want to add a caption to that image. 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 2000 3150"
3. The next step is to add the following declaration inside the svg wrapper:
Code:
<text x="1000" y="3120" text-anchor="middle" font-size="100" font-family="sans-serif" font-weight="bold">YOUR CAPTION HERE</text>
I will explain a bit the things:
As you can see, I set x="1000" instead of x="50%" because "%" is not acepted by some rendering engines. And as we want the caption centered, and the image has a width of 2000px, then we must use x="1000".
Then you see y="3120". This is the bottom margin of the caption. As we set a height -in wiewBox- of 3150, "y" can't be bigger than "3150". And since we are using a value of 3120, that means that below the caption, we'll have a blank space of 3150 - 3120 = 30px. Finally, since the height of the image is 3008px, and the bottom margin of the caption is 3120 (according to this example), we should use a font-size lower than 3120 - 3008 = 112px.
In the example, I'm using a font-size of 100px, that means that before the caption we'll have a blank space of 12px (3120 - 100 = 3020; 3020 - 3008 = 12).
4. To end all; add to the <body> tag the style "margin:0" (so, you'll have <body style="margin:0">
That's all. I attach your epub with some modifications so you can understand better the code.
Regards
Rubén
PS: As you can see, instead of using style="font-size:100; font-family: sans-serif; font-weight:bold", I'm using font-size="100" font-family="sans-serif" font-weight="bold"; that is because Kindle has issues with the first form of defining styles with svg images and text. If you are not going to use Kindle anyway, you can use any of both way of declaring styles.