images and captions

[JSWolf]

What's the best way to keep a caption with an image such that the caption never ends up on another screen from the image?

[dgatwood]

If I needed to do that, I'd probably draw the bitmap and the caption text using SVG in a single "image", and then use the usual techniques for scaling the SVG image up to the size of the screen.

Caveat: With this approach, you probably must include at least one embedded font and use it for all your captions if you want the rendering to be even halfway consistent across readers. I mean, there are ways to embed arbitrary blobs of HTML in SVG, which could in theory allow you to let the reader determine the sizing and style, but IIRC, that feature isn't very well supported.

[JSWolf]

I don't need it to be consistent. I just need it to drop both the image and the caption yto the next screen if the both don't fit in the space left on the screen. I'm hoping to find a way that's not having to use SVG to draw the caption. I want the caption to be in whatever the body font is.

[Jellby]

Easy:

<div style="page-break-inside: avoid">
<img src="snowball.jpg" alt=""/>
<p>A cool image</p>
</div>

and get the readers to properly support it

Since I'm afraid ADE and relatives don't obey "page-break-inside", dgatwood's suggestion is probably the best that you can expect.

Personally, I code it as I showed, I don't like to use workarounds for specific software bugs and limitations. (I'm still hoping for a decently compliant reader some time in the future.)

[RbnJrg]

Originally Posted by JSWolf

I don't need it to be consistent. I just need it to drop both the image and the caption yto the next screen if the both don't fit in the space left on the screen. I'm hoping to find a way that's not having to use SVG to draw the caption. I want the caption to be in whatever the body font is.

You can use SVG and still to have the caption in whatever the body font is; watch this post:

https://www.mobileread.com/forums/sho...92&postcount=4

The caption will be in the main font (also you could use a custom font if you embed it). In that post I don't set a font-size but is possible to do it.

Regards

[dgatwood]

Originally Posted by Jellby

Easy:

<div style="page-break-inside: avoid">
<img src="snowball.jpg" alt=""/>
<p>A cool image</p>
</div>

and get the readers to properly support it

Since I'm afraid ADE and relatives don't obey "page-break-inside", dgatwood's suggestion is probably the best that you can expect.

Not just ADE. Even WebKit doesn't support pbi:avoid unless they've fixed it in the last year or so. They support pbb:always and pba:always, but they ignore pbi entirely. I'm pretty sure I filed a bug about it almost a decade ago, and it got duped to a bug from many years earlier. In other words, don't count on that ever working right.

Originally Posted by RbnJrg

You can use SVG and still to have the caption in whatever the body font is; watch this post:

https://www.mobileread.com/forums/sho...92&postcount=4

The problem potentially comes when you try to deploy on Kindle, where the base font size isn't necessarily 12 point. There's a distinct possibility that the text would be rendered either unusably small or so large that it gets clipped by the viewBox.

I suppose you could remove the viewBox so that everything gets sized to the largest thing in the SVG image (which might be the text), but I'm not sure what other problems that could cause.

I'm not saying it won't work if you don't specify an explicit font and size, but in the back of my head, it sets off warning bells.

[RbnJrg]

Originally Posted by dgatwood

The problem potentially comes when you try to deploy on Kindle, where the base font size isn't necessarily 12 point.

You can set any font-size for the caption and Kindle (with .kf8 support) wil accept it by using the font-atribute (you mustn't use css styles). In the Kindle Publishing Guidelines you can read the following:

3.6.10 Image Guideline #10:
Displaying Text Correctly within SVG
To display text correctly within an SVG, use the
font-size attribute for <text> inside the SVG.

Example
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="20" y="20" font-size="20" fill="red">svg text sample</text>
</svg>
</body>
</html>

So, for example the base font-size could be 1em (or whatever) and the caption to have a font-size of 8pt or 10pt.

Regards
Rubén

[dgatwood]

Originally Posted by RbnJrg

You can set any font-size for the caption and Kindle (with .kf8 support) wil accept it by using the font-atribute (you mustn't use css styles). In the Kindle Publishing Guidelines you can read the following:

I think you missed my point. You can't guarantee what fonts are going to be available on the device, and different fonts render at different sizes. And when you're printing those fonts into a fixed-size box, the odds of them getting clipped are pretty good.

[RbnJrg]

Originally Posted by dgatwood

I think you missed my point. You can't guarantee what fonts are going to be available on the device, and different fonts render at different sizes. And when you're printing those fonts into a fixed-size box, the odds of them getting clipped are pretty good.

On Kindle we can know what fonts are available. And if one want to be sure about the font used in the caption, we can embed a custom font. But with a correct layout of the svg wrapper, you can be sure that the caption will be always ok. Finally, if we are talking about Kindle, then there is another method (this one only works on Kindle and iPad -maybe also in Kobo-); image and caption will remain in the same page, ALWAYS, no matter the font-size (the user can change the font-size at will and the caption will remain with the image). Read this post:

https://www.mobileread.com/forums/sho...36&postcount=4

Again, this method only works for Kindle with support for .kf8.

Regards
Rubén

[Jellby]

But this is the ePub forum, so Kindle (and iPad, if you mean iBooks) are secondary

[RbnJrg]

Originally Posted by Jellby

But this is the ePub forum, so Kindle (and iPad, if you mean iBooks) are secondary

Yes, you are right, but dgatwood has doubts about using SVG on Kindle:

The problem potentially comes when you try to deploy on Kindle, where the base font size isn't necessarily 12 point.

But is true, I mustn't bring the topic at this subforum

[DaleDe]

Originally Posted by JSWolf

What's the best way to keep a caption with an image such that the caption never ends up on another screen from the image?

Use SVG and make a big enough viewbox that the caption is inside the area.

Dale

[Ghitulescu]

Originally Posted by Jellby

Easy:

<div style="page-break-inside: avoid">
<img src="snowball.jpg" alt=""/>
<p>A cool image</p>
</div>

and get the readers to properly support it

I believe that would assume that the physical size of the screen would allow for a full display of the image and the text beneath.
If the image size is greater that what the screen can accommodate what happens depends entirely on the Reader.

It may work with widow/orphan attributes (again provided the physical size allows it), of course where supported.

Or one can make a floating block with display: inline-block eg in a div comprising both items. Again, where it is supported.

[Jellby]

Originally Posted by Ghitulescu

Or one can make a floating block with display: inline-block eg in a div comprising both items. Again, where it is supported.

Yes, the difference is page-break-inside is a required property, and inline-block isn't. Readers that don't support the former are non-compliant, those that don't support the latter are probably non-compliant too, but for other reasons. However, it's probably more likely to find support for inline-block, so maybe one should try this.