Mikroskopischer Text im MS IE
Überarbeitete Version vom 09.07.2003, TC
Manche Installationen des Internet Explorers unter Windows zeigen einen Bug, der die Verwendung bestimmter Methoden für relative Fontgrößen nahezu unmöglich macht. In diesem Browser verstellen sich die Voreinstellungen unter Umständen so, daß die Schriftgröße im Menü Ansicht immer wieder auf Sehr klein gesetzt wird. Wenn dieser Browser nun auf eine Seite trifft, in der die Schriftgröße mit der relativen Maßeinheit em definiert wurde, wird der Text auf befallenen Systemen unleserlich klein dargestellt.
Besonders fatal ist dieser Fehler dann, wenn in der Website die Größe für den Fließtext auf Werte unter 0.8em gesetzt wurde, um wie üblich eine Schriftgröße um 12 pt zu erreichen. Die Einstellung des Schriftgrades im Browser auf Sehr klein bewirkt eine Darstellung in ca. 40% der Standardgröße. 40% von 0.8em wiederum ergeben bei der üblichen Auflösung unter Windows von 96ppi und der Standard–Fontgröße von 16 Pixel lediglich 5 Pixel hohe Schrift. Jeder Zeichensatz braucht zu seiner korrekten Darstellung mit Ober– und Unterlängen jedoch mindestens 9 Pixel. Das Resultat sehen sie in obigem Screenshot.
Was macht diesen Fehler so besonders schlimm?
Das Problem ist beim Hersteller Microsoft schon länger bekannt, es gibt aber nur für einen Teil des Problems auch wirklich eine Lösung. Unter anderem ist es das E-Mail-Programm Eudora, aber auch der Internet Explorer selbst oder das Programm Outlook, die eine vom Benutzer eingestellte Schriftgröße immer wieder nach unten korrigieren.
Eine Beschreibung des Problems finden Sie beim Microsoft Support unter:
Font Changes Size in Internet Explorer 5 Using Eudora Pro 4.1 or 4.2, Font Size Change Is Not Saved in Internet Explorer 5 und
Font Size Settings Not Retained in Internet Explorer and Outlook Express
In unseren Tests haben wir auch Rechner gefunden, bei denen sich der Browser mit der Einstellung »Kleiner« öffnete, was lediglich eine Reduzierung der Schrift auf 60% verursachte, aber unter Umständen immer noch zu nicht mehr darstellbarem Text führen kann. Dieser Fehler wird jedoch durch einen Umstand noch verschlimmert und für den Benutzer nicht behebbar:
Wir haben dieses Verhalten auf Rechnern beobachtet, bei denen das einmalige Zurücksetzen der Schriftgröße auf »Mittel« beibehalten wurde, und von da an alle Webseiten wieder normal dargestellt wurden. Leider haben wir durch eigene Tests und Feedback von Besuchern auch Installationen gefunden, bei denen sich dieser Zustand nicht dauerhaft beheben ließ.
Bei diesen Rechnern ließ sich die Schriftgröße zwar temporär wieder auf ein normalverträgliches Maß zurücksetzen, nach dem Beenden und Neustart des Browsers oder dem Öffnen und Schließen von Eudora war die Einstellung jedoch wieder auf den falschen Wert zurückgesetzt.
Dieser Fehler trat bisher unter fast allen nur denkbaren Versionen von Microsoft Windows auf, sowohl ältere Rechner mit Windows 9x oder NT als auch neuere mit 2000 und XP zeigten das beschriebene Verhalten. Die einzige Empfehlung, die Microsoft hierzu geben kann, ist die Schriftgröße immer wieder manuell zurückzusetzen, was einem Webentwickler, der mit diesem Problem auf Anwenderseite konfrontiert wird, natürlich nicht weiterhilft.
Warum tritt dieser Fehler nicht überall auf?
Dieser Fehler kann nur bei Webseiten auftreten, in denen die Schriftgrößen in relativen Einheiten wie em oder % angegeben wurden. Bei Webseiten, die Ihre Schriftgrößen in fixen Maßeinheiten, insbesondere Pixel, definieren, tritt dieser Fehler nicht auf. Der Internet Explorer unter Windows ist aber leider als einziger aktueller Browser so programmiert, dass dieser in der Werkseinstellung einen in Pixelgrößen definierten Text nicht skalieren kann.
Die weitaus meisten Seiten, die CSS zur Formatierung von Schrift einsetzen, definieren diese aber in der Maßeinheit Pixel. Da hierdurch aber gerade für Sehbehinderte die Möglichkeit zur Schriftskalierung verloren geht, war es schon immer eine Forderung von EfA und der gängigen Standards, relative Schriftgrade anzugeben.
Es gibt zwar in den Einstellungen des Internet Explorers eine Einstellmöglichkeit, um Schriftangaben auf Webseiten generell zu ignorieren
Menü: Extras > Internetoptionen > Eingabehilfen > Schriftgradangaben auf Webseiten ignorieren
zusätzlich gibt es für Besitzer von Rädchen-Mäusen die Möglichkeit per Strg. + Rädchen vor- oder Rädchen zurückdrehen die Schrift im IE zu vergrößern oder zu verkleinern. Als Anbieter kann man jedoch nicht davon ausgehen, dass diese kleinen Tricks dem Publikum überhaupt bekannt sind.
Mögliche Workarounds
In der ursprünglichen Fassung dieses Artikels hatten wir einen möglichen Workaround beschrieben, der den Einsatz von Pixelangaben im Style Sheet und ein zusätzliches JavaScript zur Skalierung der Schriftgrößen vorsah. Dieser Ansatz wurde auf verschiedenen Mailinglisten diskutiert und mehrere Webentwickler haben in Folge eine Variante entwickelt, die rein CSS-basiert und ohne den Einsatz von JavaScript funktioniert.
Eine mögliche Variante finden Sie bei Gerhard Schöning unter dem Titel Microsoft Internet Explorer: Ein Bug bei der Anwendung relativer Schriftgrößen. Auf dieser Site finden Sie auch mehrere Testdokumente für den genannten Fehler im IE:
- * body {font-size: 100%;}
Schriftgrößen aller Elemente unterhalb body in em
Schriftgrößen aller Elemente unterhalb body in %
- * body {font-size: 1em;}
Schriftgrößen aller Elemente unterhalb body in em
Schriftgrößen aller Elemente unterhalb body in %
An gleicher Stelle ist auch ein Workaround beschrieben, der sich zur Umgehung des Fehlers bewährt hat. Die wirklich simple Lösung ist, in Ihrem Style Sheet für das body-Element einmalig die Schriftgröße 101% zu definieren. Von diesem Wert ausgehend können Sie nun alle anderen Größenangaben für Textabsätze, Überschriften und so weiter in Prozent oder em angeben, da dies im IE nun zu einer lesbaren Textgröße führt und Ihre Besucher weiterhin den Schriftgrad an ihre persönlichen Vorlieben oder Bedürfnisse anpassen können.
Code:
body {
font-size: 101%;
} Warum diese schräge Zahl?
Für den Internet Explorer würde eigentlich die Angabe
Code:
body {font-size: 100%;} reichen. Leider tritt hierdurch ein anderer Fehler in einem weiteren Browser auf: bei der Angabe 100% kann es im Opera 6 passieren, dass der Text mikroskopisch klein dargestellt wird. Ein Wert von 101% macht in allen anderen BRowsern keinen Unterschied, da diese den Wert abrunden, bringt aber Opera 6 dazu, den Text in einer lesbaren Größe darzustellen.
Es muss nicht immer 100% sein
In unseren Tests haben wir herausgefunden, dass die Werte 69%, 76%, 86%, 93% und 101% über alle Plattformen und Browsergrenzen hinweg durchgängig gleich große Schriftgrade ergeben. Wenn für Ihr individuelles Layout also ein annähernd gleiches Erscheinungsbild in den gängigsten Browsern wichtig ist, können Sie auch diese Werte als Mindestmaß für das body-Element definieren.
Warum Sie Ihre Prozente nutzen sollten
Ein weiterer unangenehmer Fehler tritt im Internet Explorer auf, wenn Sie die Schriftgröße nicht für das body-Element, sondern für den Universal-Selektor * definieren (also: * {font-size: 1em;}). Wie bei Eric Meyer beschrieben, schrumpft hier der Text wieder auf ein mikroskopisches Maß zusammen.
Und das Skript zur Schriftskalierung?
Im Zuge des Relaunches von ›Einfach für Alle‹ wurde auch das alte fontsize-Skript überarbeitet, das mittlerweile von vielen anderen Sites benutzt wird, um den Besuchern dieses Komfortmerkmal zu gönnen. Wichtige neue Features sind:
- die Zusammenarbeit mit dem Style Switcher, den Sie hier auf diesen Seiten am Ende der rechten Navigation finden,
- die Unterstützung von neuen, seit der Veröffentlichung der Version 1.0 hinzu gekommenen Browsern
- verbessertes Handling von Cookies,
- wie alles bei EfA steht auch diese Skripte unter der Open Content-Lizenz. Wenn Sie diese Skripte also für Ihre Seiten einsetzen möchten, bitten wir Sie um Beachtung der Lizenz zur freien Nutzung unveränderter Inhalte.
Download:
Der Einfachheit halber haben wir in den folgenden Archiven alle bei EfA eingesetzten JavaScripts zusammengefasst. Im Detail sind dies:
- efa_fontsize.js
das eigentliche Skript zur Schriftskalierung
- cookies.js
die "Merkfunktion" für die Einstellungen der Besucher und
- styleswitcher.js
eine angepasste Variante der bekannten AListApart-Version, die mit den fontsize- und cookie-Skripten zusammenarbeitet
Bitte beachten Sie auch, dass diese Skripte als ein freundlicher Service zur Verfügung gestellt werden und wir keine Haftung oder Support leisten.
Lesezeichen