Inzwischen bieten derzeit alle modernen Browser, wie z.B. der Firefox, Opera, Safari etc. die Möglichkeit dargestellten Text auf Webseiten mit wenigen Mausklicks oder verschiedenen Handgriffen auf der Tastatur zu skalieren. Doch nicht jeder Internetnutzer kennt diese Funktionen der Schriftskalierung, geschweige er macht davon Gebrauch.

Mit Hilfe der Einbindung von einigen Buttons/Links in das Frontend der Website kann man diese Funktion der Schriftskalierung Jedermann und auch den nicht Internet Affinen Menschen zugänglich machen (Stichwort: „Barrierefreiheit“).

Für TYPO3 gibt es zahlreiche Extensions, wie z.B. den „Font Resizer“, „EfA Font Size“ oder „Dynamic Fontsize“. Allerdings habe diese Erweiterungen alle den Nachteil, dass diese auf Java Script basieren. Ist also Java Script im Browser ausgeschaltet, dann funktioniert auch die dynamische Schriftskalierung nicht.

Abhilfe schafft hier mein PHP-Beispiel, welches ohne Java Script auskommt und auch mit sämtlichen anderen installierten TYPO3-Extensions, u.a. mit „tt_news“ (Die Fehlermeldung „Keine news_id übergeben“ gehört nun der Vergangenheit an) kompatibel ist.

Schritt 1 – Buttons erstellen (optional):

Ihr überlegt euch, ob Textlinks oder grafische Buttons für die Skalierung zum Einsatz kommen soll. Es gibt folgende drei Zustände „Normale Schriftgröße“ (button_normal.gif), „Vergrößerte Schrift“ (button_mittel.gif) und „Maximale Schriftgröße“ (button_gross.gif), für die Textlinks oder Icons erstellt werden müssen.

Schritt 2 – PHP Datei erstellen:

Nun muss eine PHP Datei „fileadmin/switch.php“ erstellt werden, die folgende Zeilen Quelltext beinhaltet:

<?php
$flags[] = '<a href="'.$_SERVER['REQUEST_URI'].'?typo=0&amp;F=0" target="_top"><img title="Normale Schriftgröße" src="fileadmin/button_normal.gif" border="0" alt="Normale Schriftgröße" /></a>';
$flags[] = '<a href="'.$_SERVER['REQUEST_URI'].'?typo=1&amp;F=1" target="_top"><img title="Vergrößerte Schrift" src="fileadmin/button_mittel.gif" border="0" alt="Vergrößerte Schrift" /></a> ';
$flags[] = '<a href="'.$_SERVER['REQUEST_URI'].'?typo=2&amp;F=2" target="_top"><img title="Maximale Schriftgröße" src="fileadmin/button_gross.gif" border="0" alt="Maximale Schriftgröße" /></a>';
$content = implode("",$flags);
?>

Schritt 3 – CSS Dateien erstellen:

Für jeden der drei Schriftzustände (siehe Schritt 2) muss nun eine seperate CSS-Datei erstellt werden.

Für die Standardansicht („Normale Schriftgröße“) erstellt ihr die CSS-Datei „fileadmin/normal.css“ mit beispielsweise folgendem Inhalt:

body {
font-size: 1em;
}

Für die vergrößerte Ansicht („Vergrößerte Schrift“) erstellt ihr die CSS-Datei „fileadmin/vergroessert.css“ mit beispielsweise folgendem Inhalt:

body {
font-size: 1.5em;
}

Für die maximal vergrößerte Ansicht („Maximale Schriftgröße“) erstellt ihr die CSS-Datei „fileadmin/maximal.css“ mit beispielsweise folgendem Inhalt:

body {
font-size: 2em;
}

Schritt 4 – Template:

Damit wir später in TYPO3 via TypoScript auf aunsere Schriftskalierung zugreifen können, müssen wir einen Marker in unser Template setzen, der folgendermaßen aussehen könnte:

[...]
<div id="schrift_skalierung">###SKALIERUNG###</div>
[...]

Schritt 5 – Ein wenig TypoScript:

Im Backend von TYPO3 müsst ihr nun unter „Setup“ eures Templates folgendes eingeben:

[...]
config.linkVars = F
 
###SCHRIFTVERGROESSERUNG START

#PHP-Skript in das Frontend an dem entsprechenden Marker einsetzen
temp.skalierung = COA
temp.skalierung {
	1 = PHP_SCRIPT
	1.file = fileadmin/switch.php
 
}
 
#Einbinden der CSS-Datei für die Standardansicht
[globalVar = GP:F=0]
page.includeCSS {
	file1 = fileadmin/normal.css
	file1.title = Standardansicht
	file1.media = screen
}
[END]
 
#Einbinden der CSS-Datei für die vergrößerte Ansicht
[globalVar = GP:F=1]
page.includeCSS {
	file2 = fileadmin/vergroessert.css
	file2.title = Vergrößerte Ansicht
        file2.media = screen
}
[END]
 
#Einbinden der CSS-Datei für die maximale Ansicht
[globalVar = GP:F=2]
page.includeCSS {
	file3 = fileadmin/maximal.css
	file3.title = Maximale Ansicht
	file3.media = screen
}
[END]
 
###SCHRIFTVERGROESSERUNG ENDE
[...]

Kommen weitere CSS-Dateien auf eurer Website zum Einsatz, dann denkt an die Hierarchie-Reihenfolge. D.h. weitere CSS-Dateien müssen folgedenmaßen eingebunden werden, da die oben angezeigten sonst überschrieben werden.

[...]
###SCHRIFTVERGROESSERUNG ENDE
page.includeCSS.file4 = fileadmin/style.css
page.includeCSS.file5 = fileadmin/print.css
[...]