diff options
Diffstat (limited to 'doc/context/sources/general/manuals/onandon/onandon-emoji.tex')
| -rw-r--r-- | doc/context/sources/general/manuals/onandon/onandon-emoji.tex | 457 |
1 files changed, 457 insertions, 0 deletions
diff --git a/doc/context/sources/general/manuals/onandon/onandon-emoji.tex b/doc/context/sources/general/manuals/onandon/onandon-emoji.tex new file mode 100644 index 000000000..1f67cc528 --- /dev/null +++ b/doc/context/sources/general/manuals/onandon/onandon-emoji.tex @@ -0,0 +1,457 @@ +% language=uk + +\usemodule[fonts-emoji] + +\environment onandon-environment + +% \definefont[MyEmoji][emojionecolor-svginot*default,svg] +% \definefont[MyEmoji][seguiemj*seguiemj-bw] +% \definefont[MyEmoji][emojionemozilla*default,overlay] +% \definefont[MyEmoji][applecoloremoji*default,bitmap] + +\definefontfeature[seguiemj-cl][default][colr=yes,ccmp=yes,dist=yes] +\definefontfeature[seguiemj-bw][default][ccmp=yes,dist=yes] + +\definefont[MyEmoji] [seguiemj*seguiemj-cl] +\definefont[MyEmojiLarge][seguiemj*seguiemj-cl @ 100pt] + +\definefontsynonym[emoji][seguiemj*seguiemj-cl] + +\startcomponent onandon-emoji + +\startchapter[title=Emoji again] + +Because at the \CONTEXT\ 2016 meeting color fonts \footnote {For that occasion +the cowfont, a practical joke concerning Dutch \quote {koeieletters}, were turned +into a color font and presented at the meeting.} were on the agenda, some time +was spent on emoji (these colorful small picture glyphs). When possible I bring +kids to the Bacho\TEX\ conference so for the 2017 BachoTUG I decided to do +something with emoji that, after all, are mostly used by those younger than I am. +So, I had to take a look at the current state. Here are some observations. + +The \UNICODE\ standard defines a whole lot of emoji and if mankind manages to +survive for a while one can assume that a lot more will be added. After all, +icons as well as variants keep evolving. There are several ways to organize these +symbols in groups but I will not give grouping a try. Just visit \type +{emojipedia.org} and you get served well. For this story I only mention that: + +\startitemize + \startitem + There are quite some shapes and nearly all of them are in color. The + yellow ones, smilies and such, are quite prominently present but there + are many more. + \stopitem + \startitem + A special subset is fulled by persons: man, woman, girl, boy and recently + a baby. + \stopitem + \startitem + The grown ups can be combined in loving couples (either or not kissing) + and then can form families, but only upto 2 young kids or gender neutral + babies. + \stopitem + \startitem + All persons can be flagged with one of five skin tones so that not all + persons (or heads) look bright yellow. + \stopitem + \startitem + Interesting is that girls and boys are still fond of magenta (pinkish) + and cyan (blueish) cloths and ornaments. Also haircuts are rather + specific to the gender. + \stopitem +\stopitemize + +For rendering color emojis we have a few color related \OPENTYPE\ font properties +available: bitmaps, \SVG\, and stacked glyphs. Now, if you think of the +combinations that can be made with skin tones, you realize that fonts can become +pretty large if each combination results in a glyph. In the first half of 2017 +\MICROSOFT\ released an update for its emoji font and the company took the +challenge to provide not only mixed skin tone couples, but also supported skin +tones for the kids, including a baby. + +This recent addition already adds over 25.000 additional glyphs \footnote {That +is the amount I counted when I added all combinations runtime but the emojipedia +mentions twice that amount. Currently in \CONTEXT\ we resolve such combinations +when requested.} so imagine what will happen in the future. But, instead of +making a picture for each variant, a different solution has been chosen. For +coloring this seguiemj font uses the (very flexible) stacking technology: a color +shape is an overlay of colored symbols. The colors are organized in pallets and +it's no big deal to add additional pallets if needed. Instead of adding +pre|-|composed shapes (as is needed with bitmaps and \SVG) snippets are used to +build alternative glyphs and these can be combined into new shapes by +substitution and positioning (for that kerns, mark anchoring and distance +compensation is used). + +So, a family can be constructed of composed shapes (man, woman, etc) that each +are composed of snippets (skull, hair, mouth, eyes). So, effectively a family of +four is a bunch of maybe 25 small glyphs overlayed and colored. In \in {figure} +[fig:emojisnippets] we see how a shape is constructed out of separate glyphs. \in +{Figure} [fig:emojisnippetsoverlay] shows how they can be overlayed with colors +(we use a dedicated color set). + +\startplacefigure[title={Emoji snippets.},reference=fig:emojisnippets] + \scale[width=\textwidth]{\framed[frame=off,offset=overlay,align=normal]\bgroup + \forgetall + \MyEmoji + \ShowEmojiSnippets + [family man light skin tone + woman dark skin tone + girl medium skin tone + boy medium skin tone] + \egroup} +\stopplacefigure + +\startplacefigure[title={Emoji snippets overlayed.},reference=fig:emojisnippetsoverlay] + \scale[width=\textwidth]{\framed[frame=off,offset=overlay,align=normal]\bgroup + \forgetall + \MyEmoji + \ShowEmojiSnippetsOverlay + [family man light skin tone + woman dark skin tone + girl medium skin tone + boy medium skin tone] + \egroup} +\stopplacefigure + +When a font supports it, a sequence of emoji can be turned into a more compact +representation. In \in {figure} [fig:emojiskintones] we see how skin tones are +applied in such combinations. \in {Figure} [fig:emojiglyphs] shows the small +snippets. + +\startplacefigure[title={Emoji families and such with skin tones.},reference=fig:emojiskintones,location=page] + \startcombination[2*4] + {\ruledhbox{\MyEmojiLarge\resolvedemoji + {family man woman girl boy}}} + {family man woman girl boy} + {\ruledhbox{\MyEmojiLarge\resolvedemoji + {family woman girl boy}}} + {family woman girl boy} + {\ruledhbox{\MyEmojiLarge\resolvedemoji + {family woman woman girl boy}}} + {family woman woman girl boy} + {\ruledhbox{\MyEmojiLarge\resolvedemoji + {family man girl boy}}} + {family man girl boy} + {\ruledhbox{\MyEmojiLarge\resolvedemoji + {family + man dark skin tone + woman girl baby}}} + {family + man dark skin tone + woman girl baby} + {\ruledhbox{\MyEmojiLarge\resolvedemoji + {family + man light skin tone + woman light skin tone + girl dark skin tone}}} + {family + man light skin tone + woman light skin tone + girl dark skin tone} + {\ruledhbox{\MyEmojiLarge\resolvedemoji + {family woman girl boy}}} + {family woman girl boy} + {\ruledhbox{\MyEmojiLarge\resolvedemoji + {family + man light skin tone + woman dark skin tone + girl medium skin tone + boy medium skin tone}}} + {family + man light skin tone + woman dark skin tone + girl medium skin tone + boy medium skin tone} + \stopcombination +\stopplacefigure + +\startplacefigure[title={Emoji glyphs.},reference=fig:emojiglyphs] + \scale[width=\textwidth]{\framed[frame=off,offset=overlay,align=normal]\bgroup + \forgetall + \MyEmoji + \ShowEmojiGlyphs + [family man light skin tone + woman dark skin tone + girl medium skin tone + boy medium skin tone] + \egroup} +\stopplacefigure + +When we have to choose a font we need to take the following criteria into +account: + +\startitemize +\startitem + What is the quality of the shapes? For sure, outlines are best if you want to + scale too. +\stopitem +\startitem + How efficient is a shape constructed. In that respect a bitmap or \SVG\ image + is just one entity. +\stopitem +\startitem + How well can (semi) arbitrary combinations of emoji be provided. Here the + glyph approach wins. +\stopitem +\startitem + Are all skin colors for all human relates shapes supported? Actually it opens + the possibility for racist fonts. +\stopitem +\startitem + Are all reasonable combinations of persons supported? It looks like (depending + on time and version) kissing men or women can be missing, maybe because of + social political reasons. +\stopitem +\startitem + Are black and white shapes provided alongside color shapes. +\stopitem +\stopitemize + +Maybe an \SVG\ or bitmap image can have a lot of detail compared to a stacked +glyph but, when we're just using pictographic representations, the later is the +best choice. + +When I was playing a bit with the skin tone variants and other combinations that +should result in some composed shape, I used the \UNICODE\ test files but I got +the impression that there are some errors in the test suite, for instance with +respect to modifiers. Maybe the fonts are just doing the wrong thing or maybe +some implement these sequences a bit inconsistent. This will probably improve +over time but the question is if we should intercept issues. I'm not in favour of +this because it adds more and more fuzzy code that not only wastes cycles +(energy) but is also a conceptual horror. So, when testing, imperfection has to +be accepted for now. This is no big deal as until now no one ever asked for emoji +support in \CONTEXT. + +When no combined shape is provided, the original sequence shows up. A side effect +can be that zero|-|width|-| joiners and modifiers become visible. This depends on +the fonts. Users probably don't care that much about it. Now how do we suppose +that users enter these emoji (sequences) in a document source? One can imagine a +pop up in the editor but \TEX ies are often using commands for special cases. + +We already showed some combined shapes. The reader might appreciate the outcome +but getting there from the input takes a bit of work. For instance a two person +\typ {man light skin tone woman medium skin tone girl medium-light skin tone baby +medium-light skin tone} involves this: + +\blank +\start + \setupalign[verytolerant] + \showotfcomposition + {seguiemj*seguiemj-cl} + {1} + {\resolvedemoji{family + man light skin tone + woman medium skin tone + girl medium-light skin tone + baby medium-light skin tone}} +\stop +\blank + +A black and white example is the following \type {family woman girl}: + +\blank +\start + \setupalign[verytolerant] + \showotfcomposition + {seguiemj*seguiemj-bw} + {1} + {\resolvedemoji{family woman girl}} +\stop +\blank + +I will not show all emoji, just the subset that contains the word \type {woman} +in the description. As you can see the persons in the sequences are separated by +a zero|-|width|-|joiner. There are some curious ones, for instance a \typ {woman +wearing turban} which in terms of \UNICODE\ input is a female combine with a +turban wearing man becomes a beardless woman wearing a turban. Woman vampires and +zombies are not supported so these are male properties. + +\startpacked + \MyEmoji + \ShowEmoji[woman] +\stoppacked + +So what if you don't like these colors? Because we're dealing with \TEX\ you can +assume that if there is some way around the fixed color sets, then it will be +provided. So, when you use \CONTEXT, here is away to overload them: + +\startbuffer +\definecolor[emoji-red] [r=.4] +\definecolor[emoji-green] [g=.4] +\definecolor[emoji-blue] [b=.4] +\definecolor[emoji-yellow][r=.4,g=.4] +\definecolor[emoji-gray] [s=1,t=.5,a=1] + +\definefontcolorpalette + [emoji-s] + [black,emoji-gray] + +\definefontcolorpalette + [emoji-r] + [emoji-red,emoji-gray] + +\definefontcolorpalette + [emoji-g] + [emoji-green,emoji-gray] + +\definefontcolorpalette + [emoji-b] + [emoji-blue,emoji-gray] + +\definefontcolorpalette + [emoji-y] + [emoji-yellow,emoji-gray] + +\definefontfeature[seguiemj-s][ccmp=yes,dist=yes,colr=emoji-s] +\definefontfeature[seguiemj-r][ccmp=yes,dist=yes,colr=emoji-r] +\definefontfeature[seguiemj-g][ccmp=yes,dist=yes,colr=emoji-g] +\definefontfeature[seguiemj-b][ccmp=yes,dist=yes,colr=emoji-b] +\definefontfeature[seguiemj-y][ccmp=yes,dist=yes,colr=emoji-y] + +\definefont[MyEmojiS][seguiemj*seguiemj-s] +\definefont[MyEmojiR][seguiemj*seguiemj-r] +\definefont[MyEmojiG][seguiemj*seguiemj-g] +\definefont[MyEmojiB][seguiemj*seguiemj-b] +\definefont[MyEmojiY][seguiemj*seguiemj-y] +\stopbuffer + +\typebuffer \getbuffer + +\startplacefigure[title={Overloading colors by plugging in a sequence of alternate colors.},reference=fig:emojioverload,location=page] +\startcombination[4*6] + {\scale[height=.1\textheight]{\MyEmoji \resolvedemoji{triangular ruler}}} {} + {\scale[height=.1\textheight]{\MyEmoji \resolvedemoji{rabbit face}}} {} + {\scale[height=.1\textheight]{\MyEmoji \resolvedemoji{man}}} {} + {\scale[height=.1\textheight]{\MyEmoji \resolvedemoji{woman}}} {} + {\scale[height=.1\textheight]{\MyEmojiR\resolvedemoji{triangular ruler}}} {} + {\scale[height=.1\textheight]{\MyEmojiR\resolvedemoji{rabbit face}}} {} + {\scale[height=.1\textheight]{\MyEmojiR\resolvedemoji{man}}} {} + {\scale[height=.1\textheight]{\MyEmojiR\resolvedemoji{woman}}} {} + {\scale[height=.1\textheight]{\MyEmojiG\resolvedemoji{triangular ruler}}} {} + {\scale[height=.1\textheight]{\MyEmojiG\resolvedemoji{rabbit face}}} {} + {\scale[height=.1\textheight]{\MyEmojiG\resolvedemoji{man}}} {} + {\scale[height=.1\textheight]{\MyEmojiG\resolvedemoji{woman}}} {} + {\scale[height=.1\textheight]{\MyEmojiB\resolvedemoji{triangular ruler}}} {} + {\scale[height=.1\textheight]{\MyEmojiB\resolvedemoji{rabbit face}}} {} + {\scale[height=.1\textheight]{\MyEmojiB\resolvedemoji{man}}} {} + {\scale[height=.1\textheight]{\MyEmojiB\resolvedemoji{woman}}} {} + {\scale[height=.1\textheight]{\MyEmojiY\resolvedemoji{triangular ruler}}} {} + {\scale[height=.1\textheight]{\MyEmojiY\resolvedemoji{rabbit face}}} {} + {\scale[height=.1\textheight]{\MyEmojiY\resolvedemoji{man}}} {} + {\scale[height=.1\textheight]{\MyEmojiY\resolvedemoji{woman}}} {} + {\scale[height=.1\textheight]{\MyEmojiS\resolvedemoji{triangular ruler}}} {} + {\scale[height=.1\textheight]{\MyEmojiS\resolvedemoji{rabbit face}}} {} + {\scale[height=.1\textheight]{\MyEmojiS\resolvedemoji{man}}} {} + {\scale[height=.1\textheight]{\MyEmojiS\resolvedemoji{woman}}} {} +\stopcombination +\vskip2ex % looks nicer +\stopplacefigure + +In \in {figure} [fig:emojioverload] we see how this is applied. You can provide +as many colors as needed but when you don't provide enough the last one is used. +This way we get the overlayed transparent colors in the examples. By using +transparency we don't obscure shapes. + +The emojipedia mentions \quotation {Asked about the design, \MICROSOFT\ told +emojipedia that one of the reasons for the thick stroke was to allow each emoji +to be easily read on any background color.} The first glyph in the stack seems to +do the trick, so just make sure that it doesn't become white. And, before I read +that remark, while preparing a presentation with a colored background, I had +already noticed that using a background was no problem. This font definitely sets +the standard. + +How do we know what colors are used? The next table shows the first color palette +of seguiemj. There are quite some colors so defining your own definitely involved +some studying. + +{\MyEmoji\ShowEmojiPalettes[1]} + +Normally special symbols are accessed in \CONTEXT\ with the \type {symbol} +command where symbols are organized in symbol sets. This is a rather old +mechanism and dates from the time that fonts were limited in coverage and symbols +were collected in special fonts. The emoji are accessed by their own command: +\type {\emoji}. The font used has the font synonym \type {emoji} so you need to +set that one first: + +\starttyping +\definefontsynonym[emoji][seguiemj*seguiemj-cl] +\stoptyping + +Here is an example: + +\startbuffer +\emoji{woman light skin tone}\quad +\emoji{woman scientist}\quad +{\bfd bigger \emoji{man health worker}} +\stopbuffer + +\typebuffer + +or typeset: \getbuffer + +The emoji symbol scales with the normal running font. When you ask for a family +with skin toned members the lookup can result in another match (or no match) +because one never knows to what extend a font supports it. + +\starttabulate[|l|p|] +\NC \type{\expandedemoji} \NC the sequence constructed from the given string \NC \NR +\NC \type{\resolvedemoji} \NC a protected sequence constructed from the given string \NC \NR +\NC \type{\checkedemoji } \NC an typeset sequence with unresolved modifiers and joiners removed \NC \NR +\NC \type{\emoji} \NC a typeset resolved sequence using the \type {emoji} font synonym \NC \NR +\NC \type{\robustemoji} \NC a typeset checked sequence using the \type {emoji} font synonym \NC \NR +\stoptabulate + +In case you wonder how some of the details above were typeset, there is a module +\type {fonts-emoji} that provides some helpers for introspection. + +\starttabulate[|l|p|] +\NC \type {\ShowEmoji} \NC show all the emoji in the current font \NC \NR +\NC \type {\ShowEmojiSnippets} \NC show the snippets of a given emoji \NC \NR +\NC \type {\ShowEmojiSnippetsOverlay} \NC show the overlayed snippets of a given emoji \NC \NR +\NC \type {\ShowEmojiGlyphs} \NC show the snippets of a typeset emoji \NC \NR +\NC \type {\ShowEmojiPalettes} \NC show the color pallets in the current font \NC \NR +\stoptabulate + +Examples of usage are: + +\starttyping +\ShowEmojiSnippets[family man woman girl boy] +\ShowEmojiGlyphs [family man woman baby girl] +\ShowEmoji [^man] +\ShowEmoji +\ShowEmojiPalettes +\ShowEmojiPalettes[1] +\stoptyping + +A good source of information about emoji is the mentioned \type {emojipedia.org} +website. There you find not only details about all these symbols but also has +some history. It compares updates in fonts too. It mentions for instance that in +the creative update of Windows 10, some persons grew beards in the seguiemj font +and others lost an eye. Now, if you look at the snippets shown before, you can +wonder if that eye is really gone. Maybe the color is wrong or the order of +stacking is not right. I decided not to waste time looking into that. + +Another quote: \quotation {Support for color emoji presentation on \MSWINDOWS\ is +limited. Many applications on \MSWINDOWS\ display emojis with a black and white +text presentation instead of their color version.} Well, we can do better with +\TEX, but as usual not that many people really cares about that. But it's fun +anyway. + +We end with a warning. When you use \quote {ligatures} like this, you really need +to check the outcome. For instance, when \MICROSOFT\ updated the font end 2017, +same gender couples got different hair style for the individuals so that one can +still distinguish them. However, kissing couples and couples in love (indicated +by a heart) seem to be removed. Who knows how and when politics creep into fonts: +is public mixed couple kissing permitted, do we support families with any mix of +gender, is associating pink with girls okay or not, how do we distinguish male +and female anyway? In \in {figure} [fig:old-and-new] we see the same combination +twice, the early 2017 rendering versus the late 2017 rendering. Can you notice +the differences? + +\startplacefigure[title={Incompatible updates.},reference=fig:old-and-new] + \externalfigure[onandon-seguiemj.pdf][width=\textwidth] +\stopplacefigure + +\stopchapter + +\stopcomponent |