Dynamische Schriftgröße mit PHP und CSS

Die richtige Schriftgröße

… gibt es nicht.

Warum nicht, werden Sie sich jetzt vielleicht fragen. Die Antwort ist einfach - was für den einen richtig ist, ist für den anderen falsch.

Eine Besonderheit bei Webseiten ist die Tatsache, dass der Webautor in den wenigsten Fällen weiß, wo und wie seine Seiten angezeigt werden. Was auf dem heimischen 15" TFT mit 1024x768 Pixeln Auflösung noch schön und übersichtlich aussieht, kann auf einem 21" Monitor mit einer höheren Auflösung ein einziges Gewusel mit viel zu kleiner Schrift und zu langen Texten werden. Auf einem Notebook mit 14" TFT und 800x600 Pixeln passen dagegen vielleicht nur ein paar Wörter auf eine Zeile, die noch dazu viel zu groß wirken.

Das Ausgabegerät ist also wichtig. Noch wichtiger ist jedoch der Benutzer vor dem Gerät. Auch wenn ich mit meinen 31 Jahren noch ziemlich gute Augen habe und keine Brille brauche, so frage ich mich manchmal, wie gut die Augen der Webautoren sein müssen, die Webseiten mit stellenweise nur 9 oder 8 Pixel hoher Schrift erstellen. Vielleicht können sie dies ja wirklich gut lesen, wahrscheinlich kennen sie aber einfach nur ihre eigenen Texte schon so gut, dass sie diese nicht mehr selber lesen müssen. Auf jeden Fall wird es viele Leute geben, die mit diesen Winzig-Schriften ihre Probleme haben. Wenn über die Zugänglichkeit (Accessibility) von Webseiten gesprochen wird, so betrifft dies nicht nur Menschen mit schweren Behinderungen, wie Blindheit, sondern auch die ganz »normale« mehr oder weniger starke Sehschwäche. Was der eine auf dem Monitor noch gut entziffern kann, sieht für den anderen wie der Stein von Rosetta aus.

Lange Rede, kurzer Sinn. Es gibt keine Schriftgröße für Webseiten, die es jedem Recht macht. Was können wir also tun?

Lösungsansätze

Die einfachste Lösung ist, dem Anwender die Wahl der Schriftgröße zu überlassen. Viele Browser bieten die Möglichkeit, die Standardschriftgröße einzustellen. Diese bekommt der Besucher angezeigt, wenn wir in unserem Stylesheet entweder keine Schriftgröße angeben oder font-size auf „1em“ bzw. „100%“ setzen. Damit das optische Bild stimmt, können wir Überschriften etwas größer und Anmerkungen ein wenig kleiner formatieren und schon ist die Welt in Ordnung - oder doch nicht?

Mal ehrlich, wie viele Leute kennen Sie, die von dieser Möglichkeit wissen? Ich denke kaum, dass ein Großteil der Internetnutzer die Standardschriftgröße im Browser einstellen kann. Noch dazu wird es einem im häufig verwendeten Internet Explorer nicht gerade leicht gemacht. Ändern wir also nichts an der Schriftgröße, wird bei den meisten Benutzern die Schrift mit 16 Pixeln angezeigt, da dies normalerweise die Voreinstellung bei Browsern ist.

Halb so wild, werden Sie vielleicht sagen, 16 Pixel sind doch nicht schlecht. Bei einer Schriftart mit Serifen (bspw. Times New Roman, Georgia) gebe ich Ihnen sogar Recht. Serifen lassen sich auf dem Bildschirm wegen der geringen Auflösung jedoch schlecht darstellen, weshalb diese Schriftfamilie dort nicht unbedingt gut lesbar ist. Aus diesem Grund werden bei Webseiten auch meist serifenlose Schriftarten (bspw. Arial, Verdana, Helvetica) verwendet. Diese Schriftfamilie wirkt aber immer etwas größer, weshalb 16 Pixel bei den üblichen Schriftarten ungünstig sind. Gerade bei Arial und Verdana erscheinen die Buchstaben zu dünn und stören das Schriftbild und den Lesefluss.

Vergleich verschiedener Schriften

