nicht angemeldet
Problem mit der Schriteinheit "em"
MudGuard
Gunnar BittersmannHallo,
Ich habe eine Frage zu der Schrifteinheit "em":
Bisher dachte ich immer, 1em wäre die Größe des großen "M" der jeweiligen Schriftfamilie, so steht es jedenfalls auf Ingos Site:
http://www.1ngo.de/web/em.html
Zitat:
| em [...] des Buchstabens 'M' – entspricht der Gesamthöhe des Fonts inkl. Leerräumen)
In meiner Testdatei (mit Win-XP, Firefox-3) ist das allerdings nicht der Fall. Für die beiden gelben und roten Boxen ist jeweils die gleiche Breite in "em" deklariert worden.
Erwartet hätte ich nun, daß die erste Box mit "Times New Roman" kleiner ist, als die zweite Box mit "Courier New", was aber nicht der Fall ist.
Um es nun ganz genau zu testen, habe ich danach in die gelben Boxen jeweils 50 "M"s geschrieben. Die Breite der Boxen sollte demnach 50em betragen. Sie ist jedoch
1. viel geringer, und
2. unter verschiedenen Schriftarten dennoch wieder (optisch) gleich groß.
Kann mir bitte jemand erklären, was ich bei Ingos Artikel falsch verstanden habe?
liebe Grüsse
netinja
Hier ist meine Testdatei:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>em</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.box {
width: 37.5em;
background-color: #66FFCC;
border: 1px solid black;
}
.box-m {
width: 44.5em;
background-color: #FFC;
border: 1px solid black;
}
p span {
color: red;
font-weight: bold }
</style>
</head>
<body>
<div class="box" style="font-family: 'Times New Roman';">
<p>Home_Grundschulen_Realschulen_Gymnasien_Abendschulen_Fachhochschulen_Volkshochschulen</p>
</div>
<br>
<br>
<div class="box" style="font-family: 'Courier New';">
<p>Home_Grundschulen_Realschulen_Gymnasien_Abendschulen_Fachhochschulen_Volkshochschulen</p>
</div>
<br>
<br>
<div class="box-m" style="font-family: 'Times New Roman';">
<p>MMMMMMMMM<span>M</span>MMMMMMMMM<span>M</span>MMMMMMMMM<span>M</span>MMMMMMMMM<span>M</span>MMMMMMMMM<span>M</span></p>
</div>
<br>
<br>
<div class="box-m" style="font-family: 'Courier New';">
<p>MMMMMMMMM<span>M</span>MMMMMMMMM<span>M</span>MMMMMMMMM<span>M</span>MMMMMMMMM<span>M</span>MMMMMMMMM<span>M</span></p>
</div>
</body>
</html>
-
schmeiss mal
body{ font-style:monospace; }
in dein Dokument.
Das regelt nämlich, auf was sich em in deinen Boxen bezieht.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
schmeiss mal
body{ font-style:monospace; }
in dein Dokument.
Das regelt nämlich, auf was sich em in deinen Boxen bezieht.mfg Beat
Hallo Beat,
wieso denn "body {font-style:monospace;}" ?
Aber selbst wenn ich das täte, sollte die Schriftart ja von den Inline-Styles der Boxen überschrieben werden.
LG
netinja-
schmeiss mal
body{ font-style:monospace; }
in dein Dokument.
Das regelt nämlich, auf was sich em in deinen Boxen bezieht.wieso denn "body {font-style:monospace;}" ?
Aber selbst wenn ich das täte, sollte die Schriftart ja von den Inline-Styles der Boxen überschrieben werden.
na ja, was 1em ist, differiert in meinem FF abhängig davon ob ich
body{ font-size:1em;}
oder
body{ font-size:16px;}
definiere.
Im ersten Falle erhalte ich tatsächlich unterschidliche relative width anzeigen für Kind-Elemente bei unterschiedlichen Fonttypen. Im zweiten Fall nicht.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
-
-
Hi,
schmeiss mal
body{ font-style:monospace; }
in dein Dokument.Das bewirkt gar nichts, da fehlerhafte Deklarationen ignoriert werden. font-style darf einen der Werte normal, italic, oblique oder inherit haben, aber nicht monospace.
Das regelt nämlich, auf was sich em in deinen Boxen bezieht.
font-style hat nichts mit em zu tun.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
schmeiss mal body{ font-style:monospace; }
in dein Dokument.Das bewirkt gar nichts, da fehlerhafte Deklarationen ignoriert werden. font-style darf einen der Werte normal, italic, oblique oder inherit haben, aber nicht monospace.
Hallo Andreas,
Ich habe schon angenommen, daß Beat "Font-family" statt "font-style" meint, aber auch das nutzt nichts, denn es wird ja in den Boxen überschrieben.
LG
netinja-
Hi,
Ich habe schon angenommen, daß Beat "Font-family" statt "font-style" meint, aber auch das nutzt nichts, denn es wird ja in den Boxen überschrieben.
Auch font-family hat keinen Einfluß auf em.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Auch font-family hat keinen Einfluß auf em.
Hallo Andreas,
Ich verstehe nicht, wieso. :-(
Es heißt doch, daß 1em so groß ist, wie das große "M" des _jeweiligen fonts_.Und wenn ich für body kein 'font-size' angebe, heißt das ja, daß der Browser-Default-Wert genommen wird.
Der ist bei mir 16px.Nun ist aber 16px für 'times new roman' kleiner, als 16px für 'courier new'.
Also müßte das doch auch in die Berechnung der jeweiligen Box-Breite einfließen?liebe Grüße
netinjaDanke schonmal für Eure Antworten, aber irgendwie ist es noch nicht zu mir durchgedrungen. :-(
*schäm*
-
Hi,
Es heißt doch, daß 1em so groß ist, wie das große "M" des _jeweiligen fonts_.
Ich habe Dir doch schon die Stelle verlinkt, die em in CSS definiert. Da ist keine Rede von einem M.
Die Browser orientieren sich eher nach dem CSS-Standard als nach Ingos Seite ...
Und wenn ich für body kein 'font-size' angebe, heißt das ja, daß der Browser-Default-Wert genommen wird.
Der ist bei mir 16px.Nun ist aber 16px für 'times new roman' kleiner, als 16px für 'courier new'.
16px sind bei Dir kleiner als 16px?
Also müßte das doch auch in die Berechnung der jeweiligen Box-Breite einfließen?
Ja, es fließen dann jeweils 16px ein.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Und wenn ich für body kein 'font-size' angebe, heißt das ja, daß der Browser-Default-Wert genommen wird.
Der ist bei mir 16px.Nun ist aber 16px für 'times new roman' kleiner, als 16px für 'courier new'.
16px sind bei Dir kleiner als 16px?
Also müßte das doch auch in die Berechnung der jeweiligen Box-Breite einfließen?
Ja, es fließen dann jeweils 16px ein.
Paradigma Default-CSS:16px.
Document:
body {}
ist identisch
body {font-size:1em;}
aber wirkt anders als
body {font-size:16px;}im FF3.6
FF 3.6 bezieht bei 1em im body (bzw keiner Angabe) alle weiteren em Angaben auf den font, d.h. es ergibt unterschiedliche berechnete Werte für unterschiedliche font-families.
Nicht so, wenn ich eine absolute Grösse erwähne. Da spielen font-families keine Rolle mehr.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Paradigma Default-CSS:16px.
Document:
body {}
ist identisch
body {font-size:1em;}und ist identisch mit
body {font-size:100%;}FF 3.6 bezieht bei 1em im body (bzw keiner Angabe) alle weiteren em Angaben auf den font, d.h. es ergibt unterschiedliche berechnete Werte für unterschiedliche font-families.
Eben gerade _nicht_.
Hast du dir mein Beispiel mal im Browser angeguckt?Wäre es so wie du (und Ingo) sagst, und wie ich es gerne hätte, so müßte sich die 2. und 4. Box genau dem Text anpassen, was sie aber nicht tut.
LG
netinja
-
-
Hi,
Es heißt doch, daß 1em so groß ist, wie das große "M" des _jeweiligen fonts_.
Ich habe Dir doch schon die Stelle verlinkt, die em in CSS definiert. Da ist keine Rede von einem M.
Ich fürchte, ich habe da nicht alles verstanden. Englisch ist nicht gerade meine Stärke. Und auf Deutsch habe ich es nicht gefunden, jedenfalls nicht vom W3C. :-(
Nun ist aber 16px für 'times new roman' kleiner, als 16px für 'courier new'.
16px sind bei Dir kleiner als 16px?
Ja, bei unterschiedlichen Schriftarten. Das sieht man ja auch schon im Browser, daß der Text mit "Courier" mehr Platz in der Breite braucht, als mit "Times".
Also müßte das doch auch in die Berechnung der jeweiligen Box-Breite einfließen?
Ja, es fließen dann jeweils 16px ein.
Hmmm, na gut, dann hat das W3C das eben so festgelegt, und ich muß das akzeptieren.
Aber sinnvoll finde ich es trotzdem nicht.Wäre es so, wie Ingo es auf seiner Site beschrieben hat, (also daß sich die Boxbreite auch an der Schriftfamilie orientiert), so hätte das den Vorteil, daß bei einer em-Breite der Box, der Text _immer_ hineinpassen würde, egal, ob der User sich die Schriftgröße, UND egal, ob er sich die Schriftart ändern würde.
Und es würde auch nicht der häßliche Effekt entstehen, daß bei einer Schriftvergrößerung die Box einmal zu klein und einmal zu groß ist.LG
netinja-
Hi,
Nun ist aber 16px für 'times new roman' kleiner, als 16px für 'courier new'.
16px sind bei Dir kleiner als 16px?Ja, bei unterschiedlichen Schriftarten. Das sieht man ja auch schon im Browser, daß der Text mit "Courier" mehr Platz in der Breite braucht, als mit "Times".
Die font-size legt die HÖHE der Schrift fest. Nicht die BREITE.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
@@netinja:
nuqneH
Ich fürchte, ich habe da nicht alles verstanden. Englisch ist nicht gerade meine Stärke. Und auf Deutsch habe ich es nicht gefunden, jedenfalls nicht vom W3C. :-(
Man muss sich schon ziemlich dumm anstellen, um das nicht zu finden.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
-
-
-
-
-
Hi,
Ich habe eine Frage zu der Schrifteinheit "em":
Bisher dachte ich immer, 1em wäre die Größe des großen "M" der jeweiligen Schriftfamilie, so steht es jedenfalls auf Ingos Site:em ist die font-size, siehe http://www.w3.org/TR/CSS21/syndata.html#length-units
In meiner Testdatei (mit Win-XP, Firefox-3) ist das allerdings nicht der Fall. Für die beiden gelben und roten Boxen ist jeweils die gleiche Breite in "em" deklariert worden.
Erwartet hätte ich nun, daß die erste Box mit "Times New Roman" kleiner ist, als die zweite Box mit "Courier New", was aber nicht der Fall ist.Du hast für die font-size keine Angabe gemacht, daher gilt die Browser-Default-font-size.
Um es nun ganz genau zu testen, habe ich danach in die gelben Boxen jeweils 50 "M"s geschrieben. Die Breite der Boxen sollte demnach 50em betragen. Sie ist jedoch
Nein, da die Breite eines M nicht mit der font-size identisch sein muß.
- unter verschiedenen Schriftarten dennoch wieder (optisch) gleich groß.
Natürlich, da ja überall dieselbe font-size gilt, also ist auch die font-size-abhängige Einheit em überall gleich groß.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.