Realisierung einer Schriftgrößenauswahl in Typo3

Spezielle barrierefreie Webseiten, insbesonders öffentliche, erfordern manchmal eine Schriftgrößenauswahl, um kleinere Schriften leserlicher darstellen zu können.

Eine CSS-Vorraussetzung muss dafür erfüllt sein:

Die Schriftgrößen in den Stylesheet Angaben müssen in relativen Angaben erfolgen (% oder em), ansonsten kann eine Skalierung der Schriftgröße nur umständlich erfolgen.

Sobald dieser Schritt umgesetzt ist, kann mit der Umsetzung begonnen werden.

Schritt 1

Wir erstellen einen Marker ###FONTSIZE_SELECTOR### in unserem Typo3-Template und sorgen dafür, dass das Template korrekt ausgegeben wird.

Schritt 2

Wir legen drei seperate Stylesheets mit folgenden Inhalten an:

fontsize_small.css

body{font-size: 70% !important;}

fontsize_large.css

body{font-size: 80% !important;}

fontsize_xlarge.css

body{font-size: 100% !important;}

Schritt 3

Da wir die normale Schriftgröße standardmäßig verwenden wollen, binden wir sie gleich fix als Stylesheet in Typo3 ein (Setup):

page.includeCSS{
  cssfile = fileadmin/templates/css/fontsize_normal.css
  cssfile.media = Screen
  cssfile.title = Screen_Stylesheet
  }

Achtung!
Bei der Verwendung von mehreren Stylesheets muss der Titel der eingebundenen CSS-Dateien unbedingt derselbe sein, ansonsten wird nur das erste Stylesheet verwendet.

Schritt 4

Da wir nun die Standardgröße der Schrift bereits angezeigt bekommen, müssen wir noch die Links für die Schriftgrößenauswahl implementieren. Dazu verwenden wir eine Variable fsize und übergeben die Schriftgröße bei jedem Aufruf an die aktuelle Seite.
Wir wechseln in den Typoscript Setup Code und erstellen folgenden Code:

temp.fontsize_selector = COA
temp.fontsize_selector{
 
  1 = HTML
  1.value = A   
  1.value.typolink.parameter.data = page:uid
  1.value.typolink.additionalParams = &fsize=0
  1.value.typolink.ATagParams = title="Schriftgröße: normal"

  2 < .1
  2.value = A+   
  2.value.typolink.additionalParams = &fsize=1
  2.value.typolink.ATagParams = title="Schriftgröße: groß"

  3 < .1
  3.value = A++
  3.value.typolink.additionalParams = &fsize=2
  3.value.typolink.ATagParams = title="Schriftgröße: sehr groß"
  }

Nun ersetzen wir noch den Marker ###FONTSIZE_SELECTOR### im Typoscript Setup des Templates:

temp.mainTemplate.marks.FONTSIZE_SELECTOR < temp.fontsize_selector

Schritt 5

Da man in Typo3 Übergabevariablen zuerst registrieren muss, bevor man sie verwenden kann, erledigen wir auch diesen Schritt (Setup):

config.linkVars = fsize
config.uniqueLinkVars = 1

Schritt 6

Im letzten Schritt müssen wir nur noch die Abfrage erstellen, welches Stylesheet wir denn nun laden wollen. Dazu fragen wir einfach die Übergabevariable fsize ab und überschreiben das zuvor definierte Stylesheet fontsize_normal.css mit dem gerade ausgewählten:

[globalVar = GP:fsize=0]
  //Normal
  page.includeCSS.cssfile = fileadmin/templates/css/fontsize_normal.css
  page.includeCSS.cssfile.media = Screen
  page.includeCSS.cssfile.title = Screen_Stylesheet
[globalVar = GP:fsize=1]
  //Large
  page.includeCSS.cssfile = fileadmin/templates/css/fontsize_large.css
  page.includeCSS.cssfile.media = Screen
  page.includeCSS.cssfile.title = Screen_Stylesheet
[globalVar = GP:fsize=2]
  //Extra-Large
  page.includeCSS.cssfile = fileadmin/templates/css/fontsize_xlarge.css
  page.includeCSS.cssfile.media = Screen
  page.includeCSS.cssfile.title = Screen_Stylesheet
[global]

Fertig ist unser Schriftgrößenselektor in Typo3.