Wie funktioniert Fontura?

F

ontura besteht im Kern aus einer PHP-Klasse, die normalen Text annimmt und eine Folge von Image-Tags direkt in das HTML-Dokument einfügt. Die zugehörigen Wort-Bilder werden in einem Verzeichnis gespeichert.

Fontura zerlegt einen Text in einzelne Worte und übergibt diese der Reihe nach an die Grafik-Schnittstelle des Betriebssystems, das auf dem Netzrechner läuft. Das Betriebssystem wiederum holt sich aus der angegebenen Font-Datei die einzelnen Buchstaben-Bilder und malt diese hintereinander. Dieser Vorgang läuft überall, wo ein Rechner Schrift anzeigt, gleich ab. Nur kopiert Fontura die einzelnen Worte nicht direkt auf den Bildschirm, sondern speichert sie als Dateien.

Jede Wort-Bild-Datei erhält einen Base64-Hash als eindeutigen Namen. Kommt das gleiche Wort mit der gleichen Schrift in der gleichen Farbe usw. mehrfach vor, so entsteht jeweils derselbe Dateiname. Fontura braucht dieses Wort dann nur einmal zu erzeugen und nur einmal zu übertragen. Auf der Benutzerseite wird die entsprechende Datei in den Cache des Betrachters geschrieben, so dass es beim nächsten Aufruf nicht erneut geladen werden muss.

Der erste Trick bestand also darin, den Vorgang der Grafikerzeugung auf den Netzrechner zu verlagern. Nun brauchen wir noch einen zweiten Trick, um die Wort-Bilder in HTML so wie normalen Text aussehen zu lassen. Dazu erzeugt Fontura eine Folge von <img> Tags, die mit Leerzeichen zu einer Zeichenkette verknüpft sind. Packt man diese in einen Behälter wie <p> oder <div>, so kann man die weitere Darstellung mit CSS beeinflussen.

Für die Schrifterzeugung kann jede Schriftart verwendet werden, die als True Type Font ttf oder in der weiterentwickelten Version Open Type Font otf vorliegt. Die Font-Dateien werden einfach in einem wählbaren Verzeichnis auf dem Netzrechner abgelegt. Die PHP-Klasse font() erhält bei der Instantiierung den Namen der Font-Datei, die gewünschte Farbe usw. Mitten im HTML erzeugt dann ein Aufruf der Funktion $font->text("Hallo!") die Ausgabe:

  1. <img src="dateiname.png" width="45" height="19" alt="Hallo">

So lädt sich die Grafik automatisch und zeigt sich an der Aufrufstelle an.

Der Abstand zwischen den Wort-Bildern reguliert sich wie bei gewöhnlichem Text dadurch, dass die Leerzeichen breiter oder schmaler werden. Tatsächlich ist es so, dass ein Betrachter die Anzeige von normalem Text exakt genauso berechnet, wie Fontura-Text. Nur erzeugt er im einen Fall die Wort-Bilder selbst, im andern Fall bekommt er sie geliefert. Fließtext lässt sich deshalb auch problemlos als Blocksatz text-align:justify, Flattersatz left oder zentriert center ausgeben.

B