Description
openedon Nov 28, 2023
As extracted from #56252, at the moment gallery captions have a hard-coded visual style that is a little clunky and occasionally hard to read:
These captions achieve some contrast through a heavy scrim gradient, hard-coded to be black, and text on top hard-coded to be white. This contrast is reduced as captions grow longer (and in fact they can grow so long as to scroll):
When that happens, the scrim gradient is stretched, and especially the topmost lines of text lose potential contrast with the as a result. We can do a bit better here.
Overlay captions
The existing default needs to be maintained, but improved. Overlay captions are useful because they maintain the silhouette of the gallery images.
We could potentially improve these overlay captions by embracing theme colors. Every theme will define a background color, and a text color. We could use those same colors to apply to the scrim itself, the caption text, and even the inline scrollbar, to ensure there's always as much contrast as the theme itself is designed to have.
Shown here, a dark background theme with light text, and similarly a dark scrim with white text:
To further ensure contrast for very long overlay captions, the scrim is no longer a gradient, it's just a solid transparent color. By leveraging the same colors as the site itself, the caption blends right in.
The same DNA would be shared for a light theme, shown there with a beige background, black text, and simlar colors applied to scrim and caption text plus scrollbar:
External captions
Looking further ahead we might consider adding a new option for galleries, to have external captions. External captions are useful for some galleries, or some captions. Shown here, in the same dark colors, but with captions below each image in a gallery.
Even for external captions, they can grow long. To avoid substantial visual "rivers" in the content, we could perhaps apply a max-height to each caption, such as 4x lineheight, and then apply text-color scrollbars here as well. Editorially you could still achieve a uniform look by striving, for example, to have captions on all images.
Same, shown here in light mode: