9 ms·

Color Emoji in Windows 8.1 – The Future of Color Fonts?

205 points by sanqui 12y ago

tiles 12y ago
I enjoyed this thorough breakdown of the different technologies. "Colorful typography on the web: get ready for multicolor fonts" http://www.pixelambacht.nl/2014/multicolor-fonts/ http://www.pixelambacht.nl/2014/multicolor-fonts/ In particular, it expands on the details behind Adobe/Mozilla's SVG approach, as well as browser support.
sigzero 12y ago
My phone has color emoji. Facebook has color emoji. Am I missing something?
- jeremymcanally 12y ago
  You obviously didn't read the article. This solution is totally different, building up the color emoji using a cool font table approach. You should read it; it's worth the time. :)
  - mbq 12y ago
    Actually it is a pretty dirty hack -- it seems ok because the flat design is currently popular. But quite likely gradients and shadows will come back in a few years and then few single-color layers won't be enough.
    - TazeTSchnitzel 12y ago
      You could build gradients with this, but it wouldn't look nice zoomed in. And, importantly, Apple's current gradient-filled font wouldn't work!
- mwfunk 12y ago
  Yes.
deleted 12y ago
[deleted]
pling 12y ago
These look really cool as does the technology, but I don't think I've ever used Emoji past a couple of ASCII smilies. My Android handset seems to have them but I don't use them and neither does anyone else I know. Is this a cultural thing I'm missing?
- Guvante 12y ago
  Yes, from what stories are saying. It may also be in part due to the complexities of asian languages. (Note that this latter part is complete conjecture)
  - aninhumer 12y ago
    I think more specifically, East Asian languages are based on symbolic characters already, so using emoji is kind of like using a bunch of new characters, instead of being a completely unfamiliar concept. As someone else mentioned, the two layer input systems used by these languages also make inserting an emoji pretty much the same as typing any other word.
