in Technik

Die unglaublichen Em & elastischen Layouts mit CSS

Dieser Beitrag ist eine freie Übersetzung des Artikels The Incredible Em & Elastic Layouts with CSS, welcher am 25. September 2007 von Jon Tan veröffentlicht wurde. Achtung, langer Beitrag!

Die unglaublichen Em & elastischen Layouts mit CSS


Vor etwa einem Jahr hat mich Ty Gossman von Stylegala gefragt, ob ich einen Artikel über elastische Layouts schreiben möchte. Das Beste was ich tun konnte, war eine schnelle Email zwischen der Arbeit schreiben. Ich habe immer gedacht, das würde reichen. Danke für die Fragen, entschuldigt mich, dass es so lange gedauert hat.

Dieser Artikel wird dich durch die Erstellung eines einfachen elastischen Layout begleiten. Du wirst lernen, was ein “em” genau ist und wie man sie berechnet, wie man ems benutzt, um einen elastischen Rahmen für Inhalt mit skalierbarem Text und Bildern, inklusive grundlegendem vertikalen Rhythmus.

Was ist ein elastisches Layout?

Ein elastisches Layout passt sich der Schriftgrösse des Besuchers an.

Genauer gesagt, eine elastische Schnittstelle passt sich der Browser-Schriftgrösse – der Standardwert liegt bei 16px – an, deren Anwender können die Grösse ändern, falls sie es wünschen. Manche Leute machen wegen der Zugänglichkeit (Accessibility) von Websites eine permanente Schriftgrössenänderung. Andere nutzen die UI Einstellungen um die Schriftgrösse zu erhöhen, wenn es erforderlich ist.

Elastische Designs nutzen em Werte für alle Elemente. Ems sind relative Grössen, geschrieben werden sie wie folgt: 1em, 0.5em, 1.5em etc. Ems können bis zu drei Dezimalstellen haben, zum Beispiel so: 1.063em “Relativ” heisst:

  1. Sie werden basierend auf der Schriftgrösse des Elternelements berechnet. Zum Beispiel, wenn ein <div> eine berechnete Schriftgrösse von 16px hat, dann erbt jedes Element innerhalb dieses Elternelements — ein Kind— die gleiche Grösse, bis sie geändert wird. Wenn die Kinder-Schriftgrösse auf 0.75em geändert wurde, wird die berechnete Schriftgrösse 0.75 × 16px = 12px sein.
  2. Wenn die Besucher die Schriftgrösse in ihren Browsern erhöhen (oder verringern), wird die gesamte Schnittstelle gestreckt (oder sie schrumpft).

Schau dir das elastische Layout Beispiel an. Verändere die Schriftgrösse, um einen Effekt zu erzielen. Es beinhaltet all die CSS- und HTML-Elemente, welche in diesem Tutorial benutzt werden.

Für andere Beispiele besuche die schönen und elastischen SimpleBits von Dan Cederholm, oder verändere die Schriftgrösse auf dieser Seite.

Elastische Schnittstellen sind flexibel und für Benutzer zugänglich und können für Designer fast genau so präzise sein wie Pixel. Layouts können präzise und schnell mit CSS erstellt werden, sobald wir die grundlegende Beziehung zwischen Schriftgrösse, Pixeln und ems erfasst haben.

Die Einführung in Em, das Elastigirl von CSS

Das em ist so stark und flexibel wie Elastigirl, es berücksichtigt nicht, was die Schriftgrösse ist, egal ob 12px, 16 oder 60, es wird immer im gleichen Verhältnis zu ihr sein.

Das em ist eine Massenheit in der Typografie. Was ist es und woher kommt sein Name? Hier ist eine kleine Geschichte:

Ein em war ursprünglich gleich zu der Grösse des Metall Blocks, der zum Schneiden eines einzelnen Buchstabens einer spezifischen Schriftart verwendet wurde. Es war in etwa vergleichbar mit der Breite von einem Großbuchstaben “M”.

Weiteres über em (in Englisch):

  1. Die erstaunliche em Einheit
  2. Em Diskussion auf Typophile

