Info emoji does not render as a picture
flanakin opened this issue · comments
Describe the bug
Including the info emoji (ℹ️) renders as an "i" instead of the graphical format.
To Reproduce
Steps to reproduce the behavior:
- Add an info emoji to a doc
- Push the changes to view it on GitHub Pages
Expected behavior
Emoji should be rendered as the image.
Screenshots
Desktop (please complete the following information):
- OS: Windows
- Browser Edge
- Version 116
Thanks for submitting an issue @flanakin! I'm actually not able to reproduce this locally; both
ℹ️
> ℹ️ booprender the emoji as-is:
I'm on macOS (so, not Windows) and have verified this with Firefox + Chrome (which uses Chromium, like Edge).
With that in mind, could I ask you to provide a repository or another more detailed minimum reproducible example so I can help you debug? This does sound like a strange bug to me!
Separately, GitHub has now allowed "callout"-like elements in markdown, called alerts; I wonder if there's any relationship here
Note
Highlights information that users should take into account, even when skimming.
> [!NOTE]
> Highlights information that users should take into account, even when skimming.With that in mind, could I ask you to provide a repository or another more detailed minimum reproducible example so I can help you debug? This does sound like a strange bug to me!
Luckily, it looks like I missed one in my cleanup PR. See https://microsoft.github.io/finops-toolkit/hubs/template#%EF%B8%8F-resources:~:text=%E2%84%B9%EF%B8%8F%20In%20the%20future%2C%20we%20will%20use%20this%20container%20to%20stage%20external%20data%20outside%20of%20Cost%20Management.
It's interesting because I only see this in GitHub Pages. GitHub shows the icon correctly.
Separately, GitHub has now allowed "callout"-like elements in markdown, called alerts; I wonder if there's any relationship here
That feels unrelated. I'm not using that syntax. That said, I'd love to see JTD standardize on the same syntax! The Liquid syntax conflicts with markdown lint rules/tools we use, so we have to use HTML for callouts 😕
FYI - I can confirm it works on iOS. Seems to be specific to Windows.
I saw something about specific fonts causing this. Not sure if that's the issue. Maybe it's caused by a font that isn't available on Mac/iOS?
@flanakin thanks for your suggestion regarding callouts:
I'd love to see JTD standardize on the same syntax! The Liquid syntax conflicts with markdown lint rules/tools we use, so we have to use HTML for callouts 😕
JTD uses kramdown's IAL syntax to implement callouts. This is independent of Liquid syntax, despite both using {…}.
In general, Markdown processors generate HTML, and HTML doesn't provide a tag for alerts. GitHub's own Markdown processor recognises their alert syntax for callouts:
> [!NOTE]
> Highlights information that users should take into account, even when skimming.and generates:
With GitHub's CSS, that renders as:
Note
Highlights information that users should take into account, even when skimming.
But neither kramdown nor JTD uses GitHub's CSS, and we can't use GitHub's internal Markdown processor.
I wasn't suggesting use their CSS. Your styling is better. I was just suggesting using their markdown as the hint to render your styling.
Unfortunately kramdown doesn't have an option to recognise GitHub's alerts such as "[!NOTE]", so it's not possible for JTD to implement your suggestion.
Understood. Any thoughts on the info emoji? I'm not sure what's causing that in the stack. My assumption is it's a font issue... at least, that's what Bing Chat told me 😜
Actually, I compared the GitHub fonts to JTD fonts and it looks like you just need to add "Segoe UI Emoji" to the end of your list. If you do that, then it looks like it works.
Added a PR 😊