| In Webseiten hat die Kompatibität der Zeichen noch mehr Bedeutung als in anderen Dokumenten: Der Text wird evtl. auf PC und Browsern anderer Betriebssysteme, allenfalls sogar in einem anderen Sprachraum konsumiert. | Auf dieser Seite finden sie Hinweise, wie sie die Texte ihrer Webseiten so anlegen, dass sie weltweit so aussehen wie von Ihnen gewünscht. |
Zeichencodes
|
PC-Codes für Buchstaben, Ziffern und Sonderzeichen |
| Codes in HTML | Die Rolle von Webserver, Router, PC, Browser |
| Codes in XML | Nur 5 maskierte Zeichen |
| Latin-1 | Der (veraltete) Zeichencode ISO-8859-1 |
| Code-Zahl | Angabe eines Zeichens durch seine Unicode-Zahl |
| Namen | Angabe eines Zeichens durch seinen HTML-Namen |
| Schrift-Familie | Einfluss der Schrift-Familie auf die Darstellung |
| Formulare | Eingabe von Unicode-Zeichen in HTML-Formulare, z.B. für Datenbanken |
| HTML-Codierung | Umwandlung von Unicode-Zeichen in HTML-Quelltext |
| Links |
Ausgewählte
|
Zeichen-Codierung in HTML |
|
|
|
|
vergleichen (match) die Anfangs-Bytes angeforderter Dokumente mit einer kleinen
Datenbank. Meist können sie herauszufinden, welcher Zeichencode verwendet wurde.
Sie senden die Code-Information im
HTTP-Header an den Client (Browser). Dieser kennt daher den Zeichensatz
jeder Webseite, noch bevor deren
→ HTML-Quellcode eintrifft.
|
Darüber hinaus verfügen gängige → Webserver-Programme über weitere Möglichkeiten zur Analyse und Gestaltung der Zeichensatz - Information ● Webserver und andere beteiligte Agenten (Proxy-Server...) können bei Bedarf ( Accept-Charset des Browsers) die Codierung ändern, d.h. den Original-Code einer Webseite in andere Codes übersetzen. |
Programmierung:● In jedem → HTML-Dokument sollte man den verwendeten Zeichensatz ausdrücklich bekannt geben.Rechts eine typische Quelltext-Zeile, welche die → MIME-Type text/html und den empfohlenen Standard Zeichensatz → UTF-8 festlegt: ● Alle folgende Daten werden vom Browser als Zeichen des vereinbarten Codes interpretiert. ● Unabhängig vom definierten Zeichensatz (charset) sollten sie im Quelltext nur die 127 → ASCII-Zeichen verwenden, und für alle anderen Zeichen deren HTML→ Maskierung. So können sie für die Ausgabe sämtliche Unicode-Zeichen verwenden, sind jedoch unabhängig von allfälligen Browser-Problemen bei der Interpretation des Quelltextes. |
HTML <meta>-Element mit Festlegung des UTF-8 Zeichensatzes:
<meta http-equiv="Content-Type"
content="text/html;
charset=utf-8">
In vielen Webseiten wird noch der Zeichensatz
→ ISO-8859-1 verwendet:
Das ist veraltet, jedoch für Webseiten mit lokaler Bedeutung zulässig.Beispiele für Zeichencodes: ISO-8859-1 (Latin-1), ISO-8859-5 (Cyrillisch), SHIFT-JIS oder EUC-JP (Japanisch), UTF-8, UTF-16, . . Die IANA legt zulässige Codes fest und führt Listen der Daten. |
Browser:Die Interpretation sollte den Angaben (MIME-Type) folgen, welche der Webserver im → HTTP-Header sendet. |
Falls der verwendete Zeichensatz nicht bekannt ist, nehmen die meisten Browser → ASCII, → UTF-8 oder sogar → ISO-8859-1 an. Darauf kann man sich keinesfalls verlassen ! |
|
Sie können den Zeichensatz jeder geöffneten Webseite mit dem
Browser anzeigen und/oder ändern, z.B.
mit Firefox: Menü Ansicht | Zeichencodierung
mit MSIE: Menü Ansicht | Codierung (View | Encoding) mit Opera: Menü Ansicht | Zeichencodierung |
|
Zeichensatz ISO-8859-1 (Latin-1) |
|||||||||||||||||||||
| Viele Webseiten verwenden noch immer diesen Zeichensatz. Er umfasst 8 Bit und definiert damit 256 Zeichen. Davon sollten jedoch nur die ersten 128 verwendet werden. Von diesen sind 33 nicht darstellbare Steuerzeichen. | Für die Programmierung (Quelltext) bleiben daher 95 Zeichen. Einige Regeln sorgen dafür, dass weit mehr Zeichen tatsächlich angezeigt werden können - Im Idealfall alle von Menschen verwendeten Zeichen. | ||||||||||||||||||||
SteuerzeichenDie ersten 32 Zeichen (0..31, #00..#1F) und das Lösch-Zeichen (127. #7F DEL) sind nicht darstellbare Steuerzeichen.● NULL (Code 0, nicht mit Ziffer 0 verwechseln) wird nicht angezeigt und kann bei Verwendung Probleme verursachen. Ohne zwingenden Grund niemals verwenden ! ● Die Zeichen 1..8 sowie 14..31 sollten ebenfalls nicht verwendet werden. Sie werden auf der Webseite meist mit Platzhalter-Symbolen ᐀ angezeigt. ● Die Zeichen 9..13 (#09..#0D - HT,LF,VT,FF,CR) werden von HTML als 'blank space' behandelt ( → Leerzeichen) Tabulator HT und Zeilen-Umbruch LF dienen zur Formatierung des Quelltextes. |
HTML-Quellcode für einen Zeilen-Umbruch (neue Zeile): ▪ Das Zeichen LF bewirkt einen Umbruch im Quelltext, jedoch nicht auf der Webseite. ▪ Das HTML-Element <br /> erzeugt einen Umbruch auf der Webseite, jedoch nicht im Quelltext:
Das Steuerzeichen LF
Live-Ergebnis:
und ein <br /> Break
Das Steuerzeichen LF
und ein
Break |
||||||||||||||||||||
Leerzeichen● Das Leerzeichen 32. (#20, space, blank) wird als 'blank space' behandelt, ebenso wie die Zeichen 9..13 (↑ Steuerzeichen). Jede Kombination dieser Zeichen wird ebenfalls als 'blank space' behandelt.● Ein geschütztes (unbedingtes) Leerzeichen erhält man mit oder   Jede Verwendung erzeugt auch bei Aneinanderreihung genau ein Leerzeichen. |
Blank space:
Ein Zeichen ergibt einen Zeichen-Abstand,
alle weiteren werden bei der Ausgabe ignoriert.HTML-Quelltext-Beispiel: Das ist ein Test
Live HTML-Ausgabe:Das ist ein Test
|
||||||||||||||||||||
ASCII-Bereich● Die Zeichen 33..126 (#21..#7E) werden direkt ausgegeben.Eine Ausnahme stellen die 4 maskierten Zeichen dar. |
Beispiel: Ein Zeichen A im HTML-Quelltext wird als A auf der Webseite angezeigt. |
||||||||||||||||||||
Maskierte Zeichen:● Einige Zeichen haben in HTML eine besondere Bedeutung für die HTML-Programmierung. Um sie dennoch darzustellen, werden an Stelle der Zeichen die Zeichen-Namen verwendet.♦ Details zum Thema Maskierung. Beispiel: Der HTML-Code < erzeugt auf einer Webseite das Zeichen < |
|
||||||||||||||||||||
Code > 127● Zeichen mit Codes > 127. (#7F) sollten im HTML-Quelltext nicht verwendet werden. |
Zur Darstellung verwenden sie maskierte Code-Zahlen oder Zeichen-Namen. |
||||||||||||||||||||
Maskierte Zeichen-Codes in HTML |
|
|
Wie die meisten anderen Programmiersprachen verfügt auch HTML über die
Möglichkeit, den Code eines anzuzeigenden Zeichens direkt als Zahl anzugeben. ● Dazu wird die dezimale Zahl zwischen die Zeichen &# und ; gesetzt. ● Alternativ wird die hexadezimale Zahl zwischen die Zeichen &#x und ; gesetzt. ● Diese 'Maskierung' funktioniert auch in → XHTML und in → XML. |
HTML-Beispiel:
@ @
Live-Ausgabe:@ @
♦ Details zur Umwandlung CodeNr→Zeichen und Zeichen→CodeNr in verschiedenen Programmiersprachen |
|
Die Zahlen-Codes der einzelnen Zeichen finden sie in den Code-Tabellen: → ASCII, → UNICODE. Man muss die direkte Angabe der Zeichen-Codes mindestens dann verwenden, wenn für ein Zeichen mit Code>127 kein HTML-Name definiert oder bekannt ist. |
HTML-Beispiel:
α β β
Live-Ausgabe:
α → β
|
Maskierung und DemaskierungAlle modernen Programmiersprachen bieten Funktionen zur Maskierung und Demaskierung von HTML-Code. Maskierung (encode) wird u.a. immer dann eingesetzt, wenn → HTML- oder → XML-Quelltext auf Webseiten angezeigt werden soll.♣ Unterscheiden sie die HTML-Maskierung von der URI-Maskierung (für Sonderzeichen in Web-Adressen) |
Perl: Modul HTML::Entities, Funktionen encode_entities(), decode_entities() PHP: Funktionen htmlentities(), html_entity_decode(), htmlspecialcharacters(), nl2br() Beispiel: htmlentities('<b>') = '<b>'
♦ Details im Kapitel HTML-Codierung dieser Seite. |
Maskierte Zeichen-Codes in XML |
|||||||||||||||||||||||||
|
●
In → XML werden
nur diese 5 Zeichen (Predefined Entity References) maskiert.
Weitere zusätzliche Maskierungen sind möglich, wenn man sie selbst definiert. ● In XML-Dokumenten wird meist der Zeichensatz → UTF-8 eingesetzt. Alle anderen in HTML maskierten Zeichen werden in UTF-8 als Multibyte-Zeichen codiert, z.B. das Zeichen ä durch 2 Bytes #C3 A4. <?xml version="1.0" encoding="utf-8" ?>
●
In XML-Dokumenten mit Zeichensatz UTF-8 kann man daher alle
→ Unicode-Zeichen
(bis auf die 5 rechts angeführten) ohne Maskierung direkt einsetzen.
|
|
||||||||||||||||||||||||
XHTMLIn → XHTML sind zusätzlich die namentlich bezeichneten HTML-Entities definiert, z.B. für das geschütze Leerzeichen =   |
In der Syntax � sollte man die hexadezimale → Unicode-Zahl immer 4stellig angeben. |
||||||||||||||||||||||||
Zeichen - Namen |
|
|
Für die 5 immer maskierten Zeichen ↑ und für viele häufig
verwendete Zeichen sind in
HTML eigene Zeichen-Namen definiert. Ein typisches Beispiel sind die deutschen Umlaute: Ihre Namen werden von professionellen Web-Editor Programmen automatisch eingesetzt. Zur Verwendung werden die Namen zwischen die Zeichen & und ; gesetzt. ● In den → XHTML Versionen sind teilweise nur wenige dieser Zeichen-Namen definiert ! Verwenden sie dort im Zweifel die dezimale oder hexadezimale Maskierung (s.o.) HTML-Beispiel: Größe ändern: €12,-
Live-Ausgabe:
Größe ändern: €12,-
|
|
Schrift - Familie (font-family) |
|||||||||||||||||||||||||
|
Alle gängigen Betriebssysteme, die meisten Browser und überhaupt alle
neueren professionellen Programme 'verstehen' mittlerweile
→ Unicode.
Sie könnten daher theoretisch alle derzeit >100000 definierten Unicode-Zeichen
anzeigen. ● Die Übersetzung vom Zeichen-Code in Bildpunkte (Pixel) auf Monitor oder Drucker ist Aufgabe der → Schrift-Familie. ● Ein Zeichen kann nur dann dargestellt werden, wenn es in der verwendete Schrift-Familie angelegt ist. Ansonsten wird ein Platzhalter-Symbol ᐀ angezeigt. |
![]() Das gleiche Zeichen (hier Code-Nr 65. oder hex #41 ) wird je nach Schrift (Familie, Schnitt, Größe, Farbe, ...) unterschiedlich dargestellt. ♦ Details zu Schrift-Familien |
||||||||||||||||||||||||
| Auf gängigen Betriebssystemen sind meist zahlreiche Schriften installiert, darunter jedoch nur wenige, die wirklich viele Zeichen darstellen können. Sie erkennen diese Schriften an der Größe der Schrift-Dateien (z.B. in /usr/share/fonts oder C:\Windows\Fonts). |
|
||||||||||||||||||||||||
|
♣
Tipp für AnwenderInnen: Bei der Installation der meisten Programme (auch Browser) werden die Optionen so eingestellt, dass sie Schriften mit möglichst vielen Zeichen verwenden. Ändern sie diese Einstellung nur in begründeten Fällen. |
Ändern sie insbesondere nicht die Browser-Optionen (z.B. MSIE: Extras | Internet-Optionen | Allgemein | Schriftarten) |
||||||||||||||||||||||||
|
♣
Tipps für EntwicklerInnen: Wenn sie Dokumente in IT-Form an andere Menschen weitergeben, dann müssen sie sich für einen der rechts angeführten Wege entscheiden: ► Wenn sie sich nicht an eine dieser Regeln halten, dann werden ihre Dokumente 'falsch' angezeigt. Das gilt insbesondere für Webseiten. |
►
Verwenden sie Standard-Schriften. Nur diese stellen einigermaßen sicher,
dass ihre Dokumente auf beliebigen PC so aussehen wie von ihnen gewünscht. ► Oder: Geben sie zusammen mit dem Dokument die zu verwendende Schrift weiter. Das ist technisch nur in wenigen Fällen möglich, z.B. bei Adobe-Acrobat Dokumenten. ► Oder: Wenn ein Text unbedingt genau wiedergegeben werden muss (z.B. bei einem Schrift-Logo), dann setzen sie diesen nicht als Text sondern als Bild ein (wie das Schrift-Muster für das Zeichen A in diesem Kapitel). |
||||||||||||||||||||||||
Schriften in CSS● Mit der → CSS-Anweisung font-family wird die Schrift festgelegt.● Es folgt eine Liste von (ähnlichen) Schriften, die vom Browser in der angeführten Reihenfolge durchsucht wird. Die erste am PC gefundene Schrift der Liste wird verwendet. ● Schrift-Namen, die Leerzeichen enthalten, werden in 'Single Quotes' gesetzt. |
● Als letzte Schrift der Liste muss eine der 3 Standard-Schriften eingesetzt werden: Jedes Betriebssystem bietet mindestens diese Schriften:
serif - Schrift
mit Serifen
(Häkchen an den Zeichen)
sans-serif - Schrift ohne Serifen monospace - Schrift mit gleich breiten Zeichen |
||||||||||||||||||||||||
|
Typische Beispiele von
→ CSS-Klassen:
.c1{font-family:'Times New Roman',Times,serif;}
.c2{font-family:Helvetica,Verdana,Arial,sans-serif;} .c3{font-family:'Courier New',Courier,monospace;} .cx{font-family:'Comic Sans MS','Comic Sans';} .cy{font-family:Rockwell;} |
|||||||||||||||||||||||||
|
●
Beispiele c1..c3 sind korrekt: Sie enthalten jeweils eine Liste ähnlicher
Schriften, von denen mindestens eine auf allen gängigen Betriebssystemen
installiert ist, und zuletzt eine Standard-Schrift. ● Beispiel cx verwendet eine Schrift, die zwar auf vielen privaten Windows-PC installiert ist, nicht jedoch auf anderen Betriebssystemen. ● Beispiel cy verwendet eine selten installierte Schrift: Ihr Browser zeigt sie wahrscheinlich in seiner eingestellten Standardschrift an, nicht jedoch so wie am Entwickler-PC. ● Die mittlere Spalte zeigt die deutschen Sonderzeichen, die rechte Spalte einige → Unicode-Zeichen - beide nicht in allen Schrift-Familien definiert ! |
Live-HTML (Zeichen-Größe jeweils 14pt):
♣ Die Klassen cx
und cy können auf jedem PC anders aussehen...
|
||||||||||||||||||||||||
HTML-Formulare, z.B. für Datenbanken |
|
|
Felder von HTML-Formularen können beliebigen Text aufnehmen, darunter auch
→ Unicode-Zeichen.
Es gibt mehrere Wege, um Unicode-Text in ein Eingabe-Feld zu bringen: ● Tastatur: Jedes Betriebssystem bietet die Möglichkeit, das Tastatur-Layout zu ändern. Damit werden die Sonderzeichen der jeweiligen Sprache verfügbar, allerdings muss man sie 'blind' eintippen. ● Zwischenablage: Text aus anderen Dokumenten kann man mit Kopieren | Einfügen in ein Eingabefeld kopieren. Dazu können sie u.a. die → Unicode-Seite dieses Webs verwenden, oder ein Hilfsprogramm, z.B. 'Zeichentabelle' (charmap.exe) auf jedem Windows-System. |
Textfeld in einem HTML-Formular (gekürzt):
Alle Formular-Elemente sollten gleich lautende id-
und name-Attribute erhalten.
<form id="f1" name="f1">
<input id="t1" name="t1" type="text" />
</form>
Live-Beispiel: Dieses Eingabe-Feld wird von den folgenden Beispielen verwendet. Sie können den Inhalt mit Tastatur-Eingabe oder mit Programmen ändern. |
|
●
Dynamische Webseiten: In Formular-Felder lassen sich
mit Programmiersprachen wie Java,
→
Perl oder
→ PHP Anfangswerte eintragen:
Darin enthaltene Unicode-Zeichen >U+007F werden
HTML-codiert so wie oben gezeigt. Klicken sie um das zu simulieren. Beachten sie jedoch, dass diese Programmiersprachen am → Webserver arbeiten, daher kann man damit nur Anfangswerte eintragen, bevor die Webseite zur Verwendung abgesendet wird ! |
Anfangswerte in HTML-Formularen mit PHP
<?php
$v = 'Österreich';
?>
<input id="t1" name="t1" type="text" value="<?php print $v; ?>" /> |
Mit
Javascript kann eine Webseite Live auf AnwenderInnen reagieren:
Das Beispiel zeigt, wie man mit
→
Javascript (z.B. mit diesen Bildschirm-Tasten) Unicode-Zeichen eintragen kann:
abc
äöüß
žŋĉ
αβγ
€
DOM-Methoden sind zu bevorzugen, weil sie auch in allen
→
XML-Dateien, insbesondere auch mit
→ XHTML
funktionieren. Man kann sie allerdings erst nach dem Laden des Dokuments
(Ereignis
onload) anwenden.
|
Javascript mit
→ DOM-Methoden (verwendet id-Attribut):
n = document.getElementById("t1");
Javascript (veraltet, verwendet name-Attribut)
v = n.value; n.value = v + String.fromCharCode(97);
v = document.f1.t1.value;
v += String.fromCharCode(97); document.f1.t1.value = v; |
|
●
Bei der Auswertung abgesendeter Formulare (z.B. mit einem
→ PHP-Empfangsprogramm) ist Vorsicht geboten: Die Formular-Daten werden im Zeichencode der Webseite gesendet, allenfalls zusätzlich in HTML-maskierter Form &#nnn; Klicken sie um den Submit-Vorgang zu simulieren. |
Empfangener Text nach dem Absenden des Formulars (Soll):
|
|
Simulieren sie zur Demonstration das Absenden mit einem Text wie z.B. mit Klick auf 'α ist größer als ω'. |
Empfangener Text mit möglichen MS-Problemen:
|
|
● Besonders für
Datenbanken ist das Verhalten von HTML-Formularen wichtig:
Damit erfolgt meistens die Eingabe und Änderung von Texten. Moderne Datenbanken beherrschen
ausnahmslos → Unicode,
die Zeichen müssen lediglich fehlerfrei in die Datenbank gelangen. Das Beispiel rechts zeigt den UTF-8 codierten Text - Er enthält nur mehr Zeichen U<FF und kann daher in jeder Datenbank gespeichert werden. |
Empfangener Text, UTF-8 codiert zum Speichern in einer Datenbank
|
|
●
Die → UTF-8 codierten
Texte aus der Datenbank werden nach dem Lesen der Daten wieder decodiert und stehen als
→ Unicode-Texte zur
Verfügung. ♦ Details zur Codierung von Unicode-Zeichen mit UTF-8. |
Aus der Datenbank gelesener Text, zur Verwendung UTF-8 decodiert:
|
HTML-Codierung |
|
| Mehrere Programmiersprachen bieten Funktionen zur HTML-Codierung, d.h. zur Umwandlung von Text (aus allen Unicode-Zeichen) in HTML-Quelltext. |
Perl:
Modul HTML::Entities,
Funktionen encode_entities(), decode_entities() PHP: Funktionen htmlentities(), html_entity_decode(), htmlspecialcharacters(), nl2br() |
HTML-Codierung mit PHPPHP ist derzeit die meist-verwendete Programmiersprache zur Erzeugung von dynamischen Webseiten. → PHP bietet die Standard-Funktion htmlentities() zur Umwandlung von Text in HTML-Quelltext. Diese Funktion deckt nur einen Teil des Bedarfs.Die Funktion utf8_to_html() im Beispiel rechts codiert alle Unicode-Zeichen eines UTF8-String-Arguments $s in HTML-Quelltext und kann als Ersatz für htmlentities() verwendet werden. Damit kann man z.B. die UTF8 codierten Daten einer Datenbank direkt in eine Webseite schreiben. • Jedes Start-Byte des Strings $s wird in der Variablen $o1 gespeichert und analysiert: • Von den Steuerzeichen (Code<32) wird nur der Tabulator (mit einem Leerzeichen) und der Zeilen-Umbruch (mit einem HTML-Umbruch) übersetzt. Alle anderen Steuerzeichen werden ignoriert. • ASCII-Zeichen (Code<128) werden mit Funktion htmlentities() codiert. • Illegale Zeichen mit Code 128...191 werden mit einem ? Zeichen übersetzt. • Nach einem Start-Byte 192...223 wird ein 2. Byte in die Variable $o2 gelesen und ausgewertet. • Nach einem Start-Byte 224...239 werden 2 weitere Bytes gelesen und ausgewertet. • Start-Bytes >239 sind derzeit illegal und werden mit einem ? Zeichen übersetzt. |
PHP-Funktion
zur Codierung von HTML-Quelltext
<?php
function utf8_to_html($s) {
$h = '';
}
$i = 0; while($i<strlen($s)) {
$c1 = substr($s,$i,1);
}$o1 = ord($c1); if($o1<32) {
if($o1==9) {$h.=' ';}
}elseif($o1==10) {$h.="<br />\n";} elseif($o1<128) {$h.=htmlentities($c1);} elseif($o1<192) {$h.='?';} elseif($o1<224) {
$o2 = ord(substr($s,$i+1,1));
}$uc = ($o1-192) * 64 + $o2 - 128; $h .= '&#'.$uc.';'; $i++; elseif($o1<240) {
$o2 = ord(substr($s,$i+1,1));
}$o3 = ord(substr($s,$i+2,1)); $uc = ($o1-224) * 4096 + ($o2-128) * 64 + $o3 - 128; $h .= '&#'.$uc.';'; $i+=2; else {$h.='?';} $i++; return $h; ?>
|
| Das Beispiel lässt sich mit etwas Geschick in alle gängigen Programmiersprachen übertragen. | |
|
|
W3C:
Character encodings +
Tutorial,
Browser support for character sets,IANA (Internet Assigned Numbers Authority): RFC 2978 Character Sets |
Microsoft: Character set recognition, Latin-1 Character set, Character entities for special symbols, Additional named entities for HTML |
|
|