- aneisf 12y ago
  Yeah, they're wildly popular with just about everyone I know 25 and under, especially on sites like Instagram. There's even been a music video created from them: http://www.youtube.com/watch?v=qmlJveN9IkI http://www.youtube.com/watch?v=qmlJveN9IkI
  - pling 12y ago
    Ok thanks. That's well under my age so I understand. Does it replace "TXT SPK" which I'm still too old to use and find terribly annoying? (I'm sounding like a right grumpy old git here)
    - Linell 12y ago
      Less of a replacement and more of a supplement.
    - 12y ago
wnevets 12y ago
I must be getting old because I hate these things. They're the blink tag on steroids.
- wubbfindel 12y ago
  The main point of the article has nothing to do with emoji. MS's approach to implementing emoji however could lead to a very useable color font format. Read it.
  - wnevets 12y ago
    the main point of the article is that these awful things are spreading like herpes.
deaconblues 12y ago
Seems neat, and I appreciate the forward-thinking mentality. But, as far as I am aware, emoji are a fad and won't really stand the test of time anyway. Either way, I guess, it's nice to see these easy-to-use, easy-to-create principals in play.
- nostromo 12y ago
  Emoji aren't going anywhere. They've been around in Japan for over a decade and have been enshrined forever in Unicode 6.
- Synaesthesia 12y ago
  I thought so too, until I started using them in my messages to my friends and girlfriend. Now I find them an integral part of my communications. 😄
  - ranran876 12y ago
    Oh the irony. Your emoji comes out as a blank square for me (Windows 7 - Opera 12)
    - wlesieutre 12y ago
      Chrome does the blank square as well, but it works in Firefox and IE. (win7)
      - heinrich5991 12y ago
        Works for me in FF on Linux.
    - shanselman 12y ago
      Looks good here, IE11 on Windows 8.1
    - raphman_ 12y ago
      Opera 12 on Debian GNU/Linux shows it fine
cordite 12y ago
Having both a color-unaware and color-aware versions can be really useful. Printing for example would retain the meaning without a gray-scaled rendition losing the details to understand what the symbol might be. (This is just a guess, not an assertion that black-and-white symbols would be used in this context.) From an accessibility standpoint, consider situations where high-contrast (and or size) is necessary, and it is perfectly legitimate to throw out or ignore the text and background colors for such users. This solution seems to best satisfy comprehension needs for disabled users as well as printers--not that we need to print the bible translated to emoji any time soon.
PeterGriffin 12y ago
It's not "the future of color fonts", it's just the present of emoji in Windows. And I really don't like the way they did this. The technical approach is smart, but lazy, and the resulting emoji look bland and lack definition. No wonder, since this approach doesn't support the way artists work. It's not SVG, it's not PostScript, it's not a bitmap, it's just a glyph sandwich. No opacity, no gradients, no effects. It must be a pain to split your pictures in layers so they can be in a font like that. As far as using this for text... the novelty of such effects faded out sometime in the 90s when Word Art was all the rage among design-blind office workers. In the modern world of Unicode, it's even less likely we'll start making fonts with hardcoded layers of cheesy effects when you need to cover a good range of international characters, weights, cursive, hints, kern pairs, ligatures, alternate versions and so on.
- derefr 12y ago
  > It's not SVG, it's not PostScript, it's not a bitmap, it's just a glyph sandwich. No opacity, no gradients, no effects. Well thank god. What you call "opacity, gradients, and effects", I call "total inability to be bolded, colored, embossed, etc." Apple's and Google's emoji basically entirely ignore CSS in favor of looking, well, exactly the way they look. Styling emoji to actually fit your site's theme? Who'd have imagined?
  - PeterGriffin 12y ago
    You seem so passionate about this, it hurts to break your heart. When you set your text to be bold, that's a separate font, made by a human hand. Browsers have a fake bold look when the font is missing, but it's not a look you want on your site. They just, well... smudge it to the right. For Emoji the fake bold look is disabled, because bold or italic emoji is just non-sense on the face of it, so they don't support weight settings. Also, you can't set the color of Windows Emoji via CSS. They're already colored.
    - kevingadd 12y ago
      The design of the windows approach to colored fonts actually has affordances for recoloring the text. It's not implemented, but it's mentioned in overviews of the format. Because the colored glyphs use a palette instead of hard-coded colors, it's possible to assign semantic meanings or names to each palette entry and remap them. This would enable you to render a 'high contrast' version, or adjust the primary color of an emoji (for example, changing the skin tone of a face), etc. The latter is actually a topic of concern: Most current emoji represent a caucasian or light-skinned individual, so the lack of emojis that represent other races is a problem. People are still figuring out how to deal with it.
ryansouza 12y ago
This reminds me of the customizable shape avatars, like from Halo 2
dispense 12y ago
I can't read this article without allowing Javascript.
- hrjet 12y ago
  That is true for about 50% of the links posted here these days. I usually just close the tab and read the comments on HN. Note to site designers: something is terribly wrong if JS is needed to render the main textual content of your site.
  - lucian1900 12y ago
    Or just get with the program and allow JS. It's not going away, as flawed a language as it is. Web browsers are an execution environment, no longer just document viewers.
    - dagurp 12y ago
      What about Braille readers and stuff like that? How well do they support javascript?
      - lucian1900 12y ago
        Reportedly, accessible browsers do support JavaScript well enough. Modern ones are usually based on WebKit. They have to contend with the real world of websites (already) using JS to display content.
    - aw3c2 12y ago
      But why should viewing a document require javascript execution?
      - cookiecaper 12y ago
        Because CSS and HTML are woefully inadequate and JavaScript has to be used to produce many layouts.
    - 12y ago
asgard1024 12y ago
This is offtopic, but I really miss emoji for "shrug" - expression of I don't know and I don't care. They should add something like that to Unicode.
- dagurp 12y ago
  ¯\(°_o)/¯
tyrionaura 12y ago
I still have the feeling that emojis in general are an unsolved problem, especially on iOS, where it takes so much time to find a proper "character".
paulrov 12y ago
> Future > Doesn't support gradients yeah, nah
AshleysBrain 12y ago
I think this is a great implementation. Embedding PNGs in to a font feels wrong - surely that doesn't scale up to large font sizes well? Or causes a blurry/pixellated downscaled image? Mixing bitmap with vector seems an odd engineering decision. Microsoft's approach is elegant in maintaining backwards compatibility and also enabling colored vector images on top. The only downside seems to be a limited color palette, but I don't think that outweighs the benefits, and also encourages a clear and simple design.
lmm 12y ago
I've seen browsers use a colour font for e.g. mahjong tiles (🀄) already; was that a different implementation, or what?

205 points by sanqui 12y ago

tiles 12y ago

I enjoyed this thorough breakdown of the different technologies. "Colorful typography on the web: get ready for multicolor fonts" http://www.pixelambacht.nl/2014/multicolor-fonts/ http://www.pixelambacht.nl/2014/multicolor-fonts/ In particular, it expands on the details behind Adobe/Mozilla's SVG approach, as well as browser support.

sigzero 12y ago

My phone has color emoji. Facebook has color emoji. Am I missing something?

jeremymcanally 12y ago
You obviously didn't read the article. This solution is totally different, building up the color emoji using a cool font table approach. You should read it; it's worth the time. :)
- mbq 12y ago
  Actually it is a pretty dirty hack -- it seems ok because the flat design is currently popular. But quite likely gradients and shadows will come back in a few years and then few single-color layers won't be enough.
  - TazeTSchnitzel 12y ago
    You could build gradients with this, but it wouldn't look nice zoomed in. And, importantly, Apple's current gradient-filled font wouldn't work!
