You can style alt text like any other text

I like that CSS gives us plenty of opportunities to add finer details when we want them. One of those finer details is making the experience of an image not loading a little better.

The alt text is surfaced on the page when an image fails to load. It’s yet another reason to write good alt text and really hone your skills in creating a user-focused experience by being descriptive.

The demo doesn’t look great though, does it? I suppose the fact we’re rolling default user agent styles isn’t helping, so let’s introduce the styles from ‌Some simple ways to make content look good.

Ok, looking better. Let’s directly target our alt text though — well, our <img> elements. By styling the <img> element, our alt text will have those styles applied because it is an attribute of the <img>.

img {
  display: block;
  max-width: 100%;
  font-style: italic;
  font-size: var(--size-step-1);
  line-height: 1.5;
  text-wrap: balance;
}

I’m making the <img> a block element here because I want to make sure the it fills its parent. This approach gets rid of that annoying bit of whitespace at the bottom of the <img> too.

By applying max-width: 100% we’re also ensuring that if a large image is loaded, it won’t blow out of the confines of its parent.

The fun part though, is the text related styles. I’ve opted to present alt text with an italicised look and feel. I’ve also knocked it up a step on the fluid type scale. I’ve set a sensible line-height and finally, I’ve told the browser to attempt to visually balance the text, using text-wrap: balance.

Let’s push it a little furtherpermalink

I’ve been treading carefully in terms of what visuals I apply to my <img> elements because if an image does load, we don’t want all the extra stuff to show.

This is a perfect context for progressive enhancement because we can listen for a failed loading event in JavaScript.

const images = document.querySelectorAll("img");

if (images) {
  images.forEach((image) => {
    image.onerror = () => {
      image.setAttribute("data-img-loading-error", "");
    };
  });
}

What’s happening here is I’m hooking a function up to the <img>’s built-in onerror event. When that event fires, I’m setting a data-img-loading-error attribute. The setAttribute requires two arguments which is why I’m passing an empty string as the second argument.

The data-img-loading-error is a CUBE CSS exception — a state change — which I can account for in the CSS.

img[data-img-loading-error] {
  --img-border-style: 0.25em solid
    color-mix(in srgb, currentColor, transparent 75%);
  --img-border-space: 1em;

  border-inline-start: var(--img-border-style);
  border-block-end: var(--img-border-style);
  padding-inline-start: var(--img-border-space);
  padding-block: var(--img-border-space);
  max-width: 42ch;
  margin-inline: auto;
}

First up, I’m using Chris’ trick to create a nice, subtle shade of the currentColor to define an --img-border-style custom property. I then use that custom property to add a left and bottom border.

I also apply some padding to help with the visual balance using an --img-border-space custom property.

Lastly, I set a max-width of 42ch — which is equal to the width of 42 0 characters in my chosen font and size — and push the <img> into the centre of the container with margin-inline: auto. Sure 42 is a bit of a magic number, but everything looks nice and balanced now.

Wrapping uppermalink

This certainly isn’t a new thing but it’s one of those nice touches that will elevate your user interface. What cool visual treatments can you come up with for alt text?

Advert