Unicode Characters als Listenpunkte? Thierry Koblentz zeigt wie es geht

von Henry Zeitler

Irgendwie habe ich darauf (zu) lange gewartet. Sollte mal ein anderes Zeichen als Listenpunkt verwendet werden als die übliche Palette zu bieten hat, musste ich immer auf eine Grafik zurück greifen. Neulich (um genau zu sein am 19. März 2011) rückte Thierry in einem Smashing Magazine Post mit einer Lösung raus. Ich habe es jetzt schon ein paar mal eingesetzt und muss sagen…

Aber schauen wir uns zuerst einmal einen Beispielcode an. Der ist ziemlich überschaubar, leicht anzupassen und erzeugt einen roten Stern.


ul {
		list-style: none;
		margin-left: -5px;
		padding: 0 0 0 20px;
		}
ul li:before, ul b  {
		display: inline-block;
		width: 1.5em;
		font-size: 1em;
		text-align: center;
		color: #98151A;
		margin: 0 0 0 -20px;
		}
ul li {
		background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = ''+this.innerHTML);
		line-height: 1.7;
		}
ul li:before {
		content: "\2605";
		line-height: 1.7;
		}

Dem ul wird zunächst ein padding-left von 20 Pixel gegeben. Das sorgt zusammen mit dem negativen margin im ul li:before, ul b dafür, dass mehrzeiliger Listentext eingerückt wird. Über ul li:before, ul b wird auch vor jedem Listenpunkt ein Inline-Block-Element erschafft, welches dann mit einem Entity als Hintergrundbild für den IE (er versteht den :before-Pseudoselektor nicht) bzw. weiter unten dem Hexadezimalcode für normale Browser (content: "\2605";) gefüllt wird. Dort wird auch die Farbe des Listenpunktes definiert. Erwähnenswert ist natürlich noch expression(), eine CSS-Expression. CSS-Expressions können Interpretationsfehler im IE ausgleichen.

Jetzt fehlen nur noch die Unicode Characters bzw. Entities. Für eine umfassende Auswahl verweist Thierry auf diese Tabelle.

Fazit

Also, ich muss sagen, dass diese Lösung echt gefällt. Ich habe sie in relevanten Browsern getestet und bis auf Größenunterschiede funzt es (siehe Sidebar). Damit können endlich auch der gewöhnliche Spiegelstrich und farbige Bulletpoints leicht erstellt werden… Danke Thierry!

comments powered by Disqus