Skip to content

Instantly share code, notes, and snippets.

@DerekNonGeneric
Created May 23, 2022 21:09
Show Gist options
  • Save DerekNonGeneric/94b96be75962fef02fbbddfa57264d0c to your computer and use it in GitHub Desktop.
Save DerekNonGeneric/94b96be75962fef02fbbddfa57264d0c to your computer and use it in GitHub Desktop.
Legend of HTML entities and Unicode symbols (rendered as text) used for the 3 fundamental callouts

From a Web Performance perspective, I would probably suggest simply using the Unicode symbols for these:

rendered keyword HTML entity
note ⓘ
⚠︎ warning ⚠︎1
danger / error ⓧ

ⓘ  Note For those interested, this idea was heavily inspired by the symbol legend found in @openinf/util-text, originally intended for implementing JavaScript console loggers in terminal emulators. The Unicode code points for these symbols (found in an enum in the source) are what the HTML entities are derived from.

Footnotes

  1. The symbol for the Warning callout is actually composed of two HTML entities. The ︎ HTML entity, which follows the HTML entity for the warning symbol (⚠), forces the previous character to be rendered as text (e.g., ⚠︎) rather than as an Emoji Symbol (⚠️), which would be unsuitable due to inconsistencies across devices.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment