CSS, HTML & Javascript mit {stil}

HTML-Sonderzeichen – Schreibweisen

Sonderzeichen wie mathematische oder technische Symbole vom Summenzeichen bis zu Währungen haben wir auf der Tastatur, oft verborgen hinter Tastaturkombinationen, die wie beim Klavierspiel mit mehreren Tasten angesteuert werden.

HTML-Entities in Webseiten einsetzen

Sonderzeichen eingeben

Was wir auf der Tastatur nicht finden, kann als HTML-Entity in HTML übertragen werden. Am Ende geht's auch noch mit kopieren und einfügen.

Für Sonderzeichen gibt es gut ein halbes Dutzend Schreibweisen / Methoden der Eingabe:

  • 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 (werden von SVG nur stellenweise unterstützt, selbst © oder → nicht),
  • dezimal (z.B. ☯ – gilt als zuverlässigste Methode),
  • hexadezimal,
  • als UTF-8-Code (U+2030),
  • einfach als Zeichen kopieren 💻 und einsetzen 🏝.

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.

Selbst Emojis sind Unicode-Schriftzeichen, also sozusagen eine Art Buchstabe, und werden dank UTF-8-Codierung in allen modernen Browsern korrekt angezeigt.

Am Rande: Emojis kopieren auf Emoji kopieren.

Zeichen, die nicht eingesetzt werden können

Eine Reihe von Zeichen kann in HTML nicht verwendet werden. In erster Linie sind das die Symbole für kleiner < und größer >, die im HTML-Quellcode für den Anfang und das Ende eines HTML-Tags stehen. Diese Zeichen müssen kodiert werden.

&lt;
&gt;

Zeichensatz angeben

Damit Sonderzeichen in HTML richtig angezeigt werden, muss ein Zeichensatz angegeben werden. Selbst ein ä und ein ß sind in dieser Hinsicht schon Sonderzeichen. Während früher Zeichensätze für verschiedene Sprachkreise verwendet werden mussten, gibt es heute den universellen Zeichensatz UTF-8.

Der Zeichensatz kann schon vom Webserver gesendet werden. Wenn der Server keinen Charset sendet, wird der Zeichensatz über ein Meta-Tag im Head der Seite festgelegt. Das Meta-Element für die Zeichenkodierung ist einfach

<meta charset="utf-8">

Alternativ kann der Zeichensatz für HTML-Dokumente in die Datei .htaccess eingetragen werden: AddCharset UTF-8 .html. Mehr dazu beim W3C Einstellung der Zeichencoderung.

Dann gibts Copyright ©, Herzen ♥ und Promille ‰, Währungen vom Euro € bis zum Yen ¥ und die Sonderzeichen für Deutsch (z.B.neben ä bis ü auch das kleine ß und das neue große Eszett ẞ), Hebräisch, Regenschirm und Schneemann für das Wetter und Summe, ∑ Summe, ∫ Integral und ∞ Unendlich für die Mathematik.

Trotzdem gibt es Situationen, in denen die Sonderzeichen und Umlaute falsch erscheinen, weil der Server mit einem anderen Zeichensatz eingerichtet ist, weil Zeichen in der Schriftdatei fehlen und der Browser sie nicht mit Zeichen aus dem Systemfont ersetzen kann.

HTML-Entities

Wenn es für ein Zeichen keine mnemotechnische Merkhilfe in Form eines HTML-Entity gibt, bleibt der dezimale numerische Code wie &#9775; für ein Yin Yang ☯. Auch die dezimalen Entities sind eine Referenz auf die UTF-8-Codes.

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

Direkt einsetzen

Vielleicht hat das System das Zeichen schon in einer Tastaturkombination. Wenn nicht, findet man es mit etwas Suchen in diversen Listen von Sonderzeichen, kopiert es und fügt es in das Dokument ein. So z.B. das Zeichen für Pfeil nach unten (chevron):

▼

Sonderzeichen mit CSS ::before / ::after einsetzen

Der direkte Einsatz von HTML-Entities ersetzt die voluminösen Icon-Fonts an vielen Stellen. Nur schade, dass es keine Twitter-, Facebook und Shopping-Card-Sonderzeichen gibt.

Weder dezimale HTML-Entites noch hexadezimale und auch nicht die mnemotechnischen Namen wie &copy; würden in mit ::before oder ::after generiertem CSS content funktionieren: Die Zeichenfolgen würden einfach wörtlich eingesetzt.

::before und ::after mit der CSS-Eigenschaft content reagieren auf die hexadezimalen Codes für Sonderzeichen. Das dezimale HTML-Sonderzeichen für den gefüllten Pfeil nach unten ist &#9660;, in CSS brauchen wir die hexadezimale Schreibweise &#x25BC;.

.icon-chevron:before {
    content: "\25BC";
}

<span class='icon-chevron'></span>



Noch ein Beispiel: Das Hamburger-Symbol, das als Icon für die Navigation auf mobilen Geräte eingesetzt wird, ist das mathematische Zeichen für »äquivalent«:

≡

Im HTML-Markup direkt geschrieben als

&equiv; oder &#8801;

Umrechnen von 8801 in die Hex-Notation ergibt 2261, so dass ein Hamburger mit CSS content: "\2261" erzeugt wird.

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 dezimale und Hex-Codes direkt ausgeben: 

<script>
   mytext.innerHTML = '\u262f' + ' und ' + '\u2665 ';
</script>
Suchen auf mediaevent.de