»em« nicht nur für Schriftgrößen!Vorab eine Demonstration: Betrachten Sie das Menü auf der linken Seite und verändern die Schriftgröße in Ihrem Browser. Sämtliche Elemente des Menüs skalieren mit der Schriftgröße und die Proportionen bleiben erhalten; der Text muß weder umgebrochen werden, noch fällt er unschön aus dem "Rahmen".
Dies wird ermöglicht durch die Verwendung von em - sowohl für die Schriftgröße, als auch für die Breiten- und Abstandsangaben.
em (em-quad, lautmalerisch für das »Geviert« [veralteter Ausdruck für ein Quadrat] des Buchstabens 'M' – entspricht der Gesamthöhe des Fonts inkl. Leerräumen) ist eine relative Größeneinheit und bezieht sich auf die Schriftgröße des Elements bzw. in der Definition font-size auf die Schriftgröße des Elternelements (letztlich <body> oder die Voreinstellung im Browser).
Betrachten wir zunächst font-size in einem Beispiel:
<div style="font-size:21px;"> (21px absolut)
<div style="font-size:0.9em;"> (90% = 18px)
<div style="font-size:0.9em;"> (90% ≈ 16px)
<div style="font-size:0.9em;"> (90% ≈ 15px)
<div style="font-size:0.9em;"> (90% ≈ 13px)
<div style="font-size:0.9em;"> (90% ≈ 12px) </div>
</div>
</div>
</div>
</div>
</div>
Wie man sieht, muß bei verschachtelten Elementen die Abhängigkeit von den Schriftgrößen der Elternelemente beachtet werden. Darüber hinaus kann ein Bug bei manchen Installationen des Internet Explorers unter Windows dazu führen, daß unter 0.8em formatierte Schriften mikroskopisch klein dargestellt werden. Abhilfe schafft hier, wie bei Efa - Einfach für alle nachzulesen war, die folgende Angabe:
<style type="text/css">
body {
font-size: 100.1%;
}
</style>
Welche katastrophalen Auswirkungen andere Definitionen im Internet Explorer haben können, möchte ich Ihnen - sofern Sie diesen Browser verwenden - hier demonstrieren. Ändern Sie den Schriftgrad in Ihrem IE auf 'größer' oder 'kleiner' und aktivieren Sie die nachfolgenden Schriftgrößenangaben für diese Seite:
body { font-size:1em; } (leider oft gesehen, aber sehr ungünstig)body { font-size:100%; } (verursacht in einigen Browsern Probleme)body { font-size:1.01em; } (verursacht im IE einen ähnlichen Bug wie '1em')body { font-size:100.1%; } (die empfehlenswerte Voreinstellung)Warum sollte man aber überhaupt Schriftgrößen relativ in em definieren?
Unter dem Aspekt der Barrierefreiheit spricht leider immer noch die Unfähigkeit des Internet-Explorers, absolute Schriftgrößen über das Ansicht-Menü zu skalieren, dafür.
Aber es hat auch praktische Vorteile, die leicht übersehen werden. Hierzu ein Beispiel:
<style type="text/css">
body {
font-size: 100.1%;
}
div#hauptinhalt {
font-size: 0.8em;
}
h1 {
font-size: 1.5em;
}
p {
font-size: 1.2em;
}
</style>
<div id="hauptinhalt">
<h1>Überschrift</h1>
<p>Fließtext</p>
</div>
Wenn hier viele weitere Schriftgrößen-Definitionen gemacht wurden und alle in Abängigkeit vom umschließenden div#inhalt stehen, läßt sich der gesamte Text innerhalb dieses Elementes durch nur eine einzige Änderung im CSS bei Bedarf in der Schriftgröße anpassen, wobei alle Relationen gewahrt bleiben:
div#hauptinhalt {
font-size: 1em;
}
<div id="hauptinhalt">
<h1>Überschrift</h1>
<p>Fließtext</p>
</div>
Bei in em angegebenen Schriftgrößen kann es zu Abweichungen in verschiedenen Browsern und Betriebssystemen kommen. Abhilfe schaffen meist "krumme" Werte. Auch als Anhaltspunkt für den Umstieg von px zu em mögen Ihnen die folgenden Angaben dienen, die ebenfalls Abweichungen durch Schriftgradeinstellungen kompensieren:
| Basisschriftgröße: 100.1% bei Browsereinstellung von 16px | |
|---|---|
| font-size:10px | font-size:0.63em |
| font-size:11px | font-size:0.69em |
| font-size:12px | font-size:0.75em |
| font-size:13px | font-size:0.82em |
| font-size:14px | font-size:0.88em |
| font-size:15px | font-size:0.93em |
| font-size:16px | font-size:1em |
| font-size:17px | font-size:1.06em |
| font-size:18px | font-size:1.12em |
| font-size:19px | font-size:1.19em |
| font-size:20px | font-size:1.25em |
| font-size:21px | font-size:1.32em |
| font-size:22px | font-size:1.38em |
| font-size:23px | font-size:1.44em |
| font-size:24px | font-size:1.5em |
| font-size:25px | font-size:1.56em |
| font-size:26px | font-size:1.63em |
| font-size:27px | font-size:1.69em |
| font-size:28px | font-size:1.75em |
| font-size:29px | font-size:1.82em |
| font-size:30px | font-size:1.88em |
| font-size:31px | font-size:1.94em |
| font-size:32px | font-size:2.01em |
Aber die Verwendung von em bringt, wie eingangs schon gesagt, nicht nur bei der Schriftgröße Vorteile. Hierzu ein weiteres Beispiel:
Breite=258px&Schrift=1em
Breite=258px&Schrift=2em
Hier ist die Breite der Box absolut angegeben. Die Vergrößerung der Schrift in der zweiten Box führt dazu, daß der (hier nicht umzubrechende) Text außerhalb der Box fortgesetzt wird - sollte die Box bei Ihnen auf Textbreite erweitert werden, liegt das an der fehlerhaften Darstellung Ihres Browsers (Internet Explorer?).
Natürlich werden Sie keinen Text wie hier in eine zu kleine Box setzen. Allerdings wirkt sich eine Schiftvergrößerung im Browser auf dieselbe Weise aus, was oft übersehen wird!
Im folgenden Beispiel wird nun die Breite der Box ebenfalls in em definiert:
Breite=16em&Schrift=1em
Breite=16em&Schrift=2em
Das Ergebnis sollte in allen Browsern gleich ausehen und für sich sprechen.
Natürlich setzten relative Breitenangaben in em ein flexibles Gesamtlayout voraus. Andererseits erhält man aber nur auf diese Weise ein Design, das auch bei extremen Schriftgradeinstellungen der Besucher nicht "auseinanderfällt" oder Überlappungen hat.
Damit diese Skalierung der Breiten auch im Internet-Explorer funktioniert, ist eine Schriftgrößendefinition in % für ein Elternelement erforderlich; sinnvollerweise des <body>s, um auch dem anderen oben beschrieben Bug des IE entgegenzuwirken. Im Internet Explorer ist ab Version 7 zwar die bereits seit Version 5.5 integrierte „zoom“-Funktion auch über die Browsersteuerung zugänglich, sie wurde jedoch nicht verbessert und stellt eine unausgereifte Notlösung mit unnötigem Querscrollen und Anzeigefehlern dar. Leider hat diese Funktion auch noch die Schriftgradänderung als Standardoption abgelöst, so dass der hier beschriebene Einsatz relativer Größenangaben sich nur bei umständlich zu erreichender Änderung der »Textgröße« positiv auswirken kann.
Ergänzend möchte ich noch anmerken, daß flexible Breitenangaben in % nicht diesen Zweck erfüllen, da hierdurch nur eine Abhängigkeit von der Breite des Elternelements und nicht der Schriftgröße definiert wird. Andererseits ermöglichen %-Angaben eine Anpassung an die Fenstergröße und sind daher für die "grobe" Bildschirmaufteilung sinnvoll.
Angaben in ex sollten Sie vermeiden, da diese Einheit nur als Höhe des Zeichens „x“ definiert ist und daher in einigen Browsern von der verwendeten Schriftart abhängig ist. Deshalb ist 1em nicht immer gleich 2ex, wie diese Beispielseite in Mozilla/Firefox zeigt.
Größen relativ in em anzugeben kann außer bei Schrift und Breite auch z.B. für margin, padding und border sinnvoll sein, wie dieses Beispiel zeigt. Hier habe ich alle Größen meines „3D-Menüs“ in px umgerechnet und diese - bis auf die Schriftgröße - halbiert. Das Ergebnis entspricht in den Relationen somit einer Schriftvergrößerung um 200%.
Die Anzeige variiert zwar wieder je nach den Browserfähigkeiten, das Menü ist aber durch die Umbrüche aller Linktexte sowie die Anzeige zu langer Worte bis außerhalb der Box nicht mehr ansehnlich.
(Der fehlerhaften Anzeige dieser Absätze im IE widme ich mich noch.)
Falls Sie es anfangs noch nicht getan haben, sollten Sie sich jetzt das mit em definierte Menü dieser Seite z.B. mit 125% Schriftgröße betrachten.
Wie Sie hier sehen, wächst die Breite des Menüs und der Abstand zum Inhaltsbereich mit der Schriftvergrößerung, so dass es trotz absoluter bzw. fixierter Positionierung den nebenstehenden Text nicht überlagert.
Bei einem nicht-floatenden Textbereich läßt sich ein flexibler, sich an die Schriftgröße anpassender Abstand zum Menü über eine passende margin-Angabe in em erzielen, wie dieses Beispiel zeigt:
Menü
float:left; width:8em;
Textbereich
margin-left:10em;
Ändern Sie die Schriftgröße und Sie werden sehen, daß es hier nicht nur bei einer Vergrößerung zu keiner Überlagerung kommt, sondern daß der Abstand sich darüber hinaus proportional zum Schriftgrad ändert und sich somit auch optisch der Textgröße anpasst.
Als Beispiel einer sinnvollen Verwendung von em für die Schriftgröße und sämtliche Weitenangaben einer kompletten Seite habe ich die im Original als Tabellenlayout vorliegende Startseite von SELFHTML 'tabellenfrei' mit CSS so umgesetzt, daß sie sich flexibel Schriftgradeinstellungen und Fenstergrößen anpaßt. Darüber hinaus wird das zweispaltige Layout bei kleineren Fenstern bzw. größeren Schriftgraden zugunsten besserer Lesbarkeit einspaltig angezeigt, was ein Tabellenlayout nicht leisten kann.