CSS, HTML und Javascript mit {stil}

Sonderzeichen und HTML-Entities

Sonderzeichen – special characters

Sonderzeichen werden mit UTF-8 ohne Codierung in den HTML-Code gesetzt. ♥, ©, ®, è, à, ±, ¾, ∑ – Deutsch, Französisch, Russisch, Pfeile und mathematische Symbole können direkt eingesetzt werden.

Aber wenn es über die Zeichen der Tastatur hinausgeht, hat nicht jeder die Tastaturkombination für Pi – Π – im Kopf. Da greifen HTML-Entities – eine memotechnische Codierung wie π (Pi) und © (Copyright) für häufig gebrauchte Symbole. Sie sind Referenzen auf die Unicode-Zeichen.

Der Server prüft anhand der ersten Bytes der HTML-Seite die Zeichenkodierung und benachrichtigt den Browser durch das Charset-Attribut im Content-Type-Header des HTTP-Protokolls.

Zeichensatz angeben

Da manche Server nicht erlaubten, einen Charset-Parameter zu senden und andere einfach nicht entsprechend konfiguriert waren, bietet HTML seit Version 4 die Angabe des Zeichensatzes.

In HTML5 ist das Meta-Tag für die Zeichenkodierung kurz

<meta charset="utf-8">

Dann gibts Copyright ©, Herzen ♥ und Promille ‰, Währungen vom Euro € bis zum Yen ¥ und die Sonderzeichen für Deutsch, Hebräisch, Regenschirm und Schneemann für das Wetter und Summe, kleiner gleich und Unendlich für die Mathematik.

Sonderzeichen eingeben

