 Schriftgröße verändern (Browserfunktionen)
Wenn sie die Größe für Texte mit absoluten Angaben festgelegt haben, können sie ihr schlechtes Gewissen ein wenig entlasten, wenn sie ihre Besucher auf die Möglichkeit hinweisen, mit aktuellen Browsern Textpassagen dennoch in größerer Schrift darzustellen.
|
|
Textgröße verändern mit Browserfunktionen
UPDATE 21.01.2011 neue Grafik für den Hinweis auf die Textgrößenveränderung
UPDATE 21.01.2011 Beispiel + Download - DHTML-Box für den Hinweis
Wie Sie sicher schon irgendwo gelesen haben, sollten Textformatierungen bisher für wichtige Textbereiche nicht in fixen Punkt- oder Pixelgrößen festgelegt werden. Ohne benutzerseitige CSS-Datei hatte der Seitenbesucher nicht mehr die Möglichkeit die Schriftgröße durch Einstellungen im Browser zu verändern. Das entspricht nicht mehr dem aktuellen Stand.
Neue Browser können heute mit absolut eingestellten Größenangaben (px, pt) recht gut umgehen.
Beim Design der Webseite konnte ich daher bei der fixen Angabe des Schriftgrads bleiben.
Offensichtlich ist diese neue Funktion noch nicht allgemein bekannt. Dabei hat der Seitenbesucher nicht nur die Opition, das auf Dauer über das Menü 'Ansicht' einzustellen. Besonders der schnelle Zugriff über Tastenfunktionen bietet sich hier an.
Ihre Besucher haben die Wahl!
Um Ihre Besucher auf diese Funktion des Browsers hinzuweisen, sollten Sie eine entsprechende Information einbinden. Meine Grafiken dürfen Sie dazu gerne herunterladen und verwenden.
Platzieren Sie einen Hinweis an geeigneter Stelle oder auf einer eigenen Seite. Auch ein jederzeit angebotener Link auf diese Information als PopUp-Window oder DHTML-Einblendung wäre eine Möglichkeit.
Hinweis mit DHTML-Box
Wo alle Welt von Barrierefreiheit im Internet redet, möchten Sie auf die Möglichkeit hinweisen die Textgröße der Seite mit Browserfunktionen zu verändern und damit leichter lesbar zu machen. Das Layout der Seiten geht dabei zwar visuell 'kaputt' aber die Lesbarkeit verbessert sich.
Hinweis als Info-Box
Diese DHTML-Box habe ich für Sie in eine Demo-Datei eingebunden die Sie als ZIP-Datei herunter laden können.
 Demo als Info-Box (DHTML) 
Demo als ZIP-Datei herunterladen 
Beispiel in Ihre Seite einbinden: Quelltext der Demo-Datei anzeigen lassen ...
- die CSS- und JavaScript-Anweisungen aus dem Head-Bereich in Ihre Seite kopieren
- den Div-Container gleich hinter dem Body-Tag in Ihre Seite kopieren
- den Grafik-Link in Ihre Seite kopieren
- beide Grafiken in den gleichen Ordner kopieren
Weitere Erklärungen und Berschreibungen zur Anpassung dieses praxisbezogenen Beispiels (Einsatz der InfoBox 02) finden Sie auf der Beispielseite
 InfoBox 02 Demo 04
Hinweis als Text + Grafik
Sie können den Hinweis auch auf einer eigenen Seite präsentieren, die Sie dan verlinken. Logischerweise sollte die Textgröße für den Hinweis entsprechend angepasst sein. Ein für Besucher mit Sehschwäche nicht lesbarer Hinweis verfehlt das Ziel.
Sollte der voreingestellte Schriftgrad zu klein sein, haben Sie neben den Einstellungen im Browser die Möglichkeit den Text mit der Strg-Taste + Mausrad zu vergrößern. Ganz praktisch, um auch kurzzeitig einen Text größer anzuzeigen.
Strg-Taste festhalten + Mausrad drehen
Das funktioniert im Mozilla Firefox, Safari, Internet Explorer und Opera
Sie dürfen die Grafik oben gerne herunterladen und verwenden (rechtsklicken + speichern)
Text Demo
Quellcode Text
Hinweis als Grafik
UPDATE 21.01.2011 neue Grafik für den Hinweis auf die Textgrößenveränderung
Eine bessere Grafik für diesen Hinweis stelle ich Ihnen nun bereit:
Sie dürfen die Grafik oben (zur Hervorhebung hier rot umrandet) gerne herunterladen und verwenden (rechtsklicken + speichern). Breite: 500 Pixel.
Grundlagen zur DHTML-InfoBox 02
Erklärungen zur DHTML-InfoBox 02 für eine Bildanzeige (Demo 04)
Werte der Textgröße auslesen
(Wenn Sie sich dafür interessieren)
In diesem Zusammenhang (für die Entwicklung eines entsprechenden JavaScripts) wollte ich die echten Werte nach einer Größenänderung auslesen. Gar nicht so einfach wie ich mir das vorgestellt hatte. Reagieren die Browser doch etweder überhaupt nicht (Wert wurde nicht ausgelesen / bzw schienen undefiniert) oder wollten in ihrem eigenen Syntax abgefragt werden.
- der eine mit 'fontSize'
- der andere mit 'font-size'
Nach langem Experimentieren habe ich nun auch eine Möglichkeit gefunden die im Browsercach aktuell gültige Eintragung für den CSS-Wert der Textgröße anzeigen zu lassen. Nach einer Größenänderung mit Strg-Taste und Scrollrad (wenn ihre Einstellungen das zulassen) wird also ein anderer Wert angezeigt werden.
Schriftgröße für P-Tags anzeigen
Die Größenangaben beziehen sich hier auf den Text innerhalb meiner Seiten beziehungeweise den Text Innerhalb von P-Tags (Default: 11px).
Schriftgröße für großen Text anzeigen
Die Größenangaben beziehen sich hier auf den fetten, großen Hinweistext oberhalb der Computermaus-Grafik (Default: 16px).
|
Home • Tipps • Schriftgröße verändern