Was ist der Wert der CSS-Ex-Einheit?

86

(Nicht zu verwechseln mit Xunit , einer beliebten .Net-Unit-Testing-Bibliothek.)

Aus Langeweile habe ich heute angefangen, Gmails DOM zu inspizieren (ja, ich war sehr gelangweilt).

Alles sah ziemlich einfach aus, bis ich eine interessante Spezifikation für die Breite bestimmter Elemente bemerkte. Die berühmten Googliten hatten eine Reihe von Tabellenspalten mit der seltenen Ex-Einheit angegeben.

width: 22ex;

Zuerst war ich ratlos ("Was ist ein Ex?"), Dann kam es mir wieder: Ich erinnere mich an etwas von vor Jahren, als ich zum ersten Mal etwas über CSS lernte. Aus der CSS3-Spezifikation :

[Die Ex-Einheit ist] gleich der verwendeten x-Höhe der ersten verfügbaren Schriftart . Die x-Höhe wird so genannt, weil sie oft gleich der Höhe des Kleinbuchstaben "x" ist. Ein 'ex' ist jedoch auch für Schriftarten definiert, die kein "x" enthalten.

Schön und gut. Aber ich habe es noch nie benutzt gesehen (geschweige denn selbst benutzt). Ich benutze ems ziemlich häufig und schätze ihren Wert, aber warum das "Ex"? Es scheint viel weniger Standard eine Messung als die em und weit weniger nützlich.

Eine der wenigen Seiten, auf denen ich dieses Thema besprochen habe, ist Stephen Poleys http://www.xs4all.nl/~sbpoley/webmatters/emex.html . Stephen macht gute Punkte, aber seine Diskussion scheint mir nicht schlüssig.

Meine Frage lautet also: Welchen Wert hat die Ex-Einheit für das Webdesign?

(Diese Frage könnte als subjektiv markiert werden, aber ich überlasse diese Entscheidung erfahreneren SO'ern als mir.)

Joel
quelle

Antworten:

121

Dies ist nützlich, wenn Sie eine Größe in Bezug auf die Höhe der Kleinbuchstaben Ihres Textes festlegen möchten. Stellen Sie sich zum Beispiel vor, Sie arbeiten an einem Design wie dem folgenden:

Alt-Text


In der typografischen Dimension des Designs hat die Höhe der Buchstaben wichtige räumliche Beziehungen zu den übrigen Elementen. Die Linien im obigen Quellbild sollen helfen, die x-Höhe des Textes hervorzuheben, aber sie zeigen auch, wo Richtlinien wären, wenn um diesen Text herum entworfen würde.

Wie Jonathan in den Kommentaren betonte, ist ex einfach die Höhenversion von em (width).

Rex M.
quelle
29
Nur um es hinzuzufügen, es ist das
Höhenäquivalent
3
@Joel Wie ist das Verhältnis zwischen der Breite von m und der Höhe von x für eine bestimmte Schriftart? Obwohl es fest ist, kann es möglicherweise sehr schwierig zu berechnen sein, da jede Schriftart ein anderes und willkürliches Verhältnis zwischen ihrem m und ihrem x hat. Wenn Sie also Elemente entwerfen, die relativ zum Typ sein sollten, anstatt das Verhältnis selbst bestimmen zu müssen, können Sie sich auf die x-Höhe verlassen, um die Dinge im Verhältnis zu halten.
Rex M
2
Ein weiterer ziemlich esoterischer Punkt ist, dass laut Mozilla Gecko Elemente mit Exes etwas genauer skalieren kann als mit Ems. Die Standardgröße eines Ems ohne Stil ist 10.06667px, während die Größe eines Ex 6px beträgt. Dies bedeutet, dass Firefox beim Skalieren von ems Teilpixel häufiger runden muss als beim Skalieren von exes.
Benrifkah
1
Obwohl dies im Allgemeinen nicht korrekt ist, kann man sich vorstellen, dass 2ex ungefähr die gleiche Größe wie 1em hat (obwohl die Höhe eines Großbuchstabens normalerweise etwas kleiner als 1em ist). In der CSS-Spezifikation heißt es sogar: "Wenn es unmöglich oder unpraktisch ist, die x-Höhe zu bestimmen, muss ein Wert von 0,5 em angenommen werden."
Natevw
20
@JonathanFingland @RexM Anders als in gedruckter Typografie, in CSS, die emEinheit ist nicht mit einer Breite messen - es misst die Höhe der Schriftart. 1 emist der berechnete font-sizeWert und font-sizegibt „die gewünschte Höhe der Glyphen“ an . Also beides emund exeine Höhe messen. ( chmisst jedoch eine Breite.)
Rory O'Kane
18

Um die Frage zu beantworten, wird eine Verwendung mit hochgestellt und tiefgestellt verwendet. Beispiel:

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}
jbs
quelle
1
Ich denke nicht, dass das wirklich hilft zu erklären, was ein "Ex" ist.
Abenddämmerung -inaktiv-
10
Die Frage ist "Welchen Wert hat die Ex-Einheit für das Webdesign?". Nicht "Was ist eine Ex-Einheit?" Joel hat sehr gute Arbeit geleistet, um eine Ex-Einheit in der ursprünglichen Frage zu definieren. Ich gebe ein praktisches Beispiel dafür, wie Sie damit einen hochgestellten Index positionieren können.
JBS
1
Gutes praktisches Beispiel, das die Frage direkt beantwortet. Gut gemacht.
Basil Bourque
2

