decocode decocode deco    

Zeichensätze und Sonderzeichen #

An dieser Stelle möchte ich einen Einschub machen, da die Verwendung von Sonderzeichen besonderer Aufmerksamkeit – insbesondere bezüglich der Zeichenkodierung – bedarf.

Abgesehen von bestimmten Sonderzeichen, auf die im weiteren Verlauf dieser Seite noch eingegangen wird, müssen unabhängig von der Angabe einer Zeichenkodierung folgende geschützte Zeichen immer maskiert werden, wenn diese im HTML-Quelltext keine syntaktische Bedeutung haben sollen:

• Kleiner-als-Zeichen < wird zu &lt;
• Größer-als-Zeichen > wird zu &gt;

Statt <div>12 < 20</div> schreiben wir also <div>12 &lt; 20</div>.

Innerhalb von Anführungszeichen, z. B. bei Werten von Attributen, müssen folgende Zeichen ebenfalls maskiert werden:

• Ampersand & wird zu &amp;
• einfaches Anführungszeichen ' wird zu &#39;
• doppeltes Anführungszeichen " wird zu &#34; bzw. &quot;

Sicherlich werden wir auch andere Sonderzeichen für unsere Website verwenden wollen, mindestens ja die deutschen Umlaute Ä, Ö, Ü und das ß. Zwar kann man diese Zeichen in den Quelltext tippen, aber je nach dem, in welcher Zeichenkodierung unsere Quelltextdatei gespeichert wurde und welche Zeichenkodierung für Webseiten im Browser voreingestellt ist, können diese Zeichen unterschiedlich dargestellt werden. Wenn uns in E-Mails oder beim Surfen im Internet solche seltsam korrumpierten Texte begegnen (Beispiel: ›Sch�ne Gr��e‹ oder ›Schöne Grüße‹ statt ›Schöne Grüße‹), dann liegt das meist an einer falschen oder vergessenen Angabe der Zeichenkodierung.

Um diesem Problem vorzubeugen, ist die Angabe der Zeichenkodierung des Dokuments erforderlich, die die verwendeten Zeichen unterstützt (mehr dazu unter Dokumenteigenschaften). Dabei muss aber auch beachtet werden, ein Dokument, das man mit einem Texteditor erstellt hat, dort auch in genau der angegebenen Zeichenkodierung abzuspeichern, bevor man es auf den Server hochlädt.

Die universellste Kodierung ist UTF-8. Mit dieser Kodierung können so ziemlich alle Zeichen der Welt direkt im Editor eingegeben und im Browser korrekt angezeigt werden. Sollte der verwendete Editor diese Kodierung aber nicht unterstützen oder es zu sonstigen Problemen damit kommen, kann man auf die Kodierung ISO 8859-15 ausweichen. In diesem Fall sind die Sonderzeichen, die nicht in diesem Zeichensatz enthalten sind, mittels Entitäten zu maskieren.

Die Beispiele in diesem Tutorial sind für die Zeichenkodierung UTF-8 geschrieben, daher müssen Sonderzeichen nicht maskiert werden. Diese Zeichenkodierung muss im verwendeten Texteditor eingestelllt werden.

Der ASCII Zeichensatz #

Der ›kleinste gemeinsame Nenner‹ eines Standards, der mit größter Sicherheit von allen gängigen Rechnersystemen unterstützt wird, ist der ASCII-Zeichensatz. Dieser Zeichensatz umfasst allerdings nur folgende 95 Zeichen (hier als Teilmenge von ISO-8859-1: Bereich 0x20 bis 0x7F):

0 1 2 3 4 5 6 7 8 9 A B C D E F Nicht druckbare Zeichen:
0x20: normales Leerzeichen
2… ! " # $ % & ' ( ) * + , - . /
3… 0 1 2 3 4 5 6 7 8 9 : ; < = > ?
4… @ A B C D E F G H I J K L M N O
5… P Q R S T U V W X Y Z [ \ ] ^ _
6… ` a b c d e f g h i j k l m n o
7… p q r s t u v w x y z { | } ~

Diese Zeichen können so wie sie sind auch ohne die Angabe einer speziellen Zeichenkodierung im Quelltext verwendet werden.

Der ISO-8859-1 Zeichensatz #

Diese Tabelle gibt einen Überblick über die Zeichen des Zeichensatzes ISO-8859-1, der die Basis der (neben Unicode) verbreitetsten Zeichenkodierung darstellt:

0 1 2 3 4 5 6 7 8 9 A B C D E F Nicht druckbare Zeichen:
0x20: normales Leerzeichen
0xA0: geschütztes Leerzeichen
0xAD: bedingter Bindestrich (Softhyphen)
0…
1…
2… ! " # $ % & ' ( ) * + , - . /
3… 0 1 2 3 4 5 6 7 8 9 : ; < = > ?
4… @ A B C D E F G H I J K L M N O
5… P Q R S T U V W X Y Z [ \ ] ^ _
6… ` a b c d e f g h i j k l m n o
7… p q r s t u v w x y z { | } ~
8…
9…
A…   ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ­ ® ¯
B… ° ± ² ³ ´ µ · ¸ ¹ º » ¼ ½ ¾ ¿
C… À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï
D… Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß
E… à á â ã ä å æ ç è é ê ë ì í î ï
F… ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ

Zeichen, die nicht in diesem Zeichensatz enthalten sind, müssen maskiert werden. Soll diese Zeichenkodierung verwendet werde, so lauten die Meta-Angaben im HTML-Quelltext:

Quelltext auswählen
1
2
    <meta charset='ISO-8859-1'>
    <meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>

HTML-Entitäten #

Viele Sonderzeichen können wenn nötig mittels ihrer so genannten HTML-Entitäten in den Quelltext geschrieben werden. Hierbei besitzt jedes Sonderzeichen ein Kürzel, durch das es dargestellt werden kann. Hier eine Auswahl der wichtigsten:

ä&auml; »&raquo; &mdash; &euro;
ö&ouml; «&laquo; &ndash; ©&copy;
ü&uuml; &rsaquo; ·&middot; ×&times;
Ä&Auml; &lsaquo; &bull; <&lt;
Ö&Ouml; &bdquo; "&quot; >&gt;
Ü&Uuml; &ldquo; '&#39; &rarr;
ß&szlig; &rsquo; &&amp; °&deg;

Wenn wir solche Zeichen in unserem Skript verwenden wollen, dann werden die gewünschten Zeichen einfach durch ihre Entität ersetzt:

Quelltext auswählen
1
&bdquo;Sch&ouml;ne Gr&uuml;&szlig;e!&ldquo;

Weitere Entitäten findet man bei SelfHTML. Auf diese Weise lassen sich allerdings nicht alle existierenden Zeichen darstellen, sondern nur jene, für die auch Entitäten definiert wurden.

Unicode-Entitäten #

Das Unicode-System bietet darüber hinaus die Möglichkeit, auch alle übrigen Zeichen darzustellen, für die keine HTML-Entitäten existieren. Unicode-Entitäten werden entweder in dezimaler oder hexadezimaler Schreibweise notiert, wobei der Wert zwischen den Zeichen &# und ; steht. Bei hexadezimalen Werten wird dem Wert zusätzlich ein x vorangestellt.

Beispiel für das Zeichen ö:
&#246; (dezimal)
&#x00F6; (hexadezimal)

Quelltext auswählen
1
2
3
4
5
<!-- Unicode-Entitäten in dezimaler Schreibweise -->
&#8222;Sch&#246;ne Gr&#252;&#223;e!&#8220;

<!-- Unicode-Entitäten in hexadezimaler Schreibweise -->
&#x201E;Sch&#x00F6;ne Gr&#x00FC;&#x00DF;e!&#x201C;

Eine Tabelle mit allen Unicode-Zeichen findet man hier.

Hierbei ist darauf zu achten, dass man keine Zeichen aus dem Bereich &#128; bis &#159; (&#x0080; bis &#x009F;) verwendet, da diese je nach Plattform unterschiedlich interpretiert werden können. Statt dessen gibt es in anderen Bereichen des Unicode-Systems Ersatzzeichen (s. kleine Tabelle unten). In der folgenden Tabelle sind dazu exemplarisch die zusätzlichen Zeichen des Zeichensatzes Windows-1252 im Bereich 0x80 bis 0x9F dargestellt, die wie gesagt mit den Ersatzzeichen kodiert werden müssen:

0 1 2 3 4 5 6 7 8 9 A B C D E F Nicht druckbare Zeichen:
0x20: normales Leerzeichen
0xA0: geschütztes Leerzeichen
0xAD: bedingter Bindestrich (Softhyphen)
0…
1…
2… ! " # $ % & ' ( ) * + , - . /
3… 0 1 2 3 4 5 6 7 8 9 : ; < = > ?
4… @ A B C D E F G H I J K L M N O
5… P Q R S T U V W X Y Z [ \ ] ^ _
6… ` a b c d e f g h i j k l m n o
7… p q r s t u v w x y z { | } ~
8… ƒ ˆ Š Œ Ž
9… ˜ š œ ž Ÿ
A…   ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ­ ® ¯
B… ° ± ² ³ ´ µ · ¸ ¹ º » ¼ ½ ¾ ¿
C… À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï
D… Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß
E… à á â ã ä å æ ç è é ê ë ì í î ï
F… ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ

Die nicht zulässigen Zeichen des oben genannten Bereiches müssen als Entitäten maskiert werden:

ƒ
&#8364; &#8218; &#0402; &#8222; &#8230; &#8224; &#8225;
ˆ Š Œ Ž
&#0710; &#8240; &#0352; &#8249; &#0338; &#0381;
&#8216; &#8217; &#8220; &#8221; &#8226; &#8211; &#8212;
˜ š œ ž Ÿ
&#0732; &#8482; &#0353; &#8250; &#0339; &#0382; &#0376;

Korrekte Typografie #

Man sollte sich angewöhnen, typografisch korrekte Zeichen zu verwenden.

oder » « statt "" als Anführungszeichen,
statt ' als Apostroph,
statt ... und
× statt x als Multiplikationszeichen

Und so weiter…

Allerdings sollte man sich mit allzu exotischen Zeichen zurückhalten, da diese Zeichen nur dann beim Anwender dargestellt werden, wenn eine auf dessen Rechner installierte Schriftart diese Zeichen auch enthält. Da man aber nie weiß, ob die Schriftarten des Anwenders z. B. Unicode-Zeichen unterstützen, kann es vorkommen, dass ein bestimmtes Zeichen dort nicht dargestellt wird. Um dieses Problem zu umgehen, kann man sich der @font-face-Regel bedienen.

Eine sehr gute OpenSource-Schriftfamilie mit Unicode-Unterstützung ist ›DejaVu‹.