Restyle figures and captions #4276
Conversation
* Change 11ty/liquid script to wrap the auto-generated "Figure X" in a `<span>` * Add CSS overrides Closes #4241
✅ Deploy Preview for wcag2 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
My preference would be for this to be a bit more aligned with the figure caption styling in TR space. Separating the word 'figure' and the figure number from the caption text seems to be peculiar. I am also not overly keen on adding another border - not sure that this sort of attention is necessary. I was thinking something more like the following example: 
|
11ty/CustomLiquid.ts
Outdated
| @@ -243,7 +243,7 @@ export class CustomLiquid extends Liquid { | |||
| $("figcaption").each((i, el) => { | |||
| const $el = $(el); | |||
| if (!$el.find("p").length) $el.wrapInner("<p></p>"); | |||
| $el.prepend(`Figure ${i + 1}`); | |||
| $el.prepend(`<span>Figure ${i + 1}</span>`); | |||
There was a problem hiding this comment.
If we want to try @iadawn's suggestion of inlining the "Figure N", it would go something like this, in order to insert it into the first paragraph within the figcaption: (note this will also require updating the style selector)
| $el.prepend(`<span>Figure ${i + 1}</span>`); | |
| $el.find("p").first().prepend(`<span>Figure ${i + 1}</span> — `); |
(To be clear though, RE @iadawn's comment, "Figure N" was already separated like this prior to this PR)
if we're not going for a border, i'd strongly suggest we at least then increase the margin after the caption further, to more clearly separate it from non-caption text that follows - otherwise, particularly for long (or even multiline) captions, it again becomes difficult to discern where the caption ended and the rest of the prose starts again |
|
I personally prefer having an extra indicator like a border, I'll admit ... it visually breaks up long pages with lots of images/captions from being just a see of prose with images dotted around. Happy to go for the "Figure..." inline. Dropping the border and left padding, and inlining the figure, this current PR would then look like this
Personally still prefer it with...
|
|
A left border would visually highlight it and draw attention to it. I think you want the opposite, for the figure caption to be quiet. |
|
To discuss at today's meeting. Happy to mod/change the PR once we decided. |
@shawna-slh the problem we're encoutering, particularly for large figcaptions, is that if the styling is "quiet" people read it as if it is the main content, and get confused. And by "people" I mean almost everyone who has been working on it :) If you look at the editor's draft version of the Reflow document, it makes its own case for this problem, IMO. So, counterintuitively, a 'louder' figcaption styling difference makes it is easier to distinguish and skip when one is just reading the main narrative. I think there are many examples of this in the wild (for example, where the main justified, the figcaptions are center-aligned and set in italics at a larger point size). |
|
After further discussion and clarification with Shawn:
Examples from Reflow:
|
not a big fan of that, personally, as - since the border is then the full width of the content column - it creates a very strong visual break of the whole page every time there's an image with a caption ... at least for me, that makes a long page with lots of images strangely "bitty" / stop-and-start |
|
See https://deploy-preview-4276--wcag2.netlify.app/understanding/non-text-contrast for the proposed changes |
|
Thanks Ken and Patrick, it's helpful to see options on a full page (which I think Ken was avoiding so as not to steps on the toes of this PR :). Now I can see @patrickhlauke 's point. Currently the text size is smaller for the figcaption, which I think is good as one differentiation from the main text. Perhaps along with that, using spacing and proximity would be enough.
|
<span>Closes #4241