[html] Maßeinheit "em"?

byte_head · 21. Februar 2007

Hi,

ich schaue mir gerade ein Stylesheet an und stoße dauernd auf die Einheit "em".
Wieviel pixel usw. sind das?

Laut Wikipedia ist ein "em" 10^18m oder so, wie groß das ist brauche ich euch ja nicht erzählen, jedenfalls viel zu groß.

Danke schonmal, byte

Tankred · 21. Februar 2007

1 em ist keine fixe, sondern eine relative Größe. Das in Pixel zu "übersetzen", wäre daher kontraproduktiv.

Ein Beispiel, warum "em" relativ ist:

"em" ist immer zum Elternelement relativ groß, d.h. in diesen zwei Beispielen ist der Wert "em" identisch, die Schrift aber unterschiedlich groß:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
	font-family: "Courier New", Courier, monospace;
	font-size: 2px;
}
.Stil1 {
	font-family: "Courier New", Courier, monospace;
	font-size: 16em;
}
-->
</style>
</head>

<body>
<span class="Stil1">Ich bin ein Text.</span> 
</body>
</html>

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
	font-family: "Courier New", Courier, monospace;
	font-size: 20px;
}
.Stil1 {
	font-family: "Courier New", Courier, monospace;
	font-size: 16em;
}
-->
</style>
</head>

<body>
<span class="Stil1">Ich bin ein Text.</span> 
</body>
</html>

Das liegt am Elternelement "body", das unterschiedliche Werte aufweist.

byte_head · 21. Februar 2007

Es ist spät, daher meine blöde Frage.

Wieso nimmt man so eine komplizierte nicht richtig definierte Einheit?

Tankred · 21. Februar 2007

Naja, "richtig" ist eine subjektive Einheit.

Lass es mich so sagen: "em" ist als eine relative Einheit die richtige Einheit, weil Menschen und ihre Umgebungen unterschiedlich sind.

Genauer kannst Du das hier durchlesen:

http://www.1ngo.de/web/em.html

Und "blöd" ist Deine Frage nicht. Blöd wäre nur, wenn man sich nicht damit beschäftigt, obwohl man sich mit Webdesign Mühe geben will.

MarcDK · 21. Februar 2007

Da steht es doch:

em (em-quad, lautmalerisch für [die Breite des Buchstabens] 'M' - heute universeller definiert als die Höhe des Fonts)

Das brauch man für dynamische Layouts wo man die die Schriftgröße anpassen kann und die Abstände bleiben in Relation immer gleich groß.

byte_head · 21. Februar 2007

Wenn ich also meine font-size ändere wächst auch "em" proportional an?

Tankred · 21. Februar 2007

Kommt drauf an, wo "font-size" und wo "em" steht bzw. wo Du welche Einheit veränderst.

byte_head · 21. Februar 2007

Mit html und PHP kam ich ja bis jetzt ganz gut zurande, aber dieses CSS treibt mich sicher aber langsam in den Wahnsinn...

Bei einem Layout wo die Navigation mit <ul> und <li> realisiert wird, gibt es im Beispiel nicht dieses Rauten Symbol vorm Link, aber wenn ich <li> anwende habe ich das immer da.

Kann mir jemand sagen wie ich das wegbekomme?

ghorst · 21. Februar 2007

bitte, bitte tut der welt einen gefallen und verwendet pt anstellen von px. dann werden die schriften auf die _richtig_ größe nämlich der, die der user in seinem dpi-werten angeben hat, dargestellt. das ist natürlich unter windows unwichtig, weil sich ms eine scheiß darum kümmert, dass schriftgrößen in typographischen punkten und damit unabhängig von der auflösung angegeben werden...

Tankred · 21. Februar 2007

Hm... ich dachte immer, dass "em" der userfreundlichste Wert sei. Wieso sollte ich dem User die Schriftgröße vorgeben?

Adagio · 21. Februar 2007

ghorst schrieb:
bitte, bitte tut der welt einen gefallen und verwendet pt anstellen von px. dann werden die schriften auf die _richtige_ größe nämlich der, die der user in seinem dpi-werten angeben hat, dargestellt. das ist natürlich unter windows unwichtig, weil sich ms eine scheiß darum kümmert, dass schriftgrößen in typographischen punkten und damit unabhängig von der auflösung angegeben werden...

Murks. pt als Einheit ist einzig und allein für den Druck geeignet, aber nicht zur Darstellung auf dem Bildschirm. Hier sind px oder halt noch besser em eher sinnvoll.

http://www.dciwam.de/faq/gute-websites/einheit-pt

ghorst · 21. Februar 2007

@Adagio der text beschreibt eigentlich exakt, warum man pt nutzen sollte .. er schreibt: pt ist von der realen größe des ausgabemediums abhängig. das sich windows nicht um die reale größe schert, ist hier das problem oder eigentlich auch nicht, weil es da de facto keinen unterschied macht, ob man px oder pt benutzt. bei anderen system, die sich genau um diese reale größe kümmern, ist aus genau den von dem autor erwähnten gründen die ausgabe per pt wesentlich nutzerfreundlicher, weil man dann sogar auf einem hochauflösenden system noch eine chance hat, die schrift zu lesen.

ghorst · 21. Februar 2007

Tankred schrieb:
Hm... ich dachte immer, dass "em" der userfreundlichste Wert sei. Wieso sollte ich dem User die Schriftgröße vorgeben?

das ist mit sicherheit das beste. nur wenn doch mal in die not gerät und etwas exakt angeben will, halte ich pt für die wesentlich bessere variante als px.

