Artikel-Hilfsmenü
Samstag, 17. November 2018 – aktualisiert am Donnerstag, 17. Juni 2021
Schriftgröße individuell einstellbar - wichtig (auch) für Tablets und Smartphones
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
Die Schriftgröße ist ein wichtiges Kriterium – unter vielen anderen –, um Besuchern den Aufenthalt auf deiner Website möglichst angenehm zu gestalten, um die Besucher auf der Site zu halten.
Was aber ist die „richtige“ Schriftgröße? Dafür gibt es zwar allgemeine Regeln und Grundsätze, aber Geschmäcker sind eben verschieden, und ebenso das Sehvermögen. Aus dieser Erkenntnis heraus gab es vor Jahren auf jeder Website, die etwas auf Usability hielt, die Möglichkeit, die Schriftgröße individuell einzustellen.
Seit moderne Browser eine praxistaugliche Zoom-Funktionalität eingebaut haben (Strg & Plus- oder Minustaste), verschwanden die Schriftgrößen-Buttons wieder von den Websites. Vermutlich zu voreilig: Mobile Browser auf Tablets und Smartphones bieten nämlich nativ keine Möglichkeit zur Einstellung der Schriftgröße (iPhone/iPad), oder, wie im Fall von Android, nur recht versteckt.
Technisch weniger versierte Benutzer kennen häufig diese Möglichkeit gar nicht.
Ich empfehle daher, auf allen Websites (wieder) diese Funktionalität einzubauen.
DownloadMit dem Download anerkennen Sie unsere Allgemeinen Geschäftsbedingungen.
Anleitung
Der folgende HTML-Code erzeugt zwei Links "A−" und "A+". Ein Klick auf diese Links ruft die Datei resize.php auf.
<div id="styleswitcher">
<a id="smaller" href="resize.php?s=0.8">A−</a>
<a id="bigger" href="resize.php?s=1.25">A+</a>
</div>
Die Links beinhalten zudem den URL-Parameter "s" mit den Werten 0.8 bzw. 1.25. Das sind die Faktoren, um die bei jedem Klick die Schrift verkleinert bzw. vergrößert werden soll.
Mit etwas CSS können diese Links ansprechend gestaltet und positioniert werden, und sehen dann beispielsweise so aus:
A− A+
#styleswitcher {position:-webkit-sticky;position:sticky;top:0;text-align:right; z-index:5;}
#styleswitcher a {text-decoration:none;color:#000;background: #ddd; display:inline-block; padding:3px 5px;font-family:sans-serif;font-weight:bold;border:2px solid;}
#styleswitcher a:focus, #styleswitcher a:hover {text-decoration:underline;filter:invert(1);}
Die Datei resize.php:
<?php
session_start();
// Schriftgröße:
if (isset($_GET['s'])) {
if (isset($_SESSION['textsize'])) { // falls Session-Variable "textsize" bereits existiert
$basesize = $_SESSION['textsize']; // wird "textsize" als Basis für nachfolgende Berechnung verwendet
} else {
$basesize = 1; // andernfalls: Basis Textgröße 1
}
$factor = $_GET['s']; // der Vergrößerungs-/Verkleinerungsfaktor wird aus dem URL-Parameter ausgelesen
$textsize = $basesize * $factor; // und mit Basis multipliziert zur neuen Textgröße
// Jetzt noch min-/max- Schriftgröße festlegen:
if ($textsize > 2.5) {$textsize = 2.5;}
if ($textsize < .8) {$textsize = .8;}
$_SESSION['textsize'] = $textsize; // und die neue Textgröße in einem Session-Cookie speichern.
}
header('Location: ' . $_SERVER['HTTP_REFERER']); // zurück zur aufrufenden Seite
?>
Auf jeder Seite der Webpräsenz wird nun mit folgendem Code das Session-Cookie ausgelesen:
<?php
session_start();
if (isset($_SESSION['textsize'])) {
$size = $_SESSION['textsize'];
} else {
$size = 1; // Standard-Schriftgröße, falls noch kein Session-Cookie gesetzt
}
?>
Das oben ausgelesene Session-Cookie bzw. die Variable $size kann nun in einem <style>-Tag verwendet werden. Am besten für body, damit alle Schriften auf der Seite entsprechend skaliert werden.
<style>
body {font-size:<?php echo $size; ?>em;}
</style>
<!-- der folgende PHP-Code verhindert übermäßige Vergrößerung / Verkleinerung, indem er ab einem bestimmten Zoomfaktor einen der beiden Buttons ausblendet. -->
<?php
if($size > 2.4) {echo '<style>#bigger {display:none !important;}</style>';}
if($size < .9) {echo '<style>#smaller {display:none !important;}</style>';}
?>
Und das war's auch schon.
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
3 Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.
Hans-Jörg Schneider schrieb am Donnerstag, 09.01.20 18:11 Uhr:
tatsächlich sehr ärgerlich- bei Lenovo Tablets kann man tatsächlich Schriftgrößen nur in 4 stufen einstellen (hat mir Lenovo hotline bestätigt) - selbst "klein" ist zu groß
Hildegard Fuchs schrieb am Freitag, 11.06.21 09:41 Uhr:
Super Idee – vielen Dank! – so etwas hatte ich schon länger gesucht. Leider bringe ich es nicht zum Laufen. Gibt es irgendwo den kompletten Code der Musterseite zu sehen?
Fritz schrieb am Samstag, 12.06.21 12:00 Uhr:
@Hildegard Fuchs
Hab' mal einen Download der Demo eingebaut.