Wer lange genug oder erst sehr kurz mit dabei ist, wird die ASCII Kunst kennen. Wer nun der Erfinder von 
wirklich war, wird sich nie herausfinden lassen. Der Smiley als Ikone der Techno Bewegung entstand in den 80igern. Knapp 10 Jahre später wurden wir zu Simsern. In den SMS wurden Symbole genutzt um Gefühle in kurzer Form auszudrücken. Die folgenden Chat Systeme und Clients nutzten Emoticons auf Basis von ASCII Zeichen intensiv, ersetzen aber schon die Zeichen durch ein Bildschriftzeichen. Ab 2000 findet sich der Begriff Emoticon im Duden. Auch heute entstehen im Zeichen von Kommandozeile node.js und Tooling immer wieder gerne ASCII Kunstwerke ala ¯\_(ツ)_/¯ , Shruggy.
Bereits 1981 lieferte IBM im ASCII Zeichensatz zwei Zeichen für das Smiley mit. In der Zwischenzeit gibt es im Unicode 7 Standard über 2000 Symbole für Menschen, Gefühle, Tätigkeiten oder Flaggen. Diese werden in dieser Form nun als Emoji bezeichnet und lassen sich jeweils mit einem zwei Byte langem Unicode Zeichen darstellen.
Üblicherweise geschrieben als U+Code. Also U+23CF oder in HMTL ⏏. Dies stellt das Eject oder auch Auswurf Symbol dar.⏏
Wie kommt nun das Emoji in meinen Text? Die einfachste Möglichkeit, wenn auch beschränkt, stellt das Windows 10 Touch Keyboard dar, das im Tablet Modus automatisch aktiviert wird. Der Screenshot zeigt Notepad, das mit Fahrzeugen statt Text gefüllt wird.
_thumb.png "Screenshot (7)")
Wir erkennen, das die Darstellung durchaus abweichend sein kann. Dazu später mehr. Wer einen numerischen Tastaturblock nutzen kann, dem steht noch immer die Eingabe Methode [ALT] hold [+] Hex Code zur Verfügung.
Nutzer einer UWP App sehen die Emojis in einer Textbox, genauso und in Farbe, wie auf der Tastatur ersichtlich.
Symbole für was?
Mehr oder weniger sinnbehaftete Icons verfolgen den Benutzer seit Erfindung der der grafischen Benutzeroberfläche. Diese unterliegen genauso Modetrends wie vieles andere. Erst plump und pixelig, dann animiert, später mit viel Aufwand in 3D und plötzlich wieder flach und glanzlos. Zu Zeiten des Flat Designs mussten diese einfach, schlank und vor allem kontrastfähig sein. Wie eine Beschilderung in der U-Bahn auch als Metro bekannt und so nannte Microsoft kurzfristig seine Windows 8 Design Sprache folgerichtig METRO. Eine Reihe von Icons decken sich mit Emojis haben aber trotzdem eine völlig andere Zielrichtung. Die Windows 10 Icons sind noch immer schlank, aber nicht mehr einfarbig. Neu hinzu kommt ein Blauton um ein wenig der Tristesse zu entfliehen. Bei einem Hell Dunkel Kontrastwechsel, durch den Benutzer, funktionieren die Icons automatisch.
Sowohl Icons als auch Emojis basieren bei Microsoft auf True Type Schriftarten. Die Schrift Segoe UI MDL2 Assets für typische Windows Icons und Segoe UI Emoji für die bunten Bildchen. Allerdings ist mit dem Programm Zeichentabelle nur ein Teil der Wahrheit versteckt, weil die Emoji Schrift komplexer ist, als eine übliche TTF.
Es wäre nicht das Internet, wenn es nicht jemanden gibt, der dafür nicht eine Lösung hätte. Jeremy Burge verdient sein Geld damit, die Website Emojipedia.org zu betreiben. Dort lassen sich nicht nur alle Emojis nachschlagen, die definiert sind, sondern auch die Interpretation der verschiedenen Software Anbieter. Jüngster Shitstorm im Emoji Universum wurde ausgelöst durch den Google Hamburger. Abrufbar per https://emojipedia.org/hamburger/. Das Apple Emoji ist schon beinahe Fotorealistisch. Der große Fail beim Google Burger befindet sich der Käse völlig unrealistisch unten.
Der mir bis dato wenig bekannte Google CEO kündigt darauf hin drastische Maßnahmen an. Den Microsoft Burger erspare ich dem Leser an dieser Stelle. Der Käse ist zwar auf dem Patty, aber ansonsten eher unappetitlich dargestellt. Zum Redmonder Emoji Konzept aus der Fluent Design Sprache komme ich später noch.
Technische Umsetzung UWP und Icons
Icons und Emojis sind also in der Regel Schriften. Diese lassen sich sauber skalieren und rendern ohne Raster. Jedes Icon ist ein UTF-16 definiertes Unicode Zeichen. Im einfachsten Fall wird einfach der Text eines Steuerelements samt Font gesetzt und so das Smiley angezeigt. Dabei kann vom Entwickler definiert werden ob mit oder ohne Farbe. Aus einem Emoji dient damit auch ein Icon.
1: <TextBlock Text="☺"
2: IsColorFontEnabled="False"
3: FontFamily="Segoe UI Emoji"
4: FontSize="20"/>
5: <TextBlock Text="☺"
6: IsColorFontEnabled="True"
7: FontFamily="Segoe UI Emoji"
8: FontSize="20"/>
Die Codes kann man sich schlecht merken und deshalb bietet UWP eine Auflistung Symbol. Über diese Namen ala Accept oder Contact werden dann in Buttons, Appbar oder Listen passende Symbole aus der Schrift MDL2 Assets eingebunden. Es gibt eine Reihe von Steuerelementen die Zusatz Icon enthalten. Das einfachste ist ziemlich sicher das UI Element SymbolIcon. Intellisense schlägt dank Enum die Iconnamen vor.
1: <SymbolIcon Symbol="Emoji" />
2: <SymbolIcon Symbol="Emoji2" />
Diese Windows Icons sind optisch schlanker und leichter gestaltet, als die vorigen Emojis.
Recht ähnlich ist das Control Fonticon. Wesentliche Unterschiede zum Symbolicon: Keine Named Values per Enum, mehrere Zeichen im Attribut Glyph möglich, nur als Subelement eines anderen UI Elements. Folgender XAML Code definiert einen Button mit der Lupe, also einen Search Button.
1: <Button>
2: <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" FontSize="12"/>
3: </Button>
4:
Um der Frage vorzugreifen, das wäre in dem Fall auch per SymbolIcon möglich. Eine Reihe von Controls kennen das Icon Attribut und nutzen die Namen wie AppBarButton Icon="Accept".
Beide Segoe Schriftarten sind auf einem Windows 10 Computer installiert. Nichts desto trotz kann man diese oder jede andere Schrift auch mit dem Projekt bundeln. Einfach die TTF Datei in das Projekt einfügen und als Eigenschaft Content/Inhalt festlegen. Im nächsten Beispiel nutz das Glyphs Element diese Methode, rein aus akademischen Gründen. Das Steuerelement (Name Plural) kann mehrere Zeichen darstellen über die Eigenschaft Indices. Das erscheint schon mal eigenartig, vor allem da der Typ String ist. Auch in den offiziellen UWP Samples von Microsoft findet sich kein einziges Mal das Steuerelement in Benutzung. Die Dokumentation führt dazu aus, das es ein sehr schnelles und leichtgewichtiges Steuerelement ist. Jedenfalls scheint (so sicher bin ich mir noch nicht) es sich beim Attribut Indices um eine Semikolon getrennte Nummerische Liste zu handeln, die die Postition des Font Icons in der Schrift wiederspiegelt.
1: <Glyphs FontUri="Assets/seguiemj.ttf"
2: FontRenderingEmSize="30"
3: Indices="301"
4: Fill="Red"
5: ColorFontPaletteIndex="1"
6: IsColorFontEnabled="true"/>
Wir sehen einen Regenschirm in drei Farbvarianten, wobei nur der erste aus dem XAML Code stammt. Beim Schirm #2 wurde ColorFontPaletteIndex auf 0 gesetzt. Beim letzten das Attribut IsColorFontEnabled auf False.
Das alles geht nur, weil Segoe UI Emoji eine sogenannte Colored Font ist. Man findet auch häufiger Bezeichnungen wie Multicolored Font oder Chromatic Font. Das Emoji ist in diesem Fall dreifarbig. Die drei Einzelsymbole befinden sich in der Tat in der Schrift. Durch ändern des Attributs Indices="1931;1932;1933;1934;1935;1936;1937” tauchen diese im UI auf und werden Silver, weil die Eigenschaft Fill dies so anweist. Man kann Emojis auch kombinieren. Von Microsoft genannter Anwendungsfall dreht sich um die zahlreichen Personen, denen man mit einem Emoji Skin Tone eine andere Hautfarbe verpassen kann. Diese Definition von 5 Skintones aus Unicode 8 scheint aktuell nur von Microsoft unterstützt zu werden. Außerdem ist mir keine Methode das im XAML oder wenigstens komfortabel mit C# zu lösen.
Microsoft hat sich seit Windows 8 erkennbar wieder in Richtung bunter und 3D bewegt. Auch aber nicht nur in Bezug auf Emojis. Wer möchte, kann aber auch ältere Fonts ins Visual Studio Projekt einbinden und so einen Windows 8.1 Umbrella with Rain nutzen.
Bleibt nur die Frage, woher bekommt man den Wert (1931) für den Regenschirm um den Indicies Parameter im Glyphs zu füllen. Die Antwort ist: keine Ahnung. Je nach verwendeter Version der Seguiemj.ttf ist Umbrella mit Rain woanders. Bei Windows 8.1 ist es 301 und aufwärts. Mein Testcase war einfach eine Liste, die ein Glyphs Control an Integerwerte gebunden hat, um alle möglichen und vorhandenen Emojis anzuzeigen. Das geht aktuell bis ca 11.000.
Ich brauche mehr Icons
Eingangs kam der bescheidene Microsoft Hamburger zur Sprache. Um eine wiedererkennbare Identität zu erzielen benötigt man ein paar UI Emoji Guidelines. Microsofts Designer bauen auf einer Matrix auf die mit Kreisen und Strichen einer gewissen Dicke gefüllt werden. Dazu kommt eine definierte Farbpalette.
Mahlzeit und dazu noch ein 
. Wobei da nähert sich schon der nächste Shitstorm. Die Gläser von Google sind nur Halbvoll.