Verwendung von Zeichen-Escapes in Markup und CSS

Intended audience: HTML/XML/CSS-Autoren (die Web-Editoren/Texteditoren oder Scripte benutzen), Script-Entwickler (PHP, JSP u.a.) und alle, die Rat suchen, wie und wann Alternativen zu den Zeichen in einem Dokument zu verwenden sind.

Question

Wie verwendet man Zeichen-Escapes (Maskierungen) in Markup und CSS, wann sollte man sie verwenden und wann nicht?

Answer

Welche Arten von Zeichen-Escapes können im Markup verwendet werden?

Jedes Unicode-Zeichen lässt sich in XML, XHTML oder XML durch ein Zeichen-Escape darstellen (maskieren); in diesem kommen dann ausschließlich ASCII-Zeichen vor.

Nummerische Zeichenreferenzen (numeric character references, NCRs) und benannte Zeichenreferenzen (named character references) sind Arten von Zeichen-Escapes, die im Markup verwendet werden können. Das geschützte Leerzeichen (U+00A0 NO-BREAK SPACE) bspw. lässt sich folgendermaßen repräsentieren:

(Das geschützte Leerzeichen sieht wie ein normales Leerzeichen aus, verhindert aber einen Zeilenumbruch zwischen den Zeichen links und rechts davon. Es findet u.a. in der französischen Zeichensetzung Verwendung, wo vor Satzzeichen wie Doppelpunkten und Ausrufezeichen ein Leerzeichen steht, die Satzzeichen aber nicht am Anfang einer neuen Zeile stehen sollen.)

 
Eine hexadezimale nummerische Zeichenreferenz. Alle nummerischen Zeichenreferenzen beginnen mit &# und enden mit ;. Das x zeigt an, dass das Nachfolgende eine Hexadezimalzahl ist, die den Zeichencode eines Unicode-Zeichens angibt. Die Angabe ist nicht case-sensitiv (d.h. Groß-/Kleinschreibung spielt keine Rolle).
<p>Vive la France&#xA0;!</p>
&#160;
Eine dezimale nummerische Zeichenreferenz. Hier wird eine Dezimalzahl benutzt, um denselben Zeichencode anzugeben.
<p>Vive la France&#160;!</p>
&nbsp;
Eine benannte Zeichenreferenz. Dies ist eine völlig andere Art von Escape. Benannte Zeichenreferenzen werden durch die Auszeichnungssprache definiert. Das bedeutet bspw., dass in HTML nur bestimmte Zeichen (welche durch die HTML-Spezifikation definiert sind) als benannte Zeichenreferenzen repräsentiert werden können (und dies sind nur sehr wenige Zeichen aus dem Unicode-Bereich). Zu beachten ist, dass die Bezeichner case-sensitiv sind: in HTML repräsentiert &Aacute; den Großbuchstaben Á, &aacute; hingegen den Kleinbuchstaben á.
<p>Vive la France&nbsp;!</p>

