em Einheit

[bob]

Hallo,

nach langer Recherche verstehe ich immer noch nicht wie ich mit der Einheit "em" umgehen soll und wie die Definition ist. Ich weiss, dass es eine relative Grössenangabe ist und das war eigentlich alles. Wenn ich z.B eine Schriftgrösse mit "em" bestimme, möchte ich mich an irgendetwas orientieren. "font-size:1em" Wieviel ist "1em"? Genauso kann ich nix mit einer Schriftgrösse von 100% anfangen. "font-size:100%;"! 100% von was? Vielleicht kann mir das einer erklären, am besten mit Beispiel.

Besten Dank, Bob

[Jens Müller]

Howdy Bob,

"font-size:1em" Wieviel ist "1em"?
Genauso kann ich nix mit einer Schriftgrösse von 100% anfangen.
"font-size:100%;"! 100% von was?

1em = 100% Der Schriftgroesse relativ dazu, was der Seitenleser
in _seinem_ Browser eingestellt hat.
Bei mir ist 1em = Verdana 14px (In allen Browsern)

Lies mal: Die Frage nach der richtigen Schriftgroesse

gruesse aus'm ruhrpott
  jens mueller

[bob]

1em = 100% Der Schriftgroesse relativ dazu, was der Seitenleser
in _seinem_ Browser eingestellt hat.
Bei mir ist 1em = Verdana 14px (In allen Browsern)

Lies mal: Die Frage nach der richtigen Schriftgroesse

gruesse aus'm ruhrpott
  jens mueller

Ok, Danke und gruesse aus'm ruhrpott zurück!

[Der Martin]

Hallo,

1em = 100% Der Schriftgroesse relativ dazu, was der Seitenleser in _seinem_ Browser eingestellt hat.

äh, nein, das stimmt nicht ganz.
1em = 100% für ein Element entspricht der Schriftgröße, die das Element *normalerweise* hätte. So ist 0.8em zum Beispiel 80% der regulären Schriftgröße.

Bei mir ist 1em = Verdana 14px (In allen Browsern)

Das glaube ich nicht. ;-)
Nimm mal diesen HTML-Fetzen:

<p id="demo">Das ist ein Textabsatz, in dem <span>zwei Worte</span>
 etwas größer gesetzt sind.</p>

und nun setzen wir folgendes CSS drauf:

p#demo
  { font-size: 125%;
  }
 p#demo span
  { font-size: 1.6em;
  }

Mal angenommen, das p-Element ist direktes Kindelement von body, und weder für body noch für html ist explizit eine Schriftgröße definiert. Dann hätte der Text innerhalb des p-Elements in deinem Fall eine Größe von 14px*1.25, also theoretisch 17.5px - ob ein Browser hier auf- oder abrundet, lassen wir mal dahingestellt.
Diese Schriftgröße wird nun auch an das span vererbt, so dass 1em innerhalb des span-Elements wieder 17.5px entspricht. Auf *diese* Größe bezieht sich nun die Angabe von 1.6em für das span, so dass der Text darin letztendlich 28px groß ist.

Diese Abhängigkeiten sind anfangs schwer zu durchschauen. Aber das Schöne ist, dass die Größenangaben in em oder % alle relativ sind, so dass es genügt, wenn man an einer Stelle etwas ändert - die davon abhängigen Proportionen bleiben automatisch erhalten, sofern nicht absolute Größenangaben (z.B. in px) dazwischen auftauchen.

So long,
 Martin

[Auge]

Hallo

1em = 100% Der Schriftgroesse relativ dazu, was der Seitenleser in _seinem_ Browser eingestellt hat.

äh, nein, das stimmt nicht ganz.
1em = 100% für ein Element entspricht der Schriftgröße, die das Element *normalerweise* hätte. So ist 0.8em zum Beispiel 80% der regulären Schriftgröße.

Und was ist deiner Meinung nach die reguläre Schriftgröße auf die sich z.B. die 0.8em beziehen? Nicht etwa, was deine weiteren Ausführungen vermuten lassen, die im Browser (bzw. im System) angegebene Standardgröße?

Bei mir ist 1em = Verdana 14px (In allen Browsern)

Das glaube ich nicht. ;-)

...

Mal angenommen, das p-Element ist direktes Kindelement von body, und weder für body noch für html ist explizit eine Schriftgröße definiert. Dann hätte der Text innerhalb des p-Elements in deinem Fall eine Größe von 14px*1.25, also theoretisch 17.5px ...
Diese Schriftgröße wird nun auch an das span vererbt, so dass 1em innerhalb des span-Elements wieder 17.5px entspricht. Auf *diese* Größe bezieht sich nun die Angabe von 1.6em für das span, so dass der Text darin letztendlich 28px groß ist.

Und alle deine angegebenen Größen nehmen Bezug auf die im Browser eingestellten 14px.

Tschö, Auge

[Der Martin]

n'Abend!

1em = 100% für ein Element entspricht der Schriftgröße, die das Element *normalerweise* hätte. So ist 0.8em zum Beispiel 80% der regulären Schriftgröße.
Und was ist deiner Meinung nach die reguläre Schriftgröße auf die sich z.B. die 0.8em beziehen? Nicht etwa, was deine weiteren Ausführungen vermuten lassen, die im Browser (bzw. im System) angegebene Standardgröße?

Eben nicht! Die steht ja erst am Ende der Vererbungskette. Diese 0.8em können ganz unterschiedliche Schriftgrößen bezeichnen, je nachdem, in welchem Kontext sie stehen.

[Beispiel]
Und alle deine angegebenen Größen nehmen Bezug auf die im Browser eingestellten 14px.

