Unterschiedliche Nutzer wünschen sich unterschiedliche Textgrößen. Da ist es am einfachsten, die eigene Website mit einer Möglichkeit zum Umschalten auszustatten. Wie, zeigt das Tutorium.
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.
Jetzt fehlt natürlich noch ein Baustein: eine Erkennung für die gerade gewählte Textgröße, die das passende Stylesheet lädt. Um dies zu ermöglichen, ruft man die Webseite (etwa die vorhin erstellte index.php) erneut auf und fügt die folgenden Zeilen am Anfang der Seite ein (Listing C):
Listing C
Außerdem muss das Stylesheet im Block head.../head verlinkt werden, nämlich so:
So (Listing D) sieht die jetzt komplette index.php wahrscheinlich aus:
Listing D
Es ist wohl nicht schwer zu verstehen, wie das funktioniert. Wenn die Webseite geladen wird, stellt sie die aktuelle Session wieder her, überprüft die Variable $_SESSION['textsize'], um die aktuell aktive Seitengröße zu bekommen und lädt dann dynamisch über das Element link... / das passende Stylesheet. Dadurch wird die Seite automatisch in der richtigen Größe dargestellt.
Die Verwendung von CSS und PHP unterscheidet sich etwas von der traditionellen Vorgehensweise, die eine dynamische Seitenänderung durch Javascript vorsieht. Der Vorteil durch die Verwendung von PHP liegt darin, dass man nicht darauf angewiesen ist, dass der Client Javascript zulässt. Auch muss man sich keine Workarounds für bestimmte Browser einfallen lassen, die man zwar unterstützen möchte, die aber anders auf Javascript reagieren.
URLs in diesem Artikel:
[1] = resize.php?s=small
[2] = resize.php?s=medium
[3] = resize.php?s=large