CSS-Emoticons

Mich hat schon immer gestört, dass die von WordPress in Bilder umgewandelten Emoticons wie alle Bilder nicht wirklich gut mit dem Fließtext harmonieren. Dort werden sie schließlich am häufigsten eingesetzt. Aber ich wollte auch nicht auf die Icons verzichten, weil sie mehr auffallen als die einfachen Schriftzeichen und halt auch hübscher aussehen.

Jetzt habe ich eine Lösung dafür gefunden: Pure-CSS Emoticons, fügt der Zeichenkette ein span-Tag mit CSS3-Styling hinzu. Das Originalzeichen bleibt bestehen, es wird lediglich ein Schriftschnitt, Textfarbe und Hintergrund gesetzt. Das Plugin enthält bereits einen recht großen Vorrat an Emoticons. Per jQuery ausgelesen werden sie mit dem assozierten Style versehen – standardmäßig gibt es Zeichen mit Hintergrund gelb :-) rosa <3 oder pink >:). Vermutlich lassen sich in der JS-Datei auch eigene Zeichen ergänzen, habe ich aber bisher nicht ausprobiert.

Wozu das gut sein soll?

  1. Die CSS-Emoticons skalieren perfekt mit der gewählten Schriftgröße. Ist klar, denn es sind ja normale Schriftzeichen.
  2. Ein alt-Tag ist nicht nötig, das Zeichen kann ja direkt gelesen werden.
  3. Beim Kopieren von Textpassagen mit Emoticons bleibt das Zeichen erhalten, während ein img-Tag meist ignoriert wird.

Im besten Fall (Webkit- und Mozilla-Browser) sieht man das Icon wie gewohnt. Der Internet Explorer hat erwartungsgemäß Probleme mit der Darstellung. Dafür gibt es ein Fallback. Webkit-Browser können sogar den Rotation-Style anzeigen, den man bei den Einstellungen im Backend auswählen kann.

Fazit: Finde ich Klasse und denke, so ist die Emoticon-Darstellung sogar barrierearm.

Die Kommentare sind geschlossen.