Question 173912 in Html Question posted in
Some basic documentation can be found here.

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

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!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>.


  2. 0

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

    .caption {
font-style: italic;
}

    Maybe that will solve your problem.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search