Die mit Designeraugen unter euch könnten sagen: “Warte kurz, Buchstaben brauchen nicht immer gleich viel Platz.” Ihr könntet Recht haben: Computer nutzen Kerning (hier in Englisch), um die horizontalen Leerräume zu justieren, die jeder Buchstabe auf dem Bildschirm belegt, in dem sie gleich weit und ausgewogen sind. Ursprünglich war der Metall Block so ausgerichtet oder “kerned”, damit die horizontalen Innenabstände um jeden Buchstaben dieselben waren.

Also ist ein em in CSS momentan eine vertikale Messung. Ein em misst den vertikalen Leerraum, der von jedem gebrauchten Buchstaben einer Schriftart, unabhängig vom horizontalen Platz, belegt wird.

Wenn die Schriftgrösse 16px hoch ist, dann ist 1em = 16px.

Erste Schritte

Bevor wir loslegen, ems in einem Stylesheet zu verwenden, müssen wir wissen, was die Standard-Schrift im Browser ist. Zum Glück wissen wir folgendes:

Alle populären Browser haben eine Standard-Schriftgrösse von 16px. Daher ist, mit der Standard-Browsereinstellung, 1em = 16px.

Also, bevor ein einzelner CSS Selektor geschrieben wird, hat der Browser eine 16px Standard-Schriftgrösse. Das Element <body> erbt diese Einstellung, wenn es nicht schon mit CSS anders definiert wurde. Also ist 1em = 16px, 0.5 = 8px, 10em = 160px und so weiter.

Body Schriftgrad einstellen

Einige Leute schlagen vor, die <body> Schriftgrösse entweder zu der benötigten Schriftgrösse für den Body-Text oder zum Äquivalent von 10px (0.625em oder 62,5%) zu ändern, um die Berechnung der Kind-Längen einfacher zu machen. Beide haben Recht, aber es scheint mir logischer, es bei der standardmässigen Browserschriftgrösse zu lassen und es für Kindelemente nur falls nötig zu ändern.

Also, wir wissen, dass die Body-Schriftgrösse standardmässig bei16px liegt. Wir wissen auch, dass, wenn eine Person ihre Einstellungen verändert hat, unsere elastische Schnittstelle nicht brechen wird, sich aber anpasst. Perfekt, also können wir folgendes schreiben:

body{ font-size:1em; }

Warum auch immer hat der IE hat ein Problem mit ems. Ein Ändern der Schriftgrösse von Medium (Standard-Wert) auf Large in IE 5/6 würde zu einem enormen Anstieg, stärker als erwartet, der Schriftgrösse führen. Also ist wieder ein Selektor notwendig, damit der Internet Explorer sich richtig verhält:

html{ font-size:100%; }

Der IE wird sich jetzt richtig verhalten und die Textgrösse richtig ändern, eher als in den mächtigen Sprüngen der betäubenden Pracht.

Wie bereits Patrick H. Lauke darauf hingewiesen hat, ist es eine IE-Korrektur, nicht ein Hack — es basiert nicht auf einem Browser Bug, um zu funktionieren.

Wir werden unserem <body> etwas mehr Stil geben und alles im Blickfeld zentrieren (dies ist später wichtig für unseren Inhalts-Wrapper). Unsere erste CSS-Datei endet wie folgt:

html{
font-size: 100%;
}

body{
font-size: 1em;
font-family: georgia, serif;
text-align: center;
color: #444;
background: #e6e6e6;
padding: 0;
margin: 0;
}

Formel zum Konvertieren von Pixel zu ems

Beim ersten Erstellen von elastischen Seiten findest du selbst eine Menge Rechenwege. Halte jedoch einen Taschenrechner zur Hand.

Ich bin kein Mathematiklehrer, darum brauchte ich eine Formel, die ich mir merken kann. Als Designer kenne ich die Pixel ganz genau, deshalb werde ich mit ihnen anfangen. Ich rechne, was 1px in ems ist und multipliziere das mit der Pixelgrösse, die ich brauche. Das gibt mir den entsprechenden Wert in em. Wir wissen, dass 1em immer gleich der Schriftgrösse des übergeordneten Elements ist, deshalb gilt folgendes:

1 ÷ Schriftgrösse des Elternelements × benötigter Wert in Pixel = em Wert

Für deine Lesezeichen: Pixel zu ems Konvertierungstabelle für Schriftgrössen.