Eine andere Sache, die Sie hier berücksichtigen sollten, ist die Skalierung Ihrer Seite, wenn ein Benutzer seine Schriftgröße erhöht oder verringert (möglicherweise mit Strg + Mausrad (Fenster)).

Ich habe sie mit .. padding-left: 2 em verwendet; Polsterung rechts: 2 em;

und ex mit Polsterung unten: 2 ex; Polsterung: 2 ex;

Verwenden Sie daher eine vertikale Maßeinheit für eine vertikal skalierende Eigenschaft und eine horizontale Maßeinheit für eine horizontal skalierende Eigenschaft.


quelle
5
Sowohl em als auch ex sind vertikale Einheiten, da sie als die Höhe von Großbuchstaben "M" bzw. Kleinbuchstaben "x" definiert sind. Sie können sowohl für vertikale als auch für horizontale Längen verwendet werden.
JacquesB
Hinzu chkommt eine horizontale Einheit, die die Breite der Nullzahl ("0") misst.
Matt F.
1

Der Wert , es in der CSS-Spezifikation zu haben , ist genau der gleiche wie der Wert, das es hat, wenn Sie das wirklich fragen.

Hier können Sie Schriftarten auf relative Größen einstellen .

Sie wissen nicht, wie groß meine Grundschrift ist. Eine gute Strategie für das Webdesign besteht daher darin, Schriftgrößen festzulegen, die eher relativ als absolut sind. das Äquivalent von "verdoppeln Sie Ihre normale Größe" oder "etwas kleiner als Ihre normale Größe" anstelle einer festen Größe wie "zehn Pixel".

AmbroseChapel
quelle
Ich stimme dem zu. Aber reicht die em-Spezifikation dafür nicht aus und ist zuverlässiger?
Joel
@JoelPotter ja, aber nur für Breiten; für Höhen exscheint das das Äquivalent zu sein.
ANeves denkt, SE ist böse
5
@ ANeves Falsch. In CSS ist ein em die Höhe einer Schriftart (ungefähr), nicht die Breite . In der Drucktypografie kam die Idee eines Em aus der Breite eines Großbuchstabens M. Aber CSS verfeinert em. Siehe Wikipedia .
Basil Bourque
2
Wenn Sie Breite wünschen, verwenden Sie das chGerät wie in einer anderen Antwort angegeben.
Basil Bourque
1

Beachten Sie, dass Begriffe wie "einfacher / doppelter Zeilenabstand" tatsächlich den Versatz zwischen zwei benachbarten Zeilen bedeuten, gemessen von em . "Doppelter Zeilenabstand" bedeutet also, dass jede Zeile eine Höhe von 2 em hat .

Wenn Sie daher einen vertikalen Abstand angeben möchten, der proportional zu "Linien" ist, verwenden Sie em. Verwenden Sie ex nur, wenn Sie die tatsächliche Höhe von Kleinbuchstaben wünschen, was, wie ich sagen darf, eine viel seltenere Instanz ist.

UPDATE: Der Webstandard ermöglicht es dem Browser, entweder 0.5em als Ex zu verwenden oder von der Schriftart abzuleiten.

Es gibt jedoch keine Möglichkeit, Informationen mit "x-height" zuverlässig in eine Schriftart (OpenType oder Webfont) einzubetten.

Daher macht die erstere Möglichkeit die Ex-Einheit überflüssig, und die letztere hat keine verlässlichen Mittel, um dies zu erreichen. Und die Tatsache, dass beides möglich ist, macht es noch weniger zuverlässig.

Daher argumentiere ich für den Wertmangel der Ex-Einheit.

Yì Yáng
quelle
Diese Frage fragt speziell nach ihrem Wert, nicht nach ihrer Bedeutung.
Matt F.