Unicode Characters als Bulletpoints – benutzt ihr noch Grafiken?
Unicode – uralte Relikte und trotzdem aktuell. Ich bin immer noch ein großer Fan von Unicode. Neben Schriftzeichen und Umlauten beinhaltet Unicode viele Characters, die so manches Icon ersetzen können. Da gibt es Stars, Bullets, Squares, Triangles und so weiter. Diese Icons eignen sich nicht nur für UI-Elemente, sondern auch für Listenpunkte. Hier ein praktisches Beispiel für Unicode-Listenpunkte mit SASS.
Der Vorteil des Gebrauchs von Unicode Characters liegt auf der Hand. Man kann sie einfärben, ihnen einen Schlagschatten verleihen, sie ohne Qualitätsverlust skalieren und sie ersparen einen Request an den Server. Also erst mal einen Blick in die Unicode-Tabelle werfen, bevor eine Grafik angelegt wird? Ja, auf jeden Fall. Allerdings sollte später immer auf verschiedenen Endgeräten getestet werden, ob das Unicode auch immer so dargestellt wird, wie es geplant war. Denn einige Devices rendern das Zeichen einen Hauch unterschiedlich und haben manchmal Probleme mit der Darstellung und Positionierung.
Unicode Tabellen
Doch wie kommt der Frontendler an die Unicodes? Tabellen für Unicode Characters gibt es unzählige. Eine sehr gute, weil sie eine sehr gute Suchfunktion hat, gibt es unter unicode-table.com. Der erste Eindruck der Seite mag etwas unübersichtlich erscheinen, aber die Suche nach Begriffen wie Squares oder Stars zeigt die Vorteile dieser Zeichentabelle.
Unicode-Zeichen-Tabelle
Das SASS Mixin für Bulletpoints
Das Mixin, welches ich in vielen Projekten einsetze ist simpel und überschaubar. Es hat eher exemplarischen Charakter und steht für die vielen Einsatzmöglichkeiten von Unicode. Zu beachten gibt es lediglich die Art der Implementierung. Statt z. B. den Unicode U+25A0 für eine Quadrat (wie im Beispiel unten) zu verwenden muss es mit dem Reverse Solidus – dem Backslash – also \25A0 escaped werden.
Bulletpoints sind nur ein Aspekt für den Einsatz von Unicode. Im Zeitalter der Mobile-Devices und Performance-Optimierung sollten Unicode-Characters mehr Beachtung finden.