Auf meinen Webseiten nehme ich für Fließtext normalerweise 0.95em. Das ergibt ohne Änderungen am Browser eine 15 Pixel große Schrift, die für viele gut lesbar sein sollte – leider aber nicht für alle. Zwar erlauben die meisten Browser, die Schriftgröße oder die ganze Webseite über das Menü zu ändern, allerdings gibt es auch dort wieder einen Haken. Viele Benutzer werden von dieser Möglichkeit genauso wenig wissen, wie von dem schon besprochenen Einstellen der Standardschriftgröße und auch hier macht der Internet Explorer wieder keine gute Figur, da er diese Einstellung nur in 5 groben Schritten ermöglicht.

Wie Sie sehen, ist keine dieser Lösungen wirklich zufrieden stellend. Kommen wir daher zum schon angesprochenen Lösungsansatz mit PHP.

Schriftgröße mit PHP ändern

Auch wenn es etwas merkwürdig klingt, mit PHP lässt sich das Problem relativ einfach und elegant lösen. Dafür muss Ihr Provider zwar PHP unterstützen, die Lösung selber lässt sich dann aber auf all Ihre Seiten anwenden – also auch auf statische (X)HTML-Seiten. Voraussetzung ist, dass der Benutzer mindestens Session-Cookies zulässt und der Browser CSS-Level1 versteht. Des Weiteren ist wichtig, dass Sie in Ihren Stylesheets für alle Schriftgrößen immer relative Einheiten wie 'em', '%', oder 'ex' angeben. Bei absoluten Einheiten wie 'px' oder 'pt' lässt sich die Schriftgröße nicht global ändern.

Bei der hier beschriebenen Möglichkeit, wird für das Element HTML die Schriftgröße in Prozent gesetzt. Als Ausgangsschriftgröße nehmen wir 100.01%, da es in Opera 6 einen Bug bei font-size:100%; gibt. Der Benutzer kann die Schrift in 10%-Schritten vergrößern oder verkleinern. Da alle anderen Elemente dem Element HTML untergeordnet sind, erben sie die dafür gesetzte Schriftgröße. Definieren wir jetzt im Stylesheet bspw. für eine Überschrift H1 die Regel font-size:120%; oder font-size:1.2em; und der Benutzer hat eine Schriftgröße von 90% im Browser eingestellt, resultieren daraus ca. 110% für das Element H1.

Der im Folgenden beschriebene Lösungsansatz besteht aus drei Teilen. Im ersten Teil (Listing 1) wird die Schriftgröße geändert und in einem Cookie (eigentlich zwei) gespeichert. Dazu wertet das Script fontsize.inc.php den Parameter font aus, der drei mögliche Werten annehmen kann: dec zum Verkleinern, inc zum Vergrößern und base zum Zurücksetzen auf die ursprüngliche Schriftgröße.

→ Listing 1: fontsize.inc.php

Was passiert in diesem Script? Im ersten Abschnitt wird ein evtl. schon gesetzter Cookie ausgelesen. Ist entweder der Session-Cookie fontsize oder der dauerhafte Cookie fontsizeR vorhanden, wird die Basisschriftgröße auf den ausgelesenen Wert gesetzt. Ist keiner von beiden gesetzt, wird als Schriftgröße 100.01% angenommen.

Als Nächstes wird getestet, ob der Parameter font in der URL übergeben wurde. Falls ja, werden je nach gesetztem Wert für font, von $fontsize 10% abgezogen, dazu addiert oder $fontsize wird wieder auf den Ausgangswert von 100.01% gesetzt. Als minimale Schriftgröße wird 50% und als maximale 200% zugelassen.

Danach wird versucht, die beiden Cookies mit der errechneten Schriftgröße zu setzen. Den Cookie fontsizeR versehen wir mit einer Lebensdauer von 365 Tagen. Erlaubt der Benutzer solche Cookies, dann bekommt er bei einem erneuten Besuch innerhalb der 365 Tage automatisch seine eingestellte Schriftgröße. Da dies nicht alle Benutzer zulassen, setzen wir zusätzlich noch einen in den meisten Fällen erlaubten Session-Cookie, der beim Schließen des Browsers jedoch automatisch gelöscht wird.

