Svg wrapper with a caption text field

[roger64]

Hi

A brand new plugin allows us to create svg wrappers with Sigil. It's the same technique as the one used by Calibre for cover pages. However as it applies for any image we may find in the text, one naturally thinks as to how make it work with a caption.

This question is about how to insert (integrate?) inside a svg wrapper a text field containing a caption so as the two fit together in the same page.

Rationale

When one adds images to one EPUB, many of them have captions. and it has always been tricky to find the right balance and be confident that the caption will be included with the image in the displayed page.

The current situation is not a happy one: some trust the engine (height: auto, width:auto), some trust the CSS (max-width... and/or page-break-inside: avoid), some others make deep calculations (width:63.5%; ) others even insert the image and its caption in a two cells frame, what is sure is that everybody is praying God.

If a svg all-in-one solution could be found, there would be a good chance that the bundle (image + caption) would stay together. That would be a big step forward for humanity.

I tried to fiddle a little with the code. One should maybe add something like that somewhere, maybe by tweaking the viewbox to add a kind of lower stripe?

<text text-anchor="middle" x="50%" y="40" style="fill:black; font-size:25px; font-family:serif;font-style:italic;">Caption</text>

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.

[Toxaris]

Be aware that on a lot of readers (all?) based on ADE will not honor text-anchor="middle" in SVG. See also this thread: https://www.mobileread.com/forums/sho...d.php?t=190530

[jbacelar]

I use a standard wrapper for all the covers (and other images with text) of Verne's e-books that I upload to MRB. Look at:
https://www.mobileread.com/forums/sea...rchid=10365787

Specifically this cover has text above and below the image. Look at:
https://www.mobileread.com/forums/sho...d.php?t=268249

Playing with the parameters, you can make the image with text that you want.


The wrapper works perfectly in ADE

[roger64]

@jbacelar

I am impressed by all your works! and you translate too?

So your cover is pretty interesting and exactly to the point. Something definitely can be done. I understand we can only insert text line by line and that a block of text is not allowed.

For the image, could you give some practical advice about their size? Should they have a standard size? do you manage to adapt to bigger sizes or is there a need to scale them before mixing them with text?

@Toxaris

The referenced thread is over three years old. With incoming EPUB3, the svg support must have improved everywhere.

[jbacelar]

I am impressed by all your works!

Thank you very much.

and you translate too?

In general, the Spanish translations of Verne, are a shame.

Is there a need to scale them before mixing them with text?

It is not necessary, you establish the framework with viewBox, and inside this, you define the size and position of the image/s that you like.

[roger64]

Originally Posted by jbacelar

It is not necessary, you establish the framework with viewBox, and inside this, you define the size and position of the image/s that you like.

It's very convenient and cannot be more easy.

Now we have to think how to automate it. The general use would be: image on top, caption down (some lines). I think the user could be offered a choice of how many lines of text he needs for the caption, and according to that the image would take more or less height. Well, I am not the developer...

I will prepare my images accordingly, one with a short caption, another one with a longer one and God will decide.

[RbnJrg]

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:

<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.

[Notjohn]

Interesting thread. Thank you all!

Por mi parte (that's the only Spanish I know), I avoid all this by incorporating the caption into the preceding paragraph when it's absolutely necessary that the reader have the information in his mind while looking at the image.

[roger64]

Hi Rubén

Thanks for your explanations (also for practical advice like the one for not using %) and of course your sample. We now have a choice between two solutions.

When I tried to set it up, I had been confused by the view box. You and jbacelar make it look simple!

I have no doubt that one of the two will soon be implemented. It will be developer's choice.

y muchas gracias para nuestros dos amigos (a bit longer than Notjohn)

[Toxaris]

Originally Posted by roger64

@Toxaris

The referenced thread is over three years old. With incoming EPUB3, the svg support must have improved everywhere.

I hope so, but be aware that there are still a lot of readers out there with the old version of the mobile version of ADE. I do not know if they finally fixed it, they didn't want to fix it earlier.

It doesn't break the SVG, it just won't center the text IIRC.

[RbnJrg]

Originally Posted by Notjohn

Interesting thread. Thank you all!

You are welcome

Por mi parte (that's the only Spanish I know), I avoid all this by incorporating the caption into the preceding paragraph when it's absolutely necessary that the reader have the information in his mind while looking at the image.

But in that case, couldn't exist the risk of a pagebreak bettween the paragraph with the text and the image? The user could change the font-size and then a break could be forced. Of course, you have the possibilty of including the caption inside the svg wrapper but BEFORE the image. That's perfectly possible. Watch the epub I attach.

Regards

[RbnJrg]

Originally Posted by roger64

Hi Rubén

Thanks for your explanations (also for practical advice like the one for not using %) and of course your sample. We now have a choice between two solutions.

You are welcome, Roger. Also watch the new epub I uploaded in post #11 to see a "caption" before the image.

Regards
Rubén

[Notjohn]

Originally Posted by RbnJrg

But in that case, couldn't exist the risk of a pagebreak bettween the paragraph with the text and the image? The user could change the font-size and then a break could be forced.

Oh, I don't worry about that. In fact, I assume that's usually the case, at least with a vertical image -- which is why I put it before, rather than after. Having read the previous paragraph, the reader has the general information in his mind, rather than looking for it in a caption.

To be sure, I'm generally uploading photographs, not complicated graphs etc, and I'm generally writing about historical stuff, not maths or technology that requires a lecturer with a pointer to explain what's being shown.

[RbnJrg]

Originally Posted by Notjohn

Oh, I don't worry about that. In fact, I assume that's usually the case, at least with a vertical image -- which is why I put it before, rather than after. Having read the previous paragraph, the reader has the general information in his mind, rather than looking for it in a caption.

To be sure, I'm generally uploading photographs, not complicated graphs etc, and I'm generally writing about historical stuff, not maths or technology that requires a lecturer with a pointer to explain what's being shown.

Interesting point of view!