Portability Hub
Portability Hub

The standard way of thinking about captions for infobox images is this:

<image source="image">
    <caption source="caption"/>
</image>

You stick a caption within image tags. Simple. Straightforward. And yet: not great if you come from a community with a penchant for writing longish captions. On mobile, captions get truncated. So if you really need to have the entirety of your captions visible, consider making your captions headers.

That is:

<image source="image"/>
<header>{{{caption|}}}</header>

Headers are always visible in Mercury and on the desktop in their entirety, and — contrary to what you might think — they're not required to be within a group tag.

HeaderNotCaption

By using <header> for a caption, this very long caption is completely visible on our mobile skin.

But what, you might ask, happens to the other, "proper" headers? Well, that's a stylistic choice on your part. You can leave them inside <header> tags and give only the first header special styling. Since the "caption" is probably always going to be the first header in the box, some nth-child(1) styling will likely work for you.

Or if you don't like that, you could make all your "proper" headers things that reside in <navigation> tags.

Or if even that doesn’t appeal, you could consider whether you really need to have "proper" headers at all. Your infobox might be small enough that an image, a caption and a few points of data will work for you.

See also