Ein wichtiger Punkt ist, dass die Werte von nummerischen Zeichenreferenzen (wie &#x20AC; oder &#8364; für das Euro-Zeichen ) als Zeichencode von Unicode-Zeichen interpretiert werden – unabhängig von der Zeichencodierung des Dokuments. Es ist ein häufiger Fehler, in Windows-1252-codierten Texten das Euro-Zeichen als &#x80; notieren. Zwar liegt das Euro-Zeichen in der Windows-1252-Codepage auf Position 80 (hexadezimal); aber &#x80; sollte ein Steuerzeichen ergeben, denn das Escape wird aufgelöst zu dem Zeichen auf Position 80 (hexadezimal) im Unicode-Repertoire. (Allerdings korrigieren manche Browser diesen Fehler stillschweigend. Siehe diese Testseiten.)

CSS-Escapes

In CSS werden Zeichen-Escapes anders gebildet. Sie beginnen mit einem Backslash \ gefolgt von der Hexadezimalzahl, die den Zeichencode des Zeichens in Unicode angibt.

Wenn danach ein Zeichen folgt, das nicht in den Bereichen A–F, a–f oder 0–9 liegt, ist das alles, was nötig ist. Das folgende Beispiel repräsentiert das Wort émotion:

.\E9motion { ... }

Wenn hingegen das nachfolgende Zeichen eines ist, das als Hexadezimalziffer dienen kann, wäre nicht klar, wo die Hexadezimalzahl endet. In diesen Fällen gibt es zwei Möglichkeiten. Die eine ist, ein Leerzeichen nach dem Zeichen-Escape zu setzen. Dieses Leerzeichen ist Teil der Escape-Syntax und bleibt nicht erhalten, nachdem das Escape geparst wurde. Das folgende Beispiel zeigt, wie das Wort édition repräsentiert werden kann:

.\E9 dition { ... }

Alternativ lann man eine 6-stellige Hexadezimalzahl verwenden, mit oder ohne Leerzeichen danach. Dies ist eine andere Möglichkeit, édition zu repräsentieren:

.\0000E9dition { ... }

Da ein jedes Whitespace-Zeichen hinter der Hexadezimalzahl zum Escape dazugehört, muss man, wenn hinter dem escapeten Zeichen wirklich ein Leerzeichen erscheinen soll, hinter der Hexadezimalzahl (beliebiger Länge) zwei Leerzeichen setzen.

Ein Backslash kann in CSS auch vor einem Syntax-Zeichen verwendet werden, damit dieses nicht als Teil des Codes angesehen wird. Für weitere Informationen über CSS-Escapes siehe CSS Syntax Module.

Wann keine Escapes zu verwenden sind

Es ist fast immer besser, eine Zeichencodierung zu benutzen, die es erlaubt, die Zeichen in ihrer normalen Form zu verwenden, anstatt benannte Zeichenreferenzen oder nummerische Zeichenreferenzen zu verwenden.

Die Verwendung von Escapes macht den Quelltext schlechter lesbar und schwerer zu pflegen und kann auch die Dateigröße beträchtlich erhöhen.

Viele englischsprachige Entwickler gehen davon aus, dass andere Sprachen nur gelegentlich Nicht-ASCII-Zeichen verwenden, aber dem ist nicht so.

Nehmen wir als Beispiel folgende Passage auf Tschechisch:

Jako efektivnější se nám jeví pořádání tzv. Road Show prostřednictvím našich autorizovaných dealerů v Čechách a na Moravě, které proběhnou v průběhu září a října.

Wenn für alle Nicht-ASCII-Zeichen nummerische Zeichenreferenzen verwendet werden, wird die Passage unlesbar, schwierig zu pflegen und deutlich länger. Es wäre natürlich noch schlimmer bei einer Sprache, die überhaupt keine lateinischen Buchstaben verwendet.

Jako efektivn&#x115;j&#x161;&#xED; se n&#xE1;m jev&#xED; po&#x159;&#xE1;d&#xE1;n&#xED; tzv. Road Show prost&#x159;ednictv&#xED;m na&#x161;ich autorizovan&#xFD;ch dealer&#x16F; v &#x10C;ech&#xE1;ch a na Morav&#x11B;, kter&#xE9; prob&#x11B;hnou v pr&#x16F;b&#x11B;hu z&#xE1;&#x159;&#xED; a &#x159;&#xED;jna.

Wie bereits gesagt, besser die richtigen Zeichen für normalen Text verwenden, keine Escapes.

Verwendung in XHTML: Die Verwendung von benannten Zeichenreferenzen in Dokumenten, die als XML verarbeitet werden, wird problematisch, wenn die Entities extern (nicht im Dokument selbst) definiert werden und die XML-Prozessoren die externen Dateien nicht lesen. Dann werden die Entity-Referenzen nicht durch die entsprechenden Zeichen ersetzt. Wenn wirklich Escapes benötigt werden, ist es deshalb sicherer, nummerische Referenzen zu verwenden oder die benötigten Entities im Dokument selbst zu definieren.

Wenn in HTML-definierte benannte Zeichenreferenzen (wie &aacute;) verwendet werden, um Zeichen in XHTML zu repräsentieren, ist Vorsicht geboten, wenn der Inhalt von XML-Werkzeugen verarbeitet wird.

Wann Escapes zu verwenden sind

Syntax-Sonderzeichen: Es gibt 3 Zeichen, die im Inhalt immer als Escapes auftreten sollten, damit sie nicht die Syntax der Auszeichnungssprache beeinflussen. Diese sind Sprachbestandteile von XML bzw. HTML:

Auch sollte das doppelte Anführungszeichen (") durch &quot; und das einfache Anführungszeichen (') durch &apos; repräsentiert werden – besonders in Attributwerten, wenn dasselbe Anführungszeichen, das den Attributwert umgibt, auch in diesem vorkommt.

Unsichtbare oder nicht unterscheidbare Zeichen: Eine besonders nützliche Rolle spielen Escapes für die Repräsentation von Zeichen, die in der Darstellung nicht sichtbar oder nicht unterscheidbar sind.

Ein Beispiel dafür wäre das Unicode-Zeichen U+200F RIGHT-TO-LEFT MARK. Dieses Zeichen kann verwendet werden, um die Schreibrichtung in bidirektionalem Text anzugeben (wenn auch arabische oder hebräische Schrift vorkommt). Es wird nicht grafisch dargestellt, wodurch schwierig zu erkennen ist, wo solche Zeichen im Text vorhanden sind; und wenn sie fehlen oder verloren gehen, kann das zu unerwarteten Ergebnissen bei der späteren Bearbeitung des Textes führen. Bei der Verwendung von &rlm; (oder der entsprechenden nummerischen Zeichenreferenz &#x200F;) hingegen ist es leicht, diese Zeichen zu erkennen.

Ein Beispiel für ein nicht unterscheidbares Zeichen ist das geschützte Leerzeichen U+00A0 NO-BREAK SPACE. Dieses verhindert einen Zeilenumbruch, sieht aber genauso aus wie ein normales Leerzeichen. Die Verwendung von &nbsp; (oder &#xA0;) macht klar ersichtlich, wo solche geschützten Leerzeichen im Text vorkommen.

Probleme bei der Eingabe: Wenn es der Web-Editor bzw. Texteditor nicht ermöglicht, benötigte Zeichen auf einfache Weise einzugeben, kann man auch auf Escapes ausweichen. Dies stellt jedoch keine Langzeitlösung dar und ist auch umständlich, wenn viele Zeichen auf diese Art eingegeben werden müssen – es braucht mehr Zeit und macht die Pflege schwieriger. Besser ist die Verwendung eines Editors, der die Eingabe dieser Zeichen als Zeichen ermöglicht. Wenn nur gelegentlich ein solches Zeichen benötigt wird, kann als Alternative auch eine Zeichentabelle oder ein Zeichenwähler benutzt werden.

Lücken der Zeichencodierung: Escapes können nützlich sein, um Zeichen zu repräsentieren, die von der für das Dokument gewählten Zeichencodierung nicht unterstützt werden, z.B. um chinesische Zeichen in einem Windows-1252-codierten Dokument zu repräsentieren. Man sollte sich zunächst aber fragen, warum man nicht die Zeichencodierung zu UTF-8 ändert, was alle im Dokument vorkommenden Zeichen abdeckt.

Verwendung von Escapes in style-Attributen

Beachten Sie: Am besten wählt man UTF-8 als Zeichencodierung für das Stylesheet, damit man in CSS-Angaben die richtigen Zeichen verwenden kann. Dieser Abschnitt behandelt, was ein seltener Ausnahmefall sein sollte, wenn Escapes verwendet werden sollen.

Es ist generell angebracht, Darstellungsinformationen in einem externen Stylesheet oder in einem style-Element im Kopf einer HTML-Datei anzugeben. Ausnahmsweise oder vielleicht nur kurzzeitig kann stattdessen ein style-Attribut für ein bestimmtes Element verwendet werden. In ganz seltenen Fällen sollen vielleicht ein oder mehrere Zeichen in dem style-Attribut durch Zeichen-Escapes maskiert werden.

In einem style-Attribut können in HTML Zeichen durch nummerische oder benannte Zeichenreferenzen oder CSS-Escapes repräsentiert werden. In einem style-Element hingegen können weder nummerische noch benannte Zeichenreferenzen vorkommen, und dasselbe gilt für ein externes Stylesheet.

Weil die Tendenz dahin geht, in Attributen angegebene Stile ins style-Element oder ein externes Stylesheet zu verschieben (dies kann auch automatisch durch eine Applikation oder ein Script geschehen), ist es am sichersten, ausschließlich CSS-Escapes zu verwenden.

Es ist bspw. besser,

<span style="font-family: L\FC beck">...</span>

zu schreiben, und nicht

<span style="font-family: L&#xFC;beck">...</span>

By the way

Der Wechsel zu UTF-8 bedeutet erneutes Speichern der Datei: Bei Verwendung der Zeichencodierung UTF-8 kann auf die meisten Escapes verzichtet werden und einfach mit den Zeichen selbst gearbeitet werden. Um die Zeichencodierung eines Dokuments zu ändern, genügt es nicht, nur die Angabe der Zeichencodierung am Anfang der Seite oder auf dem Server zu ändern. Man muss das Dokument erneut speichern – in eben dieser Zeichencodierung. Für weitere Information, wie das in einem Anwendungsprogramm zu tun ist, siehe Einstellung der Zeichencodierung in Web-Editoren und Texteditoren.

Hexadezimal oder dezimal: Im Unicode-Standard werden die Zeichencodes hexadezimal angegeben, der Code des Zeichens á bspw. als U+00E1. Wegen dieser Konvention ist es ratsam, aber nicht zwingend, dass bei nummerischen Zeichenreferenzen die Werte hexadezimal notiert werden, nicht dezimal. Führende Nullen sind nicht erforderlich, d.h. á kann auch durch &#xE1; repräsentiert werden.

Ergänzende Zeichen (supplementary characters): Das sind die Unicode-Zeichen mit Zeichencodes jenseits derer der Zeichen der Basic Multilingual Plane (BMP). In UTF-16 wird ein solches Zeichen durch zwei 16-Bit-Ersatz-Zeichencodes (surrogate code points) aus der BMP codiert. Deshalb denken manche, dass diese Zeichen durch zwei Escapes repräsentiert werden, aber das ist falsch – es muss der einzelne Zeichencode angegeben werden; also bspw. &#x233B4; anstatt &#xD84C;&#xDFB4;.

&-Zeichen: Obwohl HTML-Nutzerprogramme großzügig darüber hinwegsehen, sollte niemals ein &-Zeichen (Kaufmanns-Und) für sich allein im Text stehen. Besondere Beachtung gilt URIs, die Parameter enthalten. So sollte bspw. http://example.org/my-script.php?class=guest&amp;name=user im Quelltext stehen, nicht http://example.org/my-script.php?class=guest&name=user.