[HTML/CSS] Emoji Unicode mit font darstellen

Zuyas · 18 Sep. 2014

Hallo,
ich arbeite an einem kleinen Chat und würde dort gerne wie bei Whatsapp oder Facebook die typischen Smileys benutzen.

Facebook wandelt die Unicodes (z.B. "😂") in Bilder um.
Ich frage mich aber ob dies nicht auch besser zu lösen ist, nämlich mit einer Schriftart, die diese Unicodes als Smileys anzeigt.
Der Vorteil läge ganz einfach darin, dass man diese dann auch Problemlos kopieren könnte.

Leider kenne ich mich nicht so gut mit Schriftarten aus..
Aber verwende ich z.B. "😂" auf meiner Website und besuche diese mit meinem Computer, so sehe ich ein weißes Kästchen.
Besuche ich die Seite aber mit meinem Smartphone, so sehe ich den richtigen Smiley.
Warum kann mein Handy das aber der PC nicht? Verwendet das Handy dafür eine eigene Schriftart? Lässt sich das nicht auch für den PC umsetzen?

lg Zuyas

epiphora · 19 Sep. 2014

Damit hab ich auch noch keine Erfahrung gesammelt, obwohl ich das für ein sehr spannendes Thema halte. Ich hab zwar bei meiner kurzen Recherche im Internet gesehen, dass es durchaus Fonts gibt, die derartige Smileys beinhalten, allerdings auch keine farbigen/dreidimensionalen Emoji wie in Facebook oder Whatsapp, sondern als normale Zeichen:

Eine derartige Schriftart würde ich also höchstens im Eingabe-Feld verwenden und die Zeichen im Chatlog hinterher durch Bilder (oder um die Kopierbarkeit der Emoji zu erhalten durch Hintergrundbilder) ersetzen. Du könntest die Emoji zum Beispiel durch einen regulären Ausdruck erfassen und durch spans ersetzen, die zwar wiederum den jeweiligen Emoji als Zeichen beinhalten, sich aber mithilfe von CSS besser stylen lassen.

Nachtrag:

Hab gerade ein fertiges Script gefunden: https://gist.github.com/mwunsch/4710561

Das scheint auch gut zu funktionieren. Wenn es geladen wird, nachdem die Text-Nodes existieren, ersetzt es alle Bilder automatisch durch Bilder, die bei github gehostet sind. Derzeit wird aber noch kein Copypasten ermöglicht, weil die Bilder kein alt-Attribut mit dem Zeichen haben. Du könntest also entweder das nachrüsten oder - wie ich oben vorgeschlagen habe - spans mit Hintergrundbildern benutzen. Dafür müsstest Du den Aufruf der Funktion [kw]getImageForCodepoint(hex)[/kw] lediglich durch eine eigene Funktion ersetzen und ein Stylesheet anlegen, das für jeden Emoji ein passendes Bild enthält. An dieser Stelle würden sich vermutlich CSS-Sprites anbieten.

epiphora · 8 Nov. 2014

Twitter hat vorgestern seine Emoji als Open-Source veröffentlicht: Siehe Twitter-Blog und github. Damit sollte man erst mal bedient sein.

theSplit · 9 Nov. 2014

Ich vermute der Grund warum es bei deinem Smartphone als Smiley direkt dargestellt wird, liegt nicht an einem Font, sondern an einem Parser der diese Textfragmente, wenn Sie im Text auftauchen, mit den Smileys, als Code bzw. Referenz zum Bild auf deinem Telefon, ersetzt.

Wenn ich mich richtig erinnere, spricht man in Fonts von sogenannten Codepoints, also Werte, die ein Zeichen allein (und keine Folge von Zeichen) darstellt.
Zum Beispiel Ascii-Codes, jedes Zeichen hat hierbei einen Wert von 0 bis 255, das schließt aber auch andere Kontrollzeichen ein.

Ein Beispiel schnell hier gefunden:
http://www.chip.de/news/ASCII-Code-Tabelle-Alle-Sonderzeichen_51205777.html

Jeder Code entspricht dabei einem Zeichen, in Javascript ist das auch der "CharCode" oder auch "KeyCode" bei Tastenbelegungen. Eine Zeichenfolge von "#ö-a," ist zwar für Menschen lesbar, aber im Grunde sind das auch einzelne Folgen dieser Codes.

Ob man den Faden weiter spinnen kann für bestimmte Codes ein "Ersatzsymbol" (mehr ist es bei einer Schrift eigentlich nicht) wählen kann, weiß ich allerdings nicht.