mwfunk 12y ago
Yes.

deleted 12y ago

[deleted]

pling 12y ago

These look really cool as does the technology, but I don't think I've ever used Emoji past a couple of ASCII smilies. My Android handset seems to have them but I don't use them and neither does anyone else I know. Is this a cultural thing I'm missing?

Guvante 12y ago
Yes, from what stories are saying. It may also be in part due to the complexities of asian languages. (Note that this latter part is complete conjecture)
- aninhumer 12y ago
  I think more specifically, East Asian languages are based on symbolic characters already, so using emoji is kind of like using a bunch of new characters, instead of being a completely unfamiliar concept. As someone else mentioned, the two layer input systems used by these languages also make inserting an emoji pretty much the same as typing any other word.
aneisf 12y ago
Yeah, they're wildly popular with just about everyone I know 25 and under, especially on sites like Instagram. There's even been a music video created from them: http://www.youtube.com/watch?v=qmlJveN9IkI http://www.youtube.com/watch?v=qmlJveN9IkI
- pling 12y ago
  Ok thanks. That's well under my age so I understand. Does it replace "TXT SPK" which I'm still too old to use and find terribly annoying? (I'm sounding like a right grumpy old git here)
  - Linell 12y ago
    Less of a replacement and more of a supplement.
  - 12y ago

wnevets 12y ago

I must be getting old because I hate these things. They're the blink tag on steroids.

wubbfindel 12y ago
The main point of the article has nothing to do with emoji. MS's approach to implementing emoji however could lead to a very useable color font format. Read it.
- wnevets 12y ago
  the main point of the article is that these awful things are spreading like herpes.

deaconblues 12y ago

Seems neat, and I appreciate the forward-thinking mentality. But, as far as I am aware, emoji are a fad and won't really stand the test of time anyway. Either way, I guess, it's nice to see these easy-to-use, easy-to-create principals in play.

nostromo 12y ago
Emoji aren't going anywhere. They've been around in Japan for over a decade and have been enshrined forever in Unicode 6.
Synaesthesia 12y ago
I thought so too, until I started using them in my messages to my friends and girlfriend. Now I find them an integral part of my communications. 😄
- ranran876 12y ago
  Oh the irony. Your emoji comes out as a blank square for me (Windows 7 - Opera 12)
  - wlesieutre 12y ago
    Chrome does the blank square as well, but it works in Firefox and IE. (win7)
    - heinrich5991 12y ago
      Works for me in FF on Linux.
  - shanselman 12y ago
    Looks good here, IE11 on Windows 8.1
  - raphman_ 12y ago
    Opera 12 on Debian GNU/Linux shows it fine

cordite 12y ago

Having both a color-unaware and color-aware versions can be really useful. Printing for example would retain the meaning without a gray-scaled rendition losing the details to understand what the symbol might be. (This is just a guess, not an assertion that black-and-white symbols would be used in this context.) From an accessibility standpoint, consider situations where high-contrast (and or size) is necessary, and it is perfectly legitimate to throw out or ignore the text and background colors for such users. This solution seems to best satisfy comprehension needs for disabled users as well as printers--not that we need to print the bible translated to emoji any time soon.

PeterGriffin 12y ago

It's not "the future of color fonts", it's just the present of emoji in Windows. And I really don't like the way they did this. The technical approach is smart, but lazy, and the resulting emoji look bland and lack definition. No wonder, since this approach doesn't support the way artists work. It's not SVG, it's not PostScript, it's not a bitmap, it's just a glyph sandwich. No opacity, no gradients, no effects. It must be a pain to split your pictures in layers so they can be in a font like that. As far as using this for text... the novelty of such effects faded out sometime in the 90s when Word Art was all the rage among design-blind office workers. In the modern world of Unicode, it's even less likely we'll start making fonts with hardcoded layers of cheesy effects when you need to cover a good range of international characters, weights, cursive, hints, kern pairs, ligatures, alternate versions and so on.

derefr 12y ago
> It's not SVG, it's not PostScript, it's not a bitmap, it's just a glyph sandwich. No opacity, no gradients, no effects. Well thank god. What you call "opacity, gradients, and effects", I call "total inability to be bolded, colored, embossed, etc." Apple's and Google's emoji basically entirely ignore CSS in favor of looking, well, exactly the way they look. Styling emoji to actually fit your site's theme? Who'd have imagined?
- PeterGriffin 12y ago
  You seem so passionate about this, it hurts to break your heart. When you set your text to be bold, that's a separate font, made by a human hand. Browsers have a fake bold look when the font is missing, but it's not a look you want on your site. They just, well... smudge it to the right. For Emoji the fake bold look is disabled, because bold or italic emoji is just non-sense on the face of it, so they don't support weight settings. Also, you can't set the color of Windows Emoji via CSS. They're already colored.
  - kevingadd 12y ago
    The design of the windows approach to colored fonts actually has affordances for recoloring the text. It's not implemented, but it's mentioned in overviews of the format. Because the colored glyphs use a palette instead of hard-coded colors, it's possible to assign semantic meanings or names to each palette entry and remap them. This would enable you to render a 'high contrast' version, or adjust the primary color of an emoji (for example, changing the skin tone of a face), etc. The latter is actually a topic of concern: Most current emoji represent a caucasian or light-skinned individual, so the lack of emojis that represent other races is a problem. People are still figuring out how to deal with it.

ryansouza 12y ago

This reminds me of the customizable shape avatars, like from Halo 2

dispense 12y ago

I can't read this article without allowing Javascript.

hrjet 12y ago
That is true for about 50% of the links posted here these days. I usually just close the tab and read the comments on HN. Note to site designers: something is terribly wrong if JS is needed to render the main textual content of your site.
- lucian1900 12y ago
  Or just get with the program and allow JS. It's not going away, as flawed a language as it is. Web browsers are an execution environment, no longer just document viewers.
  - dagurp 12y ago
    What about Braille readers and stuff like that? How well do they support javascript?
    - lucian1900 12y ago
      Reportedly, accessible browsers do support JavaScript well enough. Modern ones are usually based on WebKit. They have to contend with the real world of websites (already) using JS to display content.
  - aw3c2 12y ago
    But why should viewing a document require javascript execution?
    - cookiecaper 12y ago
      Because CSS and HTML are woefully inadequate and JavaScript has to be used to produce many layouts.
  - 12y ago

asgard1024 12y ago

This is offtopic, but I really miss emoji for "shrug" - expression of I don't know and I don't care. They should add something like that to Unicode.

dagurp 12y ago
¯\(°_o)/¯

tyrionaura 12y ago

I still have the feeling that emojis in general are an unsolved problem, especially on iOS, where it takes so much time to find a proper "character".

paulrov 12y ago

> Future > Doesn't support gradients yeah, nah

AshleysBrain 12y ago

I think this is a great implementation. Embedding PNGs in to a font feels wrong - surely that doesn't scale up to large font sizes well? Or causes a blurry/pixellated downscaled image? Mixing bitmap with vector seems an odd engineering decision. Microsoft's approach is elegant in maintaining backwards compatibility and also enabling colored vector images on top. The only downside seems to be a limited color palette, but I don't think that outweighs the benefits, and also encourages a clear and simple design.

lmm 12y ago

I've seen browsers use a colour font for e.g. mahjong tiles (🀄) already; was that a different implementation, or what?