Hieroglyphen im Browser darstellen
Bild: AlexPee07 – Pixabay Lizenz

Ägyptische Hieroglyphen im Browser darstellen

Die Hieroglyphen werden auf Websites häufig mit Hilfe von pixelbasierten Bildern dargestellt. Das ist nicht nur ineffizient, sondern erlaubt auch keine verlustfreie Skalierung oder das Kopieren von Text. Tatsächlich lassen sich auch Hieroglyphen leicht als normaler Text darstellen, dazu wird nur ein entsprechender Zeichensatz benötigt. Erfreulicherweise stellt Google eine solche Schrift kostenlos zur Verfügung und zwar als TTF und als Web-Font. Die Schrift wurde unter der Open Font License veröffentlicht und enthält 1.079 Hieroglyphen. Für dieses einfache Beispiel wird der Web-Font von »Noto Sans Egyptian Hieroglyphs« verwendet. Etwaige Fehler im Text möge der Leser mir bitte nachsehen.

𓅠 𓅓 𓈖 𓇑 𓏲 𓄋 𓊪 𓏲 𓅃 𓂻 𓏼 𓁷 𓏺 𓍯 𓅐 𓏏 𓈐

GMI.N SW WPWTIW HR WAT (Es fanden ihn die Boten auf dem Weg)

Ein Schreiber aus dem alten Ägypten hätte sich aber vermutlich mit Schaudern abgewendet, wenn er derart große Lücken im Text sähe. Eigentlich müsste das Zeichen für die Eule 𓅓 oberhalb von dem Zeichen der Welle 𓈖 und der Hocker 𓊪 unterhalb von dem Zeichen für Kuhgehörn 𓄋 angeordnet sein, damit nicht derart unschöne »Zahnlücken« im Text entstehen. Vermutlich müsste die Zeile etwa so aussehen:

hieroglyphs

Ob das W3C oder die Browserhersteller an diesem Problem schon arbeiten, darf aber wohl bezweifelt werden ;-). Die Schrift wird wie jede andere Webschrift mit CSS eingebunden.

/* noto-sans-egyptian-hieroglyphs-regular - egyptian-hieroglyphs */
@font-face {
  font-family: 'Noto Sans Egyptian Hieroglyphs';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/noto-sans-egyptian-hieroglyphs-v24-egyptian-hieroglyphs-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/noto-sans-egyptian-hieroglyphs-v24-egyptian-hieroglyphs-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/noto-sans-egyptian-hieroglyphs-v24-egyptian-hieroglyphs-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/noto-sans-egyptian-hieroglyphs-v24-egyptian-hieroglyphs-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/noto-sans-egyptian-hieroglyphs-v24-egyptian-hieroglyphs-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/noto-sans-egyptian-hieroglyphs-v24-egyptian-hieroglyphs-regular.svg#NotoSansEgyptianHieroglyphs') format('svg'); /* Legacy iOS */
}

.hieroglyphs {
  font-family: 'Noto Sans Egyptian Hieroglyphs';
  font-size: 40px;
}

Etwas schwieriger wird es die richtigen Zeichen zu finden, denn eine Tastatur nützt bei 1.079 Zeichen nicht mehr viel. Um sich einen Überblick über alle Zeichen zu verschaffen, hilft ein Font-Viewer wie Gnome Font Viewer, Fontmatrix oder der Web-Viewer von Mathew Kurian. Dort wird der Code angezeigt, der für die Darstellung des Zeichens benötigt wird:

<p class="hieroglyphs">
&#78176; &#78163; &#78358; &#78289; &#78834; &#78091; &#78506; &#78834; &#78147; &#78011; &#78844; &#77943; &#78842; &#78703; &#78160; &#78799; &#78352;
</p>