mastodon.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
The original server operated by the Mastodon gGmbH non-profit

Administered by:

Server stats:

366K
active users

Terence Eden

🆕 blog! “How to style your alt text”

Every day is a school day. I'd recently seen a post about highlighting images without alt text. That got me thinking. Is it possible to style alt text? Yes. Yes it is. And it's pretty simple. Well, OK, it's CSS, so simple is a relative term! Let's take a broken image like <img src="example.com/bigfoot.jpg" alt="The […]

👀 Read more: shkspr.mobi/blog/2023/02/how-t

@Edent

> But if the image fails, the alt text picks up the font and text colour specified. That seems to work reliably on Firefox, Chrome, and WebKit.

The alt text does not render for me in Safari.

Test page: output.jsbin.com/ziranew/quiet

@simevidas How strange! It appears to work on my Safari...

@Edent Oh, interesting. The text is only rendered if the image’s width and height are large enough for the text to fit in a single line. The minimum width depends on the text. The minimum height seems to be 56px.

edit: The minimum height depends on font-size (larger text is taller). It seems to be around 3em. The [?] icon is vertically centered, so I guess the minimum height is based on being able to fit 3 lines of text.

@Edent Good ol’ web. All browsers have these silly behaviors.