accC · 9 Nov. 2014

Zuyas schrieb:
Hallo,
ich arbeite an einem kleinen Chat und würde dort gerne wie bei Whatsapp oder Facebook die typischen Smileys benutzen.
...
Facebook wandelt die Unicodes (z.B. "😂") in Bilder um.
Ich frage mich aber ob dies nicht auch besser zu lösen ist, nämlich mit einer Schriftart, die diese Unicodes als Smileys anzeigt.

Was genau ist daran besser?

Soweit ich das richtig weiß, werden bei unterschiedlichen Programmen (Facebook, Whatsapp, Google+/Youtube, Twitter) jeweils Plattformeigene Smilies eingebunden.
Über die Schriftart würde ich das nicht machen wollen. Das dürfte nicht selten zu Problemen führen, insbesondere dann, wenn verschiedene Schriftarten unterschiedliche Smilies nutzen. Du willst ja sicher nicht, dass eine Schriftart

darstellt und eine andere

für gleiche Zeichen.

Der Vorteil läge ganz einfach darin, dass man diese dann auch Problemlos kopieren könnte.

Jein. Eigentlich ist es bei Bildern einfacher. Wenn du diese kopierst, kopierst du das Bild oder den Pfad dorthin.
Wenn du ein Schriftsymbol kopierst, dann muss das nicht zwangsweise in einer anderen Schriftart zur Verfügung stehen. Insbesondere wenn der Zeichensatz das gar nicht her gibt. Mit ÄÖÜ und ß bekommst du bereits Probleme, witzig wird es auch, wenn du chinesische Zeichen darstellen willst. Willst du das Problem unbedingt mit Smilies auf die nächste Ebene heben?

Übrigens kann ich das Unicode-Konsortium nicht mehr ernst nehmen, seit ich gehört habe, dass sie die momentanen Emoticons für politisch inkorrekt halten, weil Geschlechter, Hautfarben usw. nicht berücksichtigt werden.

Sorry, aber es sind gottverdammte Smilies. Die haben kein Geschlecht, keine Nationalität und kein Alter.
Um die Debatte ins Lächerliche zu ziehen, bestehe ich auf wirklicher politischer Korrektheit:
- Frauen
- Männer
- Farbige ("weiß", "gelb", "braun", "schwarz", "grau", "blau", "lila", "grün", "rot", "orange", eben dem gesamten Farbspektrum)
- Altersstufen: Ungeborene, Babys, Kinder, Jugendliche, junge Erwachsene, Erwachsene, alte Menschen, verweste Menschen
- Geschlechter: männlich, weiblich, transgender, ungeschlechtliche, bigeschlechtliche
- Behinderte: besondere körperliche Ausprägungen: Menschen mit 0, 1, 3 oder mehr Gliedmaßen, Sinnesorganen, etc. Siamesische Zwillinge
- Körperbehaarung: mit Bärten, ohne Bärte, Haare auf dem Kopf, unter den Achseln, auf dem Rücken, auf den Armen, auf den Beinen, auf der Brust, in allen Variationen
- Gewichtsvielfalt: Magersüchtige, Untergewichtige, Normalgewichtige, Adipositas
- Glaubensrichtungen: ALLE
- Ernährungsabhängigkeiten: Fleischfresser, Vegetarier, Veganer, Frutarier, Photosynthese, etc
- ....
Wenn schon, dann sollte bitte alle Gruppierungen berücksichtigt werden!

Abgesehen davon finde ich Smilies äußerst unnötig. Klar, hier verwende ich die auch. Allerdings nicht, weil ich eine besondere Notwendigkeit in ihrer Verwendung sehe, sondern wegen der bloßen Möglichkeit. Ungefähr so wie die Möglichkeit Bilder in Beiträge einzubinden in der Kneipe zu einem Bier in jedem zweiten Beitrag führt, ohne dass das eine Relevanz für nunja Off-Topic hätte.

Warum kann mein Handy das aber der PC nicht? Verwendet das Handy dafür eine eigene Schriftart? Lässt sich das nicht auch für den PC umsetzen?

Ließe sich auch für den PC umsetzen, wie gesagt willst du das allerdings nicht.

[HTML/CSS] Emoji Unicode mit font darstellen

Zuyas

Mau

epiphora

aus Plastik

epiphora

aus Plastik

theSplit

1998

accC

gesperrt