Ja, aber nicht unbedingt direkt, sondern über ihre Vorfahrenelemente. Die tatsächlich dargestellte Schriftgröße erhält man, indem man die im Browser eingestellte Standardschriftgröße mit den Schriftgrößen des fraglichen und aller seiner Vorfahrenelementen multipliziert (vorausgesetzt, es sind keine absoluten Definitionen dazwischen).

Ciao,
 Martin

[Auge]

Hallo

[Beispiel]
Und alle deine angegebenen Größen nehmen Bezug auf die im Browser eingestellten 14px.

Ja, aber nicht unbedingt direkt, sondern über ihre Vorfahrenelemente. Die tatsächlich dargestellte Schriftgröße erhält man, indem man die im Browser eingestellte Standardschriftgröße mit den Schriftgrößen des fraglichen und aller seiner Vorfahrenelementen multipliziert (vorausgesetzt, es sind keine absoluten Definitionen dazwischen).

Ist ja richtig, aber im Ursprung aller Berechnungen steht die Standardschriftgröße des Browsers/Systems. Klar, dass die 0.8em eines Kindelements eines anderen mit 0.8em _direkt_ immer noch 0.8em sind, gegenüber der Standardgröße sind es jedoch nur noch 0.64em (so das Elternelement sich auf die Ausgangsgröße von 100% bezieht). Das sollte man, wie du schon schriebst, unbedingt beachten.

Aber Ausgangspunkt ist die Standardschriftgröße des Browsers/Systems.

Ist auch nicht einfach zu erklären, das Ganze. :-)

Tschö, Auge

[bob]

Ist auch nicht einfach zu erklären, das Ganze. :-)

Das würde ich auch mal behaupten.
So ganz habe ich das noch nicht verdaut, muss mir das alles noch ein paar mal durchlesen.

Also im Groben verstehe ich das so, dass sich "em" nach der Schriftgrösse des im Browser eingestellten Wertes richtet.

gruss bob

[Auge]

Hallo

Also im Groben verstehe ich das so, dass sich "em" nach der Schriftgrösse des im Browser eingestellten Wertes richtet.

Zuerst mal 'Ja' und im weiteren 'Nein'. Wenn du in deinem Browser z.B. 14px als Standardschriftgröße angegeben hast, wird jeder Fließtext einer Seite, die keine Angaben zur Schriftgröße enthält, oder deren Schriftgröße mit 1em oder 100% (oder natürlich auch 14px) angegeben ist, den Text mit 14px Größe anzeigen. Gleiches gilt respektive, wenn du im Browser eine andere Größe als Standard vorgibst.

Soweit, so gut.

Nehmen wir an, für Textabsätze wurden explizit 1em angegeben. Innerhalb eines Absatzes wird ein anderes Element mit der Schriftgröße 1.5em notiert. Dann beträgt dessen Schriftgröße 21px (14x1.5=21). Wenn dort herinnen wiederum ein weiteres Element mit der Schriftgrößenangabe von 0.9em notiert wird, berechnet sich dessen Schriftgröße nicht unmittelbar aus den 14px des Browsers, sondern aus den 21px seines Mutterelements(_Das_ ist der Trick!). Die Schriftgröße wird ungerundet 18.9px betragen.

Der Code dazu:

<p>Irgendein <strong>vorwiegend <span>sinnloser</span></strong> Text.</p>

p {  
font-size:14px;  
/*  
Ich nagel das jetzt mal, als Grundlage, auf 14px fest.  
Ansonsten halt 1em  
*/  
}  
  
p strong { font-size:1.5em; }  
  
p strong span { font-size:0.9em; }

Das ist schlussendlich in etwa wie Martins Beispiel.

Tschö, Auge

[bob]

Super Auge!

Jetzt habe ich´s geschnallt. Die eingestellte Schriftgrösse im Browswer ist die Ausgangsgrösse nach der sich alles richtet, wobei die Schriftgrösse der Elternelemente wiederum die Ausgangsgrösse für die Kindelemente ist.

Gruss Bob

[Auge]

Hallo

Jetzt habe ich´s geschnallt. Die eingestellte Schriftgrösse im Browswer ist die Ausgangsgrösse nach der sich alles richtet, wobei die Schriftgrösse der Elternelemente wiederum die Ausgangsgrösse für die Kindelemente ist.

<strong style="aussprache:very-französisch;">exactement!</strong>*

* Ich hoffe mal, dass ich das orthographisch richtig geschrieben habe. :-)

Tschö, Auge

[wahsaga]

hi,

Und alle deine angegebenen Größen nehmen Bezug auf die im Browser eingestellten 14px.

Noch interessanter wäre das Beispiel vielleicht für einen Span in einer "unformatierten" H1 gewesen - für die hätte der Browser nämlich erst mal sein internes Stylesheet angewendet - und damit wären aus den "eingestellten" 14px nämlich schon 24px o.ä. (nach der für h1 empfohlenen Default-Schriftgröße von 2em) für h1 geworden, und für den Span dann 44.8px.

gruß,
wahsaga

[Auge]

Hallo

Und alle deine angegebenen Größen nehmen Bezug auf die im Browser eingestellten 14px.

Noch interessanter wäre das Beispiel vielleicht für einen Span in einer "unformatierten" H1 gewesen - für die hätte der Browser nämlich erst mal sein internes Stylesheet angewendet - und damit wären aus den "eingestellten" 14px nämlich schon 24px o.ä. (nach der für h1 empfohlenen Default-Schriftgröße von 2em) für h1 geworden, und für den Span dann 44.8px.

Nicht kleckern, klotzen! ;-)

Tschö, Auge