Einige Sonderzeichen können auf fünf Arten eingesetzt werden:

  • direkt durch ein Sonderzeichen auf der Tastatur (aber die Tastaturen der verschiedenen Betriebssysteme verwenden unterschiedliche Tastaturkombinationen) oder durch die Liste der Sonderzeichen der Betriebssysteme,
  • durch einen mnemotechnischen Namen oder HTML-Entity,
  • dezimal (z.B. &#9775; – gilt immer noch als zuverlässigste Methode),
  • hexadezimal,
  • als UTF-8-Code (U+2030).

In HTML-Seiten wird am besten das Symbol direkt eingefügt und die Seite als UTF-8-Dokument gespeichert (<meta charset="utf-8">). Das macht den Quellcode besser lesbar.

HTML-Entities

Wenn es für ein Zeichen kein HTML-Entity gibt, gibt es den dezimalen numerischen Code wie &#9775; für ein Yin Yang ☯. Auch die dezimalen Entities sind eine Referenz auf die UTF-8-Codes.

HTML5 hat die Liste der HTML-Symbole um Wettersymbole, Schachfiguren, Sternzeichen erweitert. So könnten wir jetzt Telefonnummern direkt mit ☎ (&phone;) kennzeichnen. Aber wir dürfen nicht davon ausgehen, dass unsere Webseite bei einem Besucher landet, dessen System das Symbol in einem seiner Zeichensätze hat.

Sonderzeichen Währungen, Wetter, Mathe …

Währungen

Den Euro und das Dollarzeichen finden wir schon auf der Tastatur, aber für das britische Pfund und die türkische Lira brauchen wir ein HTML-Entity.

¢

&#162;
&cent;
Cent

£

&#163;
&pound;
britisches Pfund

¤

&#164;
&curren;
Währungszeichen

¥

&#165;
&yen;
japanischer Yen

&#3065;

Rupie Tamil

&#8362;

israelischer Schekel

&#8378;

türkische Lira

&#8379;

russischer Rubel

Alltags-Symbole

Was wir häufig brauchen: das Copyright-Symbol, Registered Trademark und Trademark, Quadrat und Qubik.

@

&#64;
&commat;
at-Symbol

©

&#169;
&copy;
Copyright

®

&#174;
&reg;
Registrierte Handelsmarke

&#8482;
&trade;
Handelsmarke / Trademark

±

&#177;
&plusmn;
Plusminus

4²

&#178;
&sup2;
hoch 2 = Quadrat

4³

&#179;
&sup3;
hoch 3 = Qubik

&#10102;
Ziffer 1 weiß im gefüllten Kreis serif

&#10131;
Ziffer 10

Satzzeichen, Leerzeichen und Gedankenstrich

–– ––

&#160;
&nbsp;
Leerzeichen, nicht brechend

"­"

&#173;
&shy;
Weiches Trennzeichen

¦

&#166;
&brvbar;
gebrochener senkrechter Strich (Pipe)

«

&#171;
&laquo;
typografisches Anführungszeichen links (Guillemet)

´

&#180;
&acute;
Umlaut: Akut mit Leerraum

&#8194;
&ensp;
Typo: n-Raum

&#8195;
&emsp;
Typo: m-Raum

&#8201;
&thinsp;
Dünnes Leerzeichen (z.B. in Telefonnummern) 012 34/5 67 89

&#8204;
&zwnj;
Null-Leerraum, führt nicht zusammen (z.B. www.langerlink.de ohne Trennzeichen trennen)

--

&#8205;
&zwj;
Typo: Null-Leerraum, führt zwei Wörter zusammen

&#8211;
&ndash;
Typo: n-Strich = Viertelgeviert

&#8212;
&mdash;
Typo: m-Strich = Dreiviertelgeviert

4¹

&#185;
&sup1;
hoch 1

"

&#34;
&quot;
Hochkomma, Anführungszeichen, Quote (XML)

«

&#171;
&laquo;
typografisches Anführungszeichen links (Guillemet, Chevron)

»

&#187;
&raquo;
typografisches Anführungszeichen rechts (Guillemet, Chevron)

&#8249;
&lsaquo;
Anführungszeichen links (Guillemet, Chevron)

&#8250;
&rsaquo;
Anführungszeichen rechts (Guillemet, Chevron)

&#8220;
&ldquo;
Hochkomma, doppeltes Anführungszeichen links

&#8221;
&rdquo;
Hochkomma, doppeltes Anführungszeichen rechts

&#8222;
&bdquo;
Hochkomma, doppeltes Anführungszeichen unten

'

&#39;
&apos;
einfaches Anführungszeichen rechts (XML)

&#8216;
&lsquo;
Hochkomma, einfaches öffnendes Anführungszeichen

&#8217;
&rsquo;
Hochkomma, einfaches schließendes Anführungszeichen

&#8218;
&sbquo;
Hochkomma, einfaches Anführungszeichen unten

&#8226;
&bull;
Kreis, gefüllt (bullet) = Aufzählungssymbol

&#8230;
&hellip;
Auslassungspunkte

&#9674;
&loz;
Grafik: Raute

Icon-Sonderzeichen

&#8226;
Gefüllter Kreis

&#8227;
Gefülltes Dreieck

&#8408;
leerer Kreis

&#8481;
Telefon

&#8507;
Fax

&#8718;
Gefülltes Viereck

&#8729;
Gefüllter kleiner Kreis

&#9986;
Schere

&#9990;
&phone;
Telefon

&#9992;
Flugzeug

&#9993;
Briefumschlag

&#10003;
Geprüft und für richtig empfunden

&#10005;
Multiplikationszeichen

&#10006;
Multiplikationszeichen ✕ (fett)

&#10007;
Stimmzettel »x« (eng.: ballot)

&#10008;
&cross;
Stimmzettel »x« fett

&#10011;
Kreuz

&#10016;
&malt;
Kreuz Malteser

&#9775;
YIN YANG

Technik

¯

&#175;
&macr;
Makron

µ

&#181;
&micro;
Mikro

·

&#183;
&middot;
Mittelpunkt

&#10664;
&angmsdaa;
Winkel

&#10665;
&angmsdab;
Winkel

&#10666;
&angmsdac;
Winkel

&#10667;
&angmsdad;
Winkel

Mathematik Symbole und Sonderzeichen

¬

&#172;
&not;
Negierung

¼

&#188;
&frac14;
Mathe 1/4

½

&#189;
&frac12;
Mathe 1/2

¾

&#190;
&frac34;
Mathe 3/4

&#8539;
&frac18;
Mathe 1/8

&#8540;
&frac38;
Mathe 3/8

&#8541;
&frac58;
Mathe 5/8

&#8542;
&frac78;
Mathe 7/8

&#8531;
-
Mathe 1/3

&#8532;
-
Mathe 2/3

&#8533;
-
Mathe 1/5

&#8534;
-
Mathe 2/5

&#8535;
-
Mathe 3/5

&#8536;
-
Mathe 4/5

&#8537;
-
Mathe 1/6

Ð

&#208;
&ETH;
Latein großes ETH

×

&#215;
&times;
Mathe: Multiplikationszeichen

÷

&#247;
&divide;
Mathe: Divisionszeichen

&#8472;
&weierpv
Mathe Weierstraß'sche P-Funktion

&#8465;
&image;
Mathe: I Fraktur = imaginärer Anteil einer Zahl

&#8476;
&real;
Mathe: R Fraktur = realer Anteil einer Zahl

&#8704;
&forall;
Mathe: für alle

&#8706;
&part;
Mathe: partiales Differential

&#8707;
&exist;
Mathe: es gibt

&#8709;
&empty;
Mathe: leere Menge

&#8711;
&nabla;
Mathe: Nablafunktion

&#8712;
&isin;
Mathe: Element von

&#8713;
&notin;
Mathe: kein Element von

&#8715;
&ni;
Mathe: enthält

&#8719;
&prod;
Mathe: Produktzeichen

&#8721;
&sum;
Mathe: Summe

&#8727;
&lowast;
Mathe: Stern-Operator

&#8730;
&radic;
Mathe: Wurzel

&#8733;
&prop;
Mathe: proportional zu

&#8734;
&infin;
Mathe: unendlich

&#8736;
&ang;
Mathe: Winkel

&#8743;
&and;
Mathe: logisches Und

&#8744;
&or;
Mathe: logisches Oder

&#8745;
&cap;
Mathe: Schnittmenge

&#8746;
&cup;
Mathe: Vereinigung

&#8747;
&int;
Mathe: Integral

&#8756;
&there4;
Mathe: darum

&#8764;
&sim;
Mathe: Tilde-Operator = ähnlich wie

&#8773;
&cong;
Mathe: ungefähr gleich

&#8776;
&asymp;
Mathe: fast gleich = asymptotisch zu

&#8800;
&ne;
Mathe: nicht gleich

&#8801;
&equiv;
Mathe: identisch

&#8804;
&le;
Mathe: kleiner gleich

&#8805;
&ge;
Mathe: größer gleich

&#8834;
&sub;
Mathe: Untermenge von

&#8835;
&sup;
Mathe: Obermenge von

&#8836;
&nsub;
Mathe: Keine Untermenge von

&#8838;
&sube;
Mathe: Untermenge oder gleich

&#8839;
&supe;
Mathe: Obermenge oder gleich

&#8853;
&oplus;
Mathe: Pluszeichen im Kreis = direkte Summe

&#8855;
&otimes;
Mathe: Multiplikationszeichen im Kreis = Vektorprodukt

&#8869;
&perp;
Mathe: senkrecht auf = orthogonal zu

&#8901;
&sdot;
Mathe: Punktoperator

&#8491;
&angst;
Angström

Sonderzeichen aus dem griechischen Alphabet

Δ

&#916;
&Delta;
Griechisch Delta

Η

&#919;
&Eta;
Griechisch Eta

Θ

&#920;
&Theta;
Griechisch Theta

Λ

&#923;
&Lambda;
Griechisch Lambda

Π

&#928;
&Pi;
Griechisch Pi

Σ

&#931;
&Sigma;
Griechisch Sigma

Φ

&#934;
&Phi;
Griechisch Phi

Ψ

&#936;
&Psi;
Griechisch Psi

Ω

&#937;
&Omega;
Griechisch Omega

α

&#945;
&alpha;
Griechisch alpha

β

&#946;
&beta;
Griechisch beta

γ

&#947;
&gamma;
Griechisch gamma

δ

&#948;
&delta;
Griechisch delta

ε

&#949;
&epsilon;
Griechisch epsilon

ζ

&#950;
&zeta;
Griechisch zeta

η

&#951;
&eta;
Griechisch eta

θ

&#952;
&theta;
Griechisch theta

κ

&#954;
&kappa;
Griechisch kappa

λ

&#955;
&lambda;
Griechisch lambda

μ

&#956;
&mu;
Griechisch mu (z.B. für Mikrometer)

ν

&#957;
&nu;
Griechisch nu

ξ

&#958;
&xi;
Griechisch xi

ο

&#959;
&omicron;
Griechisch omicron

π

&#960;
&pi;
Griechisch pi

ρ

&#961;
&rho;
Griechisch rho

σ

&#963;
&sigma;
Griechisch sigma

τ

&#964;
&tau;
Griechisch tau

υ

&#965;
&upsilon;
Griechisch ypsilon

φ

&#966;
&phi;
Griechisch phi

χ

&#967;
&chi;
Griechisch chi

ψ

&#968;
&psi;
Griechisch psi

ω

&#969;
&omega;
Griechisch omega

ϑ

&#977;
&thetasym;
Griechisch theta

ϖ

&#982;
&piv;
Griechisch pi

Symbole Pfeile

&#8592;
&larr;
Pfeil nach links

&#8593;
&uarr;
Pfeil nach oben

&#8594;
&rarr;
Pfeil nach rechts

&#8595;
&darr;
Pfeil nach unten

&#8596;
&harr;
Pfeil nach links und rechts

&#8629;
&crarr;
Pfeil nach unten mit Ecke nach links = Zeilenumbruch (Carriage Return)

&#8656;
&lArr;
Doppelpfeil nach links

&#8657;
&uArr;
Doppelpfeil nach oben

&#8658;
&rArr;
Doppelpfeil nach rechts

&#8659;
&dArr;
Doppelpfeil nach unten

&#8660;
&hArr;
Doppelpfeil nach links und rechts

&#9001;
&lang;
Linke winklige Klammer

&#9002;
&rang;
Rechte winklige Klammer

&#9650;
großes Dreieck, Spitze oben

&#9652;
kleines Dreieck, Spitze oben

&#9654;
großes Dreieck, Spitze rechts

&#9656;
kleines Dreieck, Spitze rechts

&#9660;
großes Dreieck, Spitze unten

&#9662;
kleines Dreieck, Spitze unten

&#9664;
großes Dreieck, Spitze links

&#9666;
kleines Dreieck, Spitze links

&#8634;
&circlearrowleft
Kreis mit Pfeilspitze, gegen den Uhrzeiger

&#8635;
&circlearrowright;
Kreis mit Pfeilspitze, im Uhrzeiger

&#8617;
&larrhk;
Pfeil zurück (Enter)

&#10149;
Pfeil nach rechts mit von oben geschwungenem Schaft

&#10150;
Pfeil nach rechts mit von unten geschwungenem Schaft

&#10132;
Pfeil nach rechts

&#10136;
Pfeil nach Südost

&#10137;
Pfeil nach rechts

&#10138;
Pfeil nach Nordost

&#10141;
Pfeil nach rechts

&#10142;
Pfeil nach rechts

&#10143;
Pfeil nach rechts

HTML Sonderzeichen – Spielkarten

&#9824;
&spades;
Karte Pik

&#9827;
&clubs;
Karte Kreuz

&#9829;
&hearts;
Karte Herz

&#9830;
&diams;
Karte Karo

Stern-Symbole

&#10017;
Davidstern

&#10022;
Stern vierseitig gefüllt

&#10023;
Stern vierseitig weiß

&#10026;
Stern weiß im gefüllten Kreis

&#10032;
Stern mit Schatten

&#10035;
Stern mit acht Zacken

&#10038;
&sext;
Stern mit sechs Zacken

&#10039;
Stern mit acht Zacken

&#10057;
Stern aus Ballons (Asterisk)

&#10058;
Stern mit Tropfenzacken (Asterisk)

Blumen und Herzen

&#10047;
Blume mit fünf Blättern

&#10049;
Blume mit acht Blättern

&#10061;
Kreis mit Schatten nach rechts

&#10070;
Vier schwarze Rauten als Kreuz

&#10075;
Dickes einzelnes Anführungszeichen

&#10076;
Dickes einzelnes Komma

&#10077;
Dickes doppeltes Anführungszeichen

&#10081;
Dickes geschwungenes Absatzzeichen

&#10082;
Dickes geschwungenes Ausrufezeichen

&#10084;
Dickes geschwungenes Herz

&#10085;
Dickes geschwungenes Herz, 90°

&#10086;
Herz, floral

&#10087;
Herz, floral, 90°

Sonderzeichen mit Javascript

In Javascript müssen wir uns schon mal mit Encodings oder Character Sets von Sonderzeichen wie UTF-8 in hexadezimaler Schreibweise wie \u262f oder \u2665 herumschlagen.

Javascript kann Hex-Codes direkt ausgeben:

<script>
   mytext.innerHTML = '\u262f' + ' und ' + '\u2665 ';
</script>

Wenn Kästchen erscheinen

Die Browser – gleich ob IE 8 oder Chrome – haben ihre Probleme bei der Darstellung von Sonderzeichen, wenn das Zeichen im Font der Seite nicht existiert. Die modernen Browser durchsuchen die Schriften des Systems nach dem fehlenden Zeichen, um es durch die Glyphe einer anderen Schrift zu ersetzen. Das mag von der Größe und Gewicht nicht passen, ist aber besser als Kästchen für fehlende Glyphen.

Microsoft IE macht das nicht unbedingt.

IE 8 zeigt viele Zeichen nicht an, obwohl sie aus den Schriften des Systems genommen werden könnten.

Wenn ein Browser ein Zeichen nicht darstellen kann, erscheint ein Kästchen □ oder ein Kästchen mit einem Fragezeichen oder vielleicht ein Kästchen mit dem Code des jeweiligen Zeichens.