How to vertically center text within a figcaption which contains partially stylized text?

Question

I have an image viewer for displaying a full-window-view photo with a <figcaption>. The upon hover/focus the <figcaption> displays overtop the bottom of the image (so the image remains full screen). In order for there to be uniformity in the display across images, I have manually set the <figcaption>'s height so that it doesn't resize based on the text contained within.

Normally, when I want an element to vertically center text within itself I would just turn it into a flex container and align-items: center;. Alas, here comes the issue.

I am displaying images from nature, with the common name as well as the scientific name included as part of the <figcaption>. Standard practice is to italicize the scientific name. When I include the <i> within part of the text, flex turns the text into three distinct boxes: pre-italicized text, italicized text, post-italicized text. Then it wraps the text within each box if it overflows its container.

So this:

<figcaption> A juvenile black-headed gull <i>(Chroicocephalus ridibundus)</i> vocalizing as it flies low over water, hunting for food. Photo taken in the Paljassaare Reservation in Tallinn, Estonia.</figcaption>

A juvenile black-headed gull (Chroicocephalus ridibundus) vocalizing as it flies low over water, hunting for food. Photo taken in the Paljassaare Reservation in Tallinn, Estonia.

becomes this:

A juvenile black-headed   (Chroicocephalus    vocalizing as it flies low over water, hunting for food. Photo taken in the Paljassaare Reservation in Tallinn, 
       gull                 ridibundus)                                   Estonia.

which you can view more clearly here: https://imgur.com/JHLaaM5

Here a snapshot of the relevant code as it currently is:

.figure {
  margin: auto;
  width: min-content; /* so the image will determine overall width */
  display: flex;
  flex-direction: column;
}

.image {
  max-height: 100%; /* keeps aspect ratio, and will adjust width accordingly */
}

.caption {
  font-size: 1.25rem;
  color: aliceblue;
  width: 100%; /* matches width of figure, which is set by the image via min-content */
  height: 6rem; /* fixed height for uniformity in figcaption's display on screen */

  /* moves the caption overtop the image, and makes it a bit see-through */
  position: relative;
  margin-top: -6rem;
  z-index: -1; /* this will be made visible on hover & on focus */
  background-color: rgba(0,0,0,0.75);

  /* vertical center */
  display: flex;
  align-items: center;

  /* horizontal center */
  text-align: center;
}

.figure:hover .caption, .figure:focus .caption{
  z-index: 2;
}

<figure class="figure">
  <img class="image" src="https://i.imgur.com/hs9BUEr.jpg" alt="A juvenile black-headed gull flying low over water" />
  <figcaption class="caption">A juvenile black-headed gull with extra placeholder text to show how silly ths whole thing is <i>(Chroicocephalus ridibundus)</i> vocalizing as it flies low over water, hunting for food. Photo taken in the Paljassaare Reservation in Tallinn, Estonia.</figcaption>
</figure>

This break only happens when <figcaption> is a flex container, again used to vertically center the text within itself. If there's no partially stylized text (either no styling, or all text is styled) there's no problem with the display.

If I keep the partial styling and remove flex then the text displays inline as normal, but I lose the ability to vertically center within itself as it then hugs the top of the <figcaption>, and making the line-height match the height of <figcaption> only works if the text is a single line. Multi-line text will be a broken experience, so I have discarded this approach.

Is there any way to accomplish what I am attempting which also conforms with WCAG standards? I just want a simple sentence or two to display as normal, centered vertically & horizontally within itself, with the scientific name to be italicized. To iterate, the issue manifests only with the inclusion of <i> (or if I try a <span> instead).

Thanks in advance!

