The worst part is that I see it differently in the blog post and in lobste.rs using the same browser (Reeder internal browser on MacOS). God is truly dead.
I for once, look forward to future generations trying to understand why Times New Roman is the designated font to render emojis, once this code gets copied around (minus the comment explaining the context), included in a small open source library to then be used by a major project and forever be part of the internet.
I usually make a small point of grabbing the Twemoji’s SVGs if I’m using emoji in an icon context. Everyone (for some definition, I do also use alt attribute as fallback!) gets to see the same thing, in the way I intend it (since emoji can differ so much between fonts too!).
WCAG ARIA24 & WCAG H86 covers this topic too, aria-label="Warning" role="img" seeming appropriate for this case, though of course it depends on context too.
Try font-family: initial, it should work just as well, without the reference to a specific font. BTW the issue didn’t show up on any browser for me until I installed the Menlo font (seems like it’s only preinstalled on Mac?), so it seems to be Menlo’s fault.
Maybe I won’t be stealing that code, but I’m certainly stealing this metaphor.
Apparently ⚠️ and ⚠ sometimes show up identically depending on the browser engine being tested. Can you see why I was getting confused by this? :D
Interestingly, I see a difference on this comment, but not on your article! This is Firefox on Windows 11
I think I fixed the article so it shows the difference properly. At least it shows up for me on Safari.
I see no difference in the parent comment in Mobile Safari.
I see the difference in the article in Mobile Safari, but not in the comment.
In desktop Safari, I do see the difference in both places.
That may very well be enough internet for me today.
The worst part is that I see it differently in the blog post and in lobste.rs using the same browser (Reeder internal browser on MacOS). God is truly dead.
I for once, look forward to future generations trying to understand why
Times New Romanis the designated font to render emojis, once this code gets copied around (minus the comment explaining the context), included in a small open source library to then be used by a major project and forever be part of the internet.Reminds me of this article
https://www.figma.com/blog/when-fonts-fall
I usually make a small point of grabbing the Twemoji’s SVGs if I’m using emoji in an icon context. Everyone (for some definition, I do also use alt attribute as fallback!) gets to see the same thing, in the way I intend it (since emoji can differ so much between fonts too!).
WCAG ARIA24 & WCAG H86 covers this topic too,
aria-label="Warning" role="img"seeming appropriate for this case, though of course it depends on context too.The code surrounding the use of this component includes the aria label and row. I didn’t include that in this example for logistical reasons.
Try
font-family: initial, it should work just as well, without the reference to a specific font. BTW the issue didn’t show up on any browser for me until I installed the Menlo font (seems like it’s only preinstalled on Mac?), so it seems to be Menlo’s fault.ahhhhh! fonts!