MarcDK · 21. Februar 2007

em trifft aber nur auf den Font INNERHALB des HTML-Dokumentes zu. Das System wird ignoriert. Ich habe meinen Blog mal eben gerade an dieses Wert angepasst. Die Breite der Beiträge wird nun durch einen em Wert angegeben. D.h. wenn man jetzt im Firefox STRG gedrückt hält und mit dem Mausrad hoch und runter scrollt, dann müssten die Beiträge dynamisch breiter werden. EDIT: Funktioniert nun auch wunderbar im IE 7.

Das funktioniert weil em nur relativ zu der Schriftgröße im CSS-Code gesehen wird und nicht etwas das, was im OS eingestellt ist.

Zur PT vs PX Geschichte: px ist immer pt vorzuziehen weil man nie weiß, wie der Browser reagiert. pt kommt aus dem Druck und hat bei Webseiten nichts verloren.

Tankred · 21. Februar 2007

Moment, moment, jetzt komme ich nicht mehr ganz mit...

em trifft aber nur auf den Font INNERHALB des HTML-Dokumentes zu. Das System wird ignoriert.

Eben das ist doch nicht korrekt, oder irre ich mich nun!?

"em" ist ein relativer Wert, der immer relativ zum Elternelement ist. Gibt es KEIN Elternelement, dann wird die Einstellung des Users bezüglich der Schriftgröße im Browser als "1em" interpretiert. Alle anderen em-Angaben sind dann relativ zu diesem Wert.

Ausnahmen gäbe es nur, wenn man ein Elternelement innerhalb des CSS-Code mit einem absoluten Wert versieht. Dann hat man aber den Nutzen relativer Elemente nicht ganz verstanden, oder!?

MarcDK · 21. Februar 2007

ok, ich weiß nicht, wie es sich verhält, wenn kein Elternelement die Fontgröße angibt.

Tankred · 21. Februar 2007

Eben dann müsste meines Erachtens die höchste Ebene greifen, nämlich die Usereinstellung im Browser. Und genau DAS ist ja der Vorteil, der die Verwendung absoluter Werte inklusive "pt" unsinnig werden lässt. Der User stellt seinen Browser bei Bedarf auf die für ihn angenehme Schriftgröße ein und das ist dann die Fließschriftgröße. Alle anderen Werte sind dann relativ zu dieser Schriftgröße und so kann man eine HTML-Seite bequem und relativ zu jedem Besucher formatieren:

h1 {
font-size:1.6em;
}

h2 {
font-size:1.4em;
}

h3 {
font-size:1.2em;
}

Und so weiter. Egal welche Schriftgröße 1em ist, die Formatierung des Textes bleibt dadurch immer erhalten und passt sich somit an die Lesegewohnheiten des Besuchers an.

MarcDK · 21. Februar 2007

Und das coole ist ja, wie ich oben beschrieben habe, dass em nicht nur für Text sondern auch für alles andere benutzt werden kann so dass sich ein Layout dynamisch an die Schriftgröße anpasst. Denn was bringt mir der größere Font wenn die Breite mit 500px angegeben ist und nicht mit sagen wir 33em? Aber die Schriftgröße des Systems wird ignoriert sondern eben nur die im Browser eingestellte Standardgröße was ja Browser unabhängig ist und nicht vom OS. Also war das ja nicht falsch was ich oben sagte

Keita · 21. Februar 2007

Point (pt) ist wie Pica (pc), Milli- und Zentimeter (mm, cm) sowie Zoll (in) ein absolutes Maß und ist für den Einsatz bei Screenmedien denkbar ungeeignet, da es immer Abhängig von der Auflösung ist.
Die anderen Einheiten em, ex und px sind hingegen relativ und sind daher für Screenmedien deutlich vorzuziehen, wobei px eine Sonderstellung einnimmt, da diese Einheit abhängig vom Darstellungsmedium ist.

Es gibt immer ein Element, welches eine Schriftgröße vorgibt, entweder explizit durch Zuweisung der font-size-Eigenschaft oder implizit durch die Vorgaben des Browsers, daher stellt sich die Frage nach der Anwendbarkeit von relativen Maßangaben in der Praxis nicht.

greetings, Keita

Tankred · 21. Februar 2007

@MarcDK: Du meinst sicher "vom Browser abhängig", nicht "unabhängig".

Da haben wir einfach verschiedenartige Definitionen. Wichtig sind für mich zwei Unterscheidungen:

1. Ich zwinge dem User die Schriftgröße auf (zu sehen bei vielen Flash-Seiten *Heinz, hol die Lupe*)
2. Ich überlasse dem User, das zu unterscheiden (durch relative Einheiten)

Punkt 2 fasse ich als "System" auf, denn nicht ich drücke dem User meine Ansicht auf, sondern er kann das entscheiden, indem er die Schriftgröße im Browser einstellt. Und da die meisten Anwender eine gewisse oder oftmals auch absolute Treue zu ihrem Webbrowser haben, ist dieser für mich der Maßstab für die Wünsche des Users.

[html] Maßeinheit "em"?

Captain

Tankred

Gast

Captain

Tankred

Gast

Banned

Captain

Tankred

Gast

Captain

Lieutenant

Tankred

Gast

Adagio

Gast

Lieutenant

Lieutenant

Banned

Tankred

Gast

Banned

Tankred

Gast

Banned

Lt. Commander

Tankred

Gast

Ähnliche Themen