Die Hilfsfunktion get_fontsize_link dient dem einfachen Erstellen der Links für das Ändern der Schriftgröße. Diese werden aus den aktuellen Request-Parametern der Seite plus dem Parameter font zusammengesetzt. Das Einbinden in ein PHP-Dokument könnte dann bspw. so aussehen:

<p>
Schrift: 
<?php print(get_fontsize_link('dec', 'verkleinern')); ?> -
<?php print(get_fontsize_link('base', 'zurücksetzen')); ?> -
<?php print(get_fontsize_link('inc', 'vergrößern')); ?>
</p>

Der zweite Teil ist das PHP-Stylesheet fontsize.css.php (Listing 2), welches dem Browser die jeweils aktuelle Schriftgröße liefert.

→ Listing 2: fontsize.css.php

Am Anfang des Scripts senden wir einen Header, der dem Browser den Mime-Type und den verwendeten Zeichensatz mitteilt.

Anschließend wird das Zwischenspeichern der Seite im Browser und evtl. zwischengeschalteten Proxies verhindert, damit der Browser diese Datei bei jedem Seitenabruf neu lädt und Änderungen der Schriftgröße sofort sichtbar werden (siehe »Zwischenspeichern verboten«).

Im nächsten Abschnitt wird ein gesetzter Cookie ausgelesen bzw. der Standardwert 100.01% angenommen.

Schließlich wird eine einfache CSS-Regel ausgegeben, welche die Schriftgröße für das Element HTML setzt. An dieser Schriftgröße richten sich dann alle untergeordneten Elemente in dem (X)HTML-Dokument aus.

Die Datei fontsize.css.php wird folgendermaßen in das (X)HTML- oder PHP-Dokument eingebunden:

<head>
...
<link rel="stylesheet" type="text/css" href="fontsize.css.php" />
...
</head>

Wenn Ihre Dokumente aus PHP-Dateien bestehen, gehen Sie folgendermaßen vor: Sie includieren die Datei fontsize.inc.php in Ihrem Dokument, setzen wie oben beschrieben die Links zum Ändern der Schriftgröße und binden im HTML-Teil das Stylesheet fontsize.css.php ein. Ein einfaches Beispiel sieht so aus:

<?php
  include('fontsize.inc.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Schriftgröße testen</title>
  <link rel="stylesheet" type="text/css" href="fontsize.css.php" />
</head>
<body>
  <p>
    Schrift: 
    <?php print(get_fontsize_link('dec', 'verkleinern')); ?> -
    <?php print(get_fontsize_link('base', 'zurücksetzen')); ?> -
    <?php print(get_fontsize_link('inc', 'vergrößern')); ?>
  </p>
  <p>Lorem ipsum dolor sit amet, …</p>
</body>
</html>

→ Listing 3: beispiel.php

→ Schriftgrößenänderung mit beispiel.php testen

Kommen wir nun noch zu Teil drei, der Variante für statische (X)HTML-Dateien. Für diese übernimmt das Script setfont.php (Listing 4) das Ändern der Schriftgröße.

→ Listing 4: setfont.php

Als Erstes wird in setfont.php das Script fontsize.inc.php includiert, in welchem die Schriftgröße geändert wird.

Danach wird sofort wieder auf die aufrufende (X)HTML-Datei umgeleitet. Dies kann auf zwei Arten geschehen. Entweder übergeben Sie im Parameter 'uri' den relativen Pfad des aktuellen (X)HTML-Dokuments oder Sie lassen den Parameter weg und verlassen sich darauf, dass der Browser einen Referer mitsendet. Letzteres sollte zwar meist der Fall sein, jedoch ist diese Lösung nicht 100%ig sicher, da Firewalls, Proxies oder Browsereinstellungen das Mitsenden des Referers verhindern können.

Ein einfaches XHTML-Dokument sieht dann so aus:

→ Listing 5: beispiel.html

→ Schriftgrößenänderung mit beispiel.html testen

So können Sie ohne viel Aufwand auch Ihre statischen (X)HTML-Dateien mit variablen Schriftgrößen anzeigen lassen.

Damit unterschiedliche Schriftgrößen das Layout nicht sprengen, sollten Sie auch für Größenangaben von Menüs oder Ähnlichem relative Schriftgrößen angeben. Anstatt also dem DIV-Block für das Menü eine Breite von '150px' zu geben, sollten sie lieber '9em' angeben. Damit skaliert das Layout mit der Schriftgröße - ein wichtiger Schritt zum so genannten »Liquid Design«.

Live können Sie dies auf der Webseite www.ego4u.de sehen. Zwar kann beim Verkleinern oder Vergrößern das Layout ebenfalls etwas verschoben werden, es liegt dann aber im Ermessen des Benutzers, eine für ihn optimale Schrift- und Fenstergröße zu wählen.

Fazit

Mit der hier vorgestellten Lösung, ermöglichen Sie es Ihren Besuchern, ohne großen Aufwand die Schriftgröße Ihrer Webseiten selbst zu bestimmen. Obwohl es sich um eine PHP-Lösung handelt und somit PHP auf Ihrem Webspace ausführbar sein muss, lässt sich die Methode auch leicht auf statische (X)HTML-Dateien anwenden.

Die Scripte sind natürlich noch ausbaufähig und einige Fehlerüberprüfungen könnten noch ausführlicher sein. Sie können sie jedoch leicht an Ihre Bedürfnisse anpassen oder auch unverändert übernehmen und Ihre Webseiten damit noch attraktiver machen.

Anhang

Quellcode

→ Quellcode zum Artikel

Zwischenspeichern verboten

Ein mittelgroßes Problem bei dieser Art dynamischen Seiten ist es sicherzustellen, dass das Script auch wirklich ausgeführt und der vom Script erzeugte Inhalt im Browser angezeigt wird. Da Browser und zwischengeschaltete Proxies Webseiten gerne eine gewisse Zeit zwischenspeichern, müssen wir mittels einiger HTTP-Header das Caching der Seiten beim Setzen der Schriftgröße verbieten. Indem wir 'Expires:' auf ein Datum in der Vergangenheit und 'Last-Modified:' auf das aktuelle Datum setzen, verhindern wir in den meisten Browsern das Zwischenspeichern der Seiten. Der Header 'Cache-Control: no-store' sorgt dafür, dass Proxies die Seite ebenfalls nicht speichern. Zu guter Letzt setzen wir aus Gründen der Kompatibilität zu HTTP/1.0 noch den Header 'Pragma: no-cache'.

header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
header('Cache-Control: no-store');
header('Pragma: no-cache');

Ein Problem kann auftreten, wenn Ihr Script oder der Webserver einen ETag im Header sendet. Dieser ETag ist eine ID, die Ihr Dokument eindeutig identifiziert. Fordert ein moderner Browser ein mit einem ETag versehenes Dokument erneut an, sendet er die letzte ETag-ID in der Anfrage im Header 'If-None-Match' mit. Stellt der Webserver fest, dass sich die ID für das Dokument nicht geändert hat, schickt er statt des Dokuments nur den Statuscode '304 Not Modified' zurück und der Browser zeigt das alte Dokument an.

Um das zu umgehen, muss das Dokument entweder bei jedem Aufruf einen anderen Inhalt haben (so wie in der fontsize.css.php durch einen zufälligen Kommentar) oder wir verhindern das Senden des ETags. Wenn Sie z.B. das Package HTTP_Compress von PEAR verwenden, erreichen Sie dies, indem Sie in der Methode 'output' den zweiten Parameter auf FALSE setzen.

HTTP_Compress::output(TRUE, FALSE);

Quellen

• Cascading Style Sheets, level 2
• RFC 2616 - Hypertext Transfer Protocol – HTTP/1.1
• PHP: Hypertext Preprocessor
• PEAR - PHP Extension and Application Repository
• de.comp.lang.php.* FAQ
• Verschiedene Artikel über Webentwicklung von Michael Jendryschik
• Tools und Artikel von Christoph Schneegans
• CSS-Technik: Ressourcen | Skripte | Tutorials