The code you posted works as you want. Please include the relevant code to reproduce the problem. See [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) — user1601324, May 19 '23 at 17:41
The code I post does not work the way I want. I refer you to what I wrote initially: "When I include the within part of the text, flex turns the text into three distinct boxes: pre-italicized text, italicized text, post-italicized text. Then it wraps the text within each box if it overflows its container." And this screenshot shows how that code breaks the flow, which was also included initially https://imgur.com/JHLaaM5 — jafarlow, May 19 '23 at 19:08
The code on your *website* might not work the way you want, but the code you posted in your *question* does! I've put your code into a code snippet, which lets us run the code and see what happens. When the edit is approved you will be able to see that it is working perfectly. You can approve the edit yourself to see it now, or it can take a day or 2 for it to be approved by the edit reviewers. — user1601324, May 19 '23 at 19:46
It doesn't do what I'm attempting, and which is what I've asked. How do I vertically center the text in a way that ***does not break the text into three columns?*** It is illogical from the user's perspective. I've updated the text of the figcaption to show it more clearly why this is a problem. The text now reads left-to-right like this: "A juvenile black-headed gull with extra placeholder text to show (Chroicocephalus vocalizing as it flies low over water, hunting for food. Photo taken in the how silly ths whole thing is ridibundus) Paljassaare Reservation in Tallinn, Estonia." — jafarlow, May 20 '23 at 15:37

score 0 · Accepted Answer · answered May 22 '23 at 17:02

I have found a potential solution, though I am not confident this will properly conform with WCAG guidelines for accessibility. Based on the MDN docs on <figcaption> I can include other HTML elements within, so long as they are flow type elements, which <div>s are.

So what I can do is insert a <div> within the <figcaption> to achieve both the goal of vertically centering, as well as avoiding the pitfall of the content splitting into those three pesky columns. It looks like this:

<figure>
  <img/>
  <figcaption>
    <div>Caption text goes here</div>
  </figcaption>
</figure>

And using the code I initially submitted to demonstrate it behaves as expected:

.figure {
  margin: auto;
  width: min-content; /* so the image will determine overall width */
  display: flex;
  flex-direction: column;
}

.image {
  max-height: 100%; /* keeps aspect ratio, and will adjust width accordingly */
}

.caption {
  font-size: 1.25rem;
  color: aliceblue;
  width: 100%; /* matches width of figure, which is set by the image via min-content */
  height: 6rem; /* fixed height for uniformity in figcaption's display on screen */

  /* moves the caption overtop the image, and makes it a bit see-through */
  position: relative;
  margin-top: -6rem;
  z-index: -1; /* this will be made visible on hover & on focus */
  background-color: rgba(0,0,0,0.75);

  /* vertical center */
  display: flex;
  align-items: center;

  /* horizontal center */
  text-align: center;
}

.figure:hover .caption, .figure:focus .caption{
  z-index: 2;
}

<figure class="figure">
  <img class="image" src="https://i.imgur.com/hs9BUEr.jpg" alt="A juvenile black-headed gull flying low over water" />
  <figcaption class="caption">
    <div>A juvenile black-headed gull [with extra placeholder text to show how silly this whole thing is if it breaks mid-sentence] <i>(Chroicocephalus ridibundus)</i> vocalizing as it flies low over water, hunting for food. Photo taken in the Paljassaare Reservation in Tallinn, Estonia.
    </div>
  </figcaption>
</figure>

So this fixes the problem. I'm using <div> here instead of <p> in the hopes that screen readers won't double-announce text, but I might still be interfering with screen readers by including a <div> within the <figcaption>.

divs are permitted within figcaption elements – Sean May 22 '23 at 17:27 — Sean, May 22 '23 at 17:27

Valeria · Answer 2 · 2023-05-19T14:53:03.943

-1

And if try to italicize not in your HTML but only in CSS with:

.caption {
font-style: italic;
}

Maybe that will solve your problem.

edited May 19 '23 at 14:53

answered May 19 '23 at 14:52

Valeria

1
2

That would italicize the entire caption. What I am attempting to do is italicize just one specific part of the text and retain its ability to vertically center within itself. – jafarlow May 19 '23 at 16:16

How to vertically center text within a figcaption which contains partially stylized text?

2 Answers2