Textgröße umschalten mit PHP und CSS

Beim Erstellen einer Website sollte man daran denken, dass nicht jeder Anwender unbedingt jung und bei bester Gesundheit ist sowie mit den Feinheiten seines Browsers vertraut. Ein schlauer Web-Designer sorgt dafür, dass auch ältere oder behinderte Besucher seine Sites ohne Umstände benutzen können.

Eines der wichtigsten Features ist in diesem Zusammenhang die Möglichkeit, zwischen verschiedenen Textgrößen umzuschalten. Im Normalfall wird also dem Anwender die Möglichkeit gegeben, eine größere Schriftart zu wählen, um den Text leichter lesen zu können. Die meisten Browser erlauben natürlich ohnehin eine Änderung der Schriftgröße, aber wenige Anwender kennen und nutzen diese Möglichkeit. Leicht zugängliche, intuitive Umschaltmöglichkeiten auf jeder Seite helfen diesem Problem ab.

Dieses Tutorial demonstriert, wie man einen derartigen Umschalter in seine Webseiten integriert. Dabei werden PHP und CSS verwendet.

Anmerkung: Voraussetzung für dieses Tutorium ist eine laufende Apache/PHP-Umgebung.

Zielsetzung

Bevor man seinen Code schreibt, muss man sich natürlich überlegen, wie die Größenumstellung am Ende aussehen und funktionieren soll. Jede Webseite wird eine Reihe von Kontrollknöpfen enthalten, die dem Anwender Kontrolle über drei Schriftgrößen geben: klein, mittel und groß. Jede dieser Größen entspricht einen CSS-Stylesheet, das die Regeln für die Anzeige in der passenden Größe enthält.

Wenn der Anwender eine Auswahl trifft, speichert PHP die gewählte Größe intern in einer Session-Variable und lädt dann die Seite neu. Die neue Seite liest die Variable aus und lädt das passende Stylesheet dynamisch, um die Seite in einer größeren oder kleineren Textgröße anzuzeigen.

Vorgehensweise

Erster Schritt: eine Webseite erstellen

Als erstes wird ein HTML-Dokument mit Dummy-Text erstellt. Hier ein Beispiel (Listing A):

Listing A

Entscheidend sind natürlich die Textlinks zu Beginn der HTML-Seite. Jeder Hyperlink verweist auf das Skript resize.php und übergibt mittels derURL-GET-Methode die gewünschte Größe. Das Dokument muss nun im Webserver-Verzeichnis mit einer .php-Dateiendung abgespeichert werden (beispielsweise index.php).

Zweiter Schritt: Stylesheets anlegen

Als nächstes werden Stylesheets für jede angebotene Textgröße angelegt: small.css, medium.css und large.css. small.css sieht zum Beispiel so aus:

In dieser Art könnte man nun medium.css und large.css mit Schriftgrößen von 17px und 25px anlegen. Die Stylesheets werden im gleichen Verzeichnis wie die vorhin erstellte HTML-Seite abgespeichert.

Dritter Schritt: Umschaltmechanismus programmieren

Wie vorhin schon beschrieben „weiß“ die Webseite, welches Stylesheet sie laden soll, da die Größe in einer vordefinierten Session-Variable abgelegt wird. Diese Variable wird über das Script resize.php (Listing B) kontrolliert. Das Script wird immer dann aktiviert, wenn ein Anwender auf einen der Links für das Verstellen der Größe oben auf der Seite klickt. So sieht das Listing aus:

Listing B

Das ist ganz einfach: Wenn ein Anwender eine neue Größe wählt, erhält resize.php den Wert über die GET-Methode und speichert ihn in der Variablen $_SESSION[‚textsize‘]. Dann wird der Browser wieder zu der Seite zurückgeleitet, von der er gekommen ist.