4 ms·

How do they technically implement this? Custom font? Or replace every emoji with an <img tag?

by londons_explore 2y ago

cruffle_duffle 2y ago
you can use a custom font for your site that includes glyphs for the characters you need (eg: a gun).
- ronsor 2y ago
  Modern emojis are stored as fonts.
  - skrebbel 2y ago
    This is nonsense. A complete custom emoji font is something like 10MB. Shipping that to every website visitor is obscenely wasteful. This is why sites either just use native emojis, which all OSes support reasonably well by now, or download a little SVG for every emoji used.
AnotherGoodName 2y ago
Custom font is sensible fwiw. You can have a font with a single glyph implemented and you’ll override just that glyph, falling back to other fonts for the non implemented glyphs. This is why sites often have a list of fonts and not just one in the css. It’s also how other languages are supported. No Thai chars in your font? We just fall back until we hit a font with those glyphs available (might be an os level font rather than a site specified font but that’s fine). I’d hate to try and hack a “intercept the text and add an image” type of system when the font rendering system has a trivial way to override individual glyphs already.
- londons_explore 2y ago
  > This is why sites often have a list of fonts Doesn't that mean every font in the list needs to be loaded? And surely in many cases the sets of glyphs overlap and then a bunch of network bandwidth has been wasted?
  - AnotherGoodName 2y ago
    The ones that are single/small subset glyph are fine since it’s a few bytes and very cacheable and then the others in the list are usually the well known font types “arial” etc. which don’t even need the site to supply a new font file (you can specify fonts in css with a file or simply a name of a common font/font family). So no real issue at all.
kevingadd 2y ago
Twitter has had custom images for emoji for years, the set was/is called Twemoji. This allowed them to have consistent rendering across platforms.
ascorbic 2y ago
They're SVGs in img tags. This is the new one: https://abs.twimg.com/responsive-web/client-web/1f52b.1465b29a.svg https://abs.twimg.com/responsive-web/client-web/1f52b.1465b2...

How do they technically implement this? Custom font? Or replace every emoji with an <img tag?

cruffle_duffle 2y ago

you can use a custom font for your site that includes glyphs for the characters you need (eg: a gun).

ronsor 2y ago
Modern emojis are stored as fonts.
- skrebbel 2y ago
  This is nonsense. A complete custom emoji font is something like 10MB. Shipping that to every website visitor is obscenely wasteful. This is why sites either just use native emojis, which all OSes support reasonably well by now, or download a little SVG for every emoji used.

AnotherGoodName 2y ago

Custom font is sensible fwiw. You can have a font with a single glyph implemented and you’ll override just that glyph, falling back to other fonts for the non implemented glyphs. This is why sites often have a list of fonts and not just one in the css. It’s also how other languages are supported. No Thai chars in your font? We just fall back until we hit a font with those glyphs available (might be an os level font rather than a site specified font but that’s fine). I’d hate to try and hack a “intercept the text and add an image” type of system when the font rendering system has a trivial way to override individual glyphs already.

londons_explore 2y ago
> This is why sites often have a list of fonts Doesn't that mean every font in the list needs to be loaded? And surely in many cases the sets of glyphs overlap and then a bunch of network bandwidth has been wasted?
- AnotherGoodName 2y ago
  The ones that are single/small subset glyph are fine since it’s a few bytes and very cacheable and then the others in the list are usually the well known font types “arial” etc. which don’t even need the site to supply a new font file (you can specify fonts in css with a file or simply a name of a common font/font family). So no real issue at all.

kevingadd 2y ago

Twitter has had custom images for emoji for years, the set was/is called Twemoji. This allowed them to have consistent rendering across platforms.

ascorbic 2y ago

They're SVGs in img tags. This is the new one: https://abs.twimg.com/responsive-web/client-web/1f52b.1465b29a.svg https://abs.twimg.com/responsive-web/client-web/1f52b.1465b2...