Lass dich nicht von meinem Vortrag auf forumla ablenken. Elastische Schnittstellen machen Freude beim herstellen, deshalb werden wir praktisch und werden ein paar Seitenelemente erstellen.

Aufbau eines elastischen Containers: Der “Superanzug”

Um einen zentrierten Container im Beispiel zu erstellen, brauchen wir ein bisschen HTML. Da wir sehr einfallsreich sind, geben wir ihm die ID “wrap”:

<div id="wrap">…</div>

Wir wollen, dass er 740px breit ist, damit bequem ein 800x600px grosser Inhalt wie im Beispiel hinein passt. Was sind 740px in ems? Lass es uns herausfinden:

  1. Setze eine 740px Breite in ems für unseren Conatiner: Wir wissen, dass das übergeordnete Element (<body>) eine Schriftgrösse von 16px hat. Unser Kind (<div id=”wrap”>) wird sie erben. So können wir berechnen, was 1px in ems ist:

    1em = 16px. Daher: 1px = 1 ÷ 16 = 0.0625em.

    Dann multipliziere das mit 740 um die Grösse in ems zu erhalten:

    0.0625em × 740 = 46.25em

    Oder löse die ganze Rechnung in einer Formel:

    1 ÷ 16 × 740 = 46.25em

    (1 ÷ Schriftgrösse des Elternelements × benötigter Wert in Pixel = em Wert)

    Ems erlauben nur drei Dezimalstellen. Mehr ist bei Berechnungen in Ordnung, aber bevor du es in CSS schreibst, runde es auf drei Stellen nach dem Komma auf.

    Du kannst die gleiche Formel zur Berechnung der ems für jede Breite oder Höhe, die du benötigst, verwenden. Finde heraus, was 1px in ems für dieses Element ist. Multipliziere das mit dem Wert in Pixel, den du benötigst, um das em Äquivalent zu erhalten.

  2. CSS erstellen:Übernimm die Breite in ems, zentriere die Schicht im Ansichtsfenster mit Hilfe der auto left und right margins, füge einen 1px grauen Rand mit einem weissen Hintergrund und linksbündigem Text hinzu:
    #wrap{
    width: 46.25em;
    margin: 1.5em auto;
    border: 0.063em solid #ccc;
    background: #fff;
    text-align: left;
    }

Jetzt haben wir eine elastische Hülle für unsere Inhalte!

Text mit ems gestalten

Jetzt fügen wir <h1> und <p> in unseren Wrapper ein, etwa so:

<div id="wrap">

<h1> … <h1>

<p> … <p>

</div>

Während wir hier sind, könnten wir auch gerade ein paar typografische Finessen hinzufügen, wenn wir Grundlegendes und ein paar vertikale Rhythmen hinzufügen, mit allem was ems ausdrücken. Hier ist ein wenig mehr Geschichte:

Wesentliche Lektüren:

The Elements of Typographic Style applied to the Web von Richard Rutter basierend auf dem Meisterwerk von Robert Bringhurst.

Führend war traditionellerweise das Einfügen von Zeilen unterhalb von Bleizeilen des Textes. Es ist wie line-height in CSS, aber anstatt einen Leerraum unterhalb der Linie hinzuzufügen, erhöht es den Raum oberhalb und unterhalb jeder Textzeile.

Im Beispiel nutzte ich dieselben Schriftgrössen wie Richard Rutter sie in seinem aussen stehenden Kapitel über vertikale Bewegung verwendet hat, um dir das Lesen so einfach wie möglich zu machen. Die Schriftgrösse der Überschrift soll 18px gross sein. In einem Absatz wird die Schriftgrösse 12px hoch sein und eine Zeilenhöhe von 18px aufweisen. 18px wird unser Grundgerüst sein — der wichtigste Wert für unsere Schnittstelle. Alles andere wird proportional zu diesem Wert sein.

Ein Hinweis zur CSS Vererbung: Unser Content-Wrapper <div id="wrap"> hat keine festgelegte Schriftgrösse, also erbt er die 1em (16px) Schriftgrösse von seinem Elternelement <body> Alle Elemente innerhalb unseres Wrapper werden diese Schriftgrösse auch erben, es sei denn, wir sagen dem Browser etwas anderes.

  1. Setze eine 12px Schriftgröße mit 18px Zeilenhöhe und Aussenabstand (margin) für die Absätze:Wir wissen, dass unsere Absätze die Standardschriftgrösse von 1em (16px) von ihrem Elternelement <div id="wrap"> geerbt haben. Durch unsere vorherige Rechnung wissen wir bereits, dass 1px 0.0625em ist. Wir multiplizieren das ganz einfach mit 12 um den em Wert für 12px zu erhalten:

    0.0625 × 12 = 0.750em

    Oder mach die ganze Berechnung in einem Schritt mit der folgenden Formel:

    1 ÷ 16 × 12 = 0.750em
    (1 ÷ Schriftgrösse des Elternelements × benötigter Wert in Pixel = em Wert)

    Dann füg das in unser CSS ein:

    p{
    font-size: 0.750em;
    }

    Aussenabstand, Zeilenhöhe, Innenabstand etc. in ems sind alle relativ zur Schriftgröße des Elements zu dem sie gehören.

    Zur Berechnung der gewünschten Zeilenhöhe und Aussenabstände von 18px für unsere Basis machen wir folgendes:

    18 ÷ 12 = 1.5em

    Das Dividieren der gewünschten Zeilenhöhe (18px) durch die Schriftgrösse des Elements (12px) gibt uns den Wert der Zeilenhöhe in em. In diesem Beispiel ist die Zeilenhöhe 1 + die Hälfte der Schriftgrösse: 1.5em.

    Fügen wir die Zeilenhöhe und die Aussenabstände in unser CSS ein:

    p{
    font-size: 0.750em;
    line-height: 1.5em;
    margin: 1.5em;
    }

    Jetzt wir der Browser zu sich sagen: “Oh, Zeilenhöhe und -aussenabstand sind auf 1.5em definiert, also soll das 1.5 mal so viel sein wie die Schriftgrösse. Was ist schon wieder die Schriftgrösse? 12px? OK, dann werde ich die Zeilenhöhe 1.5 mit 12px multiplizieren, das gibt also 18px.” Er wird alles schneller als Dash erledigen und es rendern. Wow.

  2. Setze eine Schriftgrösse von 18px für das <h1> Element: Das <h1> erbt eine 1em (16px) hohe Schriftgrösse von seinem Elternelement, <div id="wrap"> Wir wissen also bereits von vorher, was 1px ist: 0.0625em. Wir multiplizieren das ganz einfach mit 18 um den em Wert für 18px zu erhalten:

    0.0625 × 18 = 1.125em

    Oder mach die ganze Berechnung in einem Schritt mit der folgenden Formel:

    1 ÷ 16 × 18 = 1.125em

    (1 ÷ Schriftgrösse des Elternelements × benötigter Wert in Pixel = em Wert)

    Dann füge das in unser CSS ein:

    h1{
    font-size: 1.125em;
    }

    Um unseren vertikalen vertikalen Rhythmus beizubehalten, wollen wir eine Zeilenhöhe und einen Aussenabstand von 18px. Ganz einfach: Wenn die Schriftgrösse 18px ist dann ist 18px 1em! Fügen wir die Eigenschaften in das CSS ein (und machen die Schriftgrösse leichter):

    h1{
    font-size: 1.125em;
    line-height: 1em;
    margin: 1em;
    font-weight: 300;
    }

Wir haben jetzt einen vertikalen Rhythmus! Gehen wir weiter zu den Bildern.

Sich anpassende Bilder in ems

Um den Rhythmus der Beispielseite beizubehalten, sollte die Grösse eines Bildes ein Vielfaches der Basis sein.

Unser Bild hat eine Breite und Höhe von 90px (18px × 5). Es hat rechts und unten Aussenabstände von 18px und ist im Absatz linksbündig ausgerichtet. Das ist der HTML-Code dafür:

<p>
<img src="90.jpg" alt="Clevedon Pier" /> Lorem…
</p>

Das Bild ist ein Kind des Absatzes — sein Elternteil — also wissen wir, dass das Bild eine Schriftgrösse von 12px geerbt hat. Um die Bilderbreite und -höhe zu berechnen, machen wir folgendes:

1 ÷ 12 × 90 = 7.5em

(1 ÷ Schriftgrösse des Elternelements × benötigter Wert in Pixel = em Wert)

Dann füge das in unser CSS ein:

p img{
width: 7.5em;
height: 7.5em;
}

Wir wissen bereits, was 18px in ems für den Eltern-Absatz sind, also fügen wir die Eigenschaft des Aussenabstands (und der Ausrichtung) in unser CSS ein:

p img{
width: 7.5em;
height: 7.5em;
margin: 0 1.5em 1.5em 0;
float: left;
}

Ach übrigens: Das Bild muss nicht innerhalb eines Absatzes sein, um eine semantische Bedeutung zu haben. Das wurde in diesem Fall als Beispiel dafür, wie die Vererbung funktioniert, genutzt, während wir die ems berechneten.

Jetzt haben wir einen Superanzug elastischen Container mit ein wenig elastischem Inhalt und vertikalem Rhythmus wie im Beispiel. Mit ein bisschen Glück hast du einen besseren Einblick in die Schaffung elastischer Layouts und besonders ins Konstruieren mit ems bekommen. Wir sind sind fertig, du bist die Edna Mode der Designer! Die elastische Beispielseite hat all die HTML- und CSS-Angaben, die du brauchst. Schau den Quellcode an, um es zu kopieren.

Nutzung von elastischen Designs

Einige der Vorteile der elastischen Design für Designer sind Präzision, die Kontrolle und die Zugänglichkeit. Doch manche Menschen haben in der Vergangenheit Bedenken geäussert, dass gerade die Möglichkeit den Inhalt zu erweitern, der Rand des Ansichtsfensters in grösseren Schriftgrössen problematisch werden könnte. Auch Text wird manchmal umbrochen und innerhalb des Rahmens umflossen, wenn die Schriftgrösse geändert wird, eine Kleinigkeit, aber bemerkenswert.

Bedenken wurden auch über den Verlust der Bildtreue mit erhöhter Schriftgrösse geäussert. Wie auch immer, wenn eine Person ihre Schriftgrösse ändert, sind die Chancen gut, dass sie von grösseren Bildern profitiert und Browsers werden bei einer Grössenänderung der Bilder, wenn sich ihre Grösse erhöht, den Inhalt besser darstellen. Hoffentlich werden die Browsers noch besser mit Grössenänderungen umgehen können, oder vielleicht können wird bald SVG und skalierbare Hintergrundbilder benutzen.

Die Einbindung elastischer Designs kann ein tiefes Verständnis von ems in CSS liefern. Es hat definitiv einen Platz in Toolkit eines jeden Designers oder Entwicklers, ob in Kombination mit anderen Techniken in Hybrid-Layouts oder alleine.

Und zum Schluss…

Etwaige Fehler oder Auslassungen in diesem Artikel sind meine eigenen, so lass es mich wissen, wenn ich etwas verpasst habe. Wenn du andere gute und relevante Ressourcen von anderswo kennst, bitte füge sie in den Kommentaren hinzu oder schreib mir eine Email und ich werde sie im Artikel einbinden.

Ich übernehme auch die volle Verantwortung für alle Links zu den Unglaublichen (The Incredibles) — meine zwei Söhne haben mir erlaubt, ihre Figuren für das Titelbild zu verwenden — und ich hoffe, Elastigirl nimmt es mir nicht übel, dass ich sie mit der em Einheit verglichen habe.

Referenzen und zusätzliche Lektüren

  1. Ressourcen:
    1. Elastische Layouts Beispiel (aus dem Artikel)
    2. Referenzen Tabelle von gemeinsamen Pixel Schriftgrössen und em Äquivalenten
  2. Lektüren:
    1. The amazing em unit
    2. Em discussion on Typophile
    3. The Elements of Typographic Style applied to the Web — Richard Rutter
    4. CSS2: Font size
    5. CSS2: Assigning property values, Cascading, and Inheritance
    6. CSS Layouts: The Fixed. The Fluid. The Elastic. — Mike Cherim
    7. Fixed or fluid width? Elastic! — Roger Johansson
    8. Elastic Design — A List Apart

Share a Comment

Comment

  1. Hi,

    endlich verstehe ich die ems ;-) Danke für diese Aufklärungsarbeit!

    Mir ist aufgefallen, dass man die “Formel” auch abkürzen kann.
    Statt
    1 / 16 * x
    kann man auch direkt
    x / 16
    rechnen.