a11y.css icon indicating copy to clipboard operation
a11y.css copied to clipboard

Styling the `lang` attribute

Open notabene opened this issue 5 years ago • 3 comments

Hi @ffoodd

I'm playing with the “check lang” feature and here's how it looks for inline components: Checking lang with the extension – screenshot.

And here's how it was in my bookmarklet: Checking lang with bookmarklet – screenshot.

(test page: L’accessibilité dans la formation au numérique)

Before I tinker with the code, is there any reason why you went for a block display for the attribute?

PS : By the way, I'm OK with ::after rather than ::before, it makes sense; I don't know why I went for “before” in the original code 😉

notabene avatar Jun 05 '19 07:06 notabene

I tried to left align messages with their associated highlighted boxes, without breaking layout. Most cases best rendered with block display; however it might be time to try another way :)

And briefly searching for this made me think of other enhancements… Opening issues right now!

ffoodd avatar Jun 07 '19 08:06 ffoodd

I was going to open an issue and realized I had already opened one. Duh.

notabene avatar Nov 28 '22 13:11 notabene

Also, in some cases, like Mastodon, boxes are so constrained that the lang value does not appear at all. The block display overlaps and disappears. 😢

Screenshot from Mastodon

notabene avatar Dec 15 '23 16:12 notabene