relative Angabe von Schriftgrößen in em

[Matthias Scharwies]

Servus!

Dieser Forumsbeitrag bezieht sich auf eine von @BerlinerTourGuide angefangene Diskussion im Wiki:

im artikel (und in meinem dicken fachbuch) heißt es: "Wird die Schriftgröße selbst (font-size) in em festgelegt, bezieht sich die Einheit auf die Schriftgröße des Elternelements." die groß und in welchen einheit (px?) ist denn dann nun die schriftgröße des elternelements?

Das hängt von Fall zu Fall ab, je nachdem welche Elternelemente es gibt.

Früher war es üblich, einer Webseite im CSS eine bestimmte Schriftgröße zuzuordnen:

body {
  font-size: 12px;
}

Folgende Elemente übernehmen diese Schriftgröße (sie wird vererbt), außer wenn sie geändert wird. Also ist bei einem nachfolgenden Kindelement mit 1.5em Schriftgröße die berechnete Schriftgröße 12x1.5 = 18px.

Wiki-Tutorial: CSS/Kaskade

wo schaue ich das nach? wusste nicht, dass eine schrift soz. eine standardgröße hat.

In den Entwicklerwerkzeugen Deines Browsers. Rechtsklick und "Element untersuchen"

Wiki-Tutorial: HTML/Tutorials/HTML & CSS mit dem Seiteninspektor untersuchen

• wenn das gemeint ist... und was ist in diesem zusammenhang das elternelement?? (wenn ein paragraph in einem div steht, verstehe ich, dass der <p> das kindelement des <div> ist, aber bei einer schrift?

Genauso! wenn du in Deinem div eine Angabe einer Schriftgröße hast, gilt diese!

muss ich irgendwo eine bezugsschrift und eine basisgröße definieren, in px?

Mittlerweile hat man aber gemerkt, dass Browser Schrift ohne Angabe der Größe eigentlich passend darstellen, und nimmt statt einer festen, absoluten Angabe einfach die Standardschriftgröße des Brwosers (im Firefox und anderswo 16px).

Es ist besser, wenn Du keine Bezugsschrift definierst, da du dir, wie bereits gesagt wurde, nie sicher sein kannst, dass es diese Schrift auf allen Geräten auch gibt. Jedes Betriebssystem, jeder Browser und auch jede Rendering Engine haben ihre eigenen, zum Teil abweichenden Schriften und Maße. Deshalb ist ein pixelgenaues Layout nur auf Deinem Gerät möglich, aber nicht auf den Geräten Deiner Kunden!

Wiki-Tutorial: Responsive WebDesign

alles dinge, die sich der nicht-fachmensch fragt, und die 'automatisch' beantwortet werden sollten!

Nein, aber dafür sind die Tutorials da und nicht die einzelnen Seiten zu den CSS-Eigenschaften

danke im voraus! --Hahawe (Diskussion) 10:38, 27. Jan. 2017 (CET)

https://forum.selfhtml.org/meta/2017/jan/27/selfhtml-wiki-zahlen-masse-und-masseinheiten/1685357#m1685357

Der Artikel wurde geändert, schau mal, ob's jetzt verständlicher ist.

ich schlage zur definition von "em" folgendes vor: 'Ein "em" ist eine Maßeinheit, die über einen Umrechnungsfaktor auf die im Elternelement geltende Schriftgröße Bezug nimmt. Ist diese Schriftgröße z.b. 16px, so entsprechen 0.5em [Vorsicht! Trennungszeichen ist ".", nicht ","!] einer Größe von 8px.

Stimmt!

Mit "em" können Schriften, aber auch beliebige andere Elemente (z.B. "border") dimensioniert werden.

Nein, keine Elemente, sondern Eigenschaften, und da die Längenangaben. Und eine Maßeinheit wie Meter oder em dimensioniert auch nicht!

Die Schriftgröße des Elternelements wird dort definiert oder gilt durch Vererbung aus dem übergeordneten Element weiter.'

Stimmt!

das wäre - falls richtig - m.e. klarer und für die praxis des einsteigers hilfreicher... --Hahawe (Diskussion) 17:05, 18. Mär. 2017 (CET)

Herzliche Grüße

Matthias Scharwies

[Tabellenkalk]

Hallo,

Mit "em" können Schriften, aber auch beliebige andere Elemente (z.B. "border") dimensioniert werden.

Nein, keine Elemente, sondern Eigenschaften, und da die Längenangaben.

wie willst du denn Eigenschaften dimensionieren? Die Formulierung, Elemente werden dimensioniert, stimmt imho.

Gruß
Kalk

[Matthias Scharwies]

Servus!

Nein, keine Elemente, sondern Eigenschaften, und da die Längenangaben.

wie willst du denn Eigenschaften dimensionieren? Die Formulierung, Elemente werden dimensioniert, stimmt imho.

ok, ok!

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Matthias Scharwies,

im artikel (und in meinem dicken fachbuch) heißt es: "Wird die Schriftgröße selbst (font-size) in em festgelegt, bezieht sich die Einheit auf die Schriftgröße des Elternelements." die groß und in welchen einheit (px?) ist denn dann nun die schriftgröße des elternelements?

Die Einheit ist völlig unabhängig von der (physikalischen) Größe.

Eine Temperatur beispielsweise gibt an, wie warm oder kalt ein Körper ist. In welcher Einheit die Angabe erfolgt, ist völlig egal.

Ich habe eine bestimmte Körpergröße, unabhängig davon, ob ich die in cm, m, inch, Ellen, Klafter oder Fuß angebe.

Früher war es üblich, einer Webseite im CSS eine bestimmte Schriftgröße zuzuordnen:

Ich denke nicht, dass das üblich war.

Mittlerweile hat man aber gemerkt, dass Browser Schrift ohne Angabe der Größe eigentlich passend darstellen, und nimmt statt einer festen, absoluten Angabe einfach die Standardschriftgröße des Brwosers

Eben. Das galt auch früher schon. Sogar schon bevor es CSS gab.

ich schlage zur definition von "em" folgendes vor: 'Ein "em" ist eine Maßeinheit, die über einen Umrechnungsfaktor auf die im Elternelement geltende Schriftgröße Bezug nimmt. Ist diese Schriftgröße z.b. 16px, so entsprechen 0.5em [Vorsicht! Trennungszeichen ist ".", nicht ","!] einer Größe von 8px.

Stimmt!

Wieso über einen Umrechnungsfaktor? Ein 1em ist die Schriftgröße des Elternelements.

Mit "em" können Schriften, aber auch beliebige andere Elemente (z.B. "border") dimensioniert werden.

border ist kein Element.

Bis demnächst
Matthias

[Rolf b]

Die Einheit ist völlig unabhängig von der (physikalischen) Größe.

Ok, wieviel Volt wiegst Du?

Ahem... räusper

Die Diskussion hängt sich eher an der Relativität des em auf und fragt nach der Wurzel des Vererbungsbaumes.

Was dem Fragesteller fehlt, ist meiner Meinung nach der Hinweis auf das Browser-Stylesheet, das einen Default-Font festlegt und damit "1em" definiert, wenn im eigenen CSS keine font-size Angaben stehen.

Ich würde in der Tabelle des diskutierten Artikels das rem auch direkt unter das em setzen, um den Vergleich klarer zu haben.

Rolf

[Matthias Scharwies]

Servus!

Die Diskussion hängt sich eher an der Relativität des em auf und fragt nach der Wurzel des Vererbungsbaumes.

diesmal schon - das letzte mal ging's um den Begriff der Länge.

Was dem Fragesteller fehlt, ist meiner Meinung nach der Hinweis auf das Browser-Stylesheet, das einen Default-Font festlegt und damit "1em" definiert, wenn im eigenen CSS keine font-size Angaben stehen.

Ursprünglich ging's ihm um letter-spacing mit Werten von 0.01em (Diskussion: letter-spacing)

Ich würde in der Tabelle des diskutierten Artikels das rem auch direkt unter das em setzen, um den Vergleich klarer zu haben.

Ok, das werd ich gleich erldeigen!

Rolf

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Früher war es üblich, einer Webseite im CSS eine bestimmte Schriftgröße zuzuordnen:

Ich denke nicht, dass das üblich war.

Doch, deshalb haben wir ja dauernd diese Diskussionen. Den Abschnitt mit

body {
  font-size: 100.01% 
}

habe aus Gründen der didaktischen Reduktion mal rausgelassen. Ob das damals schon falsch war, bleibt dahingestellt.

Mittlerweile hat man aber gemerkt, dass Browser Schrift ohne Angabe der Größe eigentlich passend darstellen, und nimmt statt einer festen, absoluten Angabe einfach die Standardschriftgröße des Brwosers

Eben. Das galt auch früher schon. Sogar schon bevor es CSS gab.

Ja, aber wie kriegt man da die Kurve, um die Leute da daruf hinzuweisen????

Mit "em" können Schriften, aber auch beliebige andere Elemente (z.B. "border") dimensioniert werden.

border ist kein Element.

Schrub ich schon.

Herzliche Grüße

Matthias Scharwies

[MudGuard]

Hi,

body {
  font-size: 100.01% 
}

Das war ja harmlos, da es die Schriftgröße, die der Browser vorgibt, praktisch nicht verändert (der Unterschied zwischen z.B. 16px und 16,0016px wird kaum bemerkbar sein) - damit konnte aber ein IE-Bug umgangen werden.

Viel schlimmer waren die

body {
  font-size: 16px; 
}

womit der Entwickler die Wunsch-Schriftgröße des Users (die dieser in seinem Browser konfiguriert hat) ignoriert hat und das Ding festgenagelt hat.

cu,
Andreas a/k/a MudGuard

[Matthias Scharwies]

Servus!

Viel schlimmer waren die

body {
  font-size: 16px; 
}

womit der Entwickler die Wunsch-Schriftgröße des Users (die dieser in seinem Browser konfiguriert hat) ignoriert hat und das Ding festgenagelt hat.

Das ist ja genau das Thema in den Threads dieses TE:

• selfhtml-wiki: Zahlen, Maße und Maßeinheiten (In dem es schon einmal um den Begriff "Basisschriftgröße" geht, den er heute angeblich zum ersten Mal gehört hat.)

• physische maße zur definition von breakpoints in mediaqueries?!

Wenn man ihm dann sagt, dass er ein pixelgenaues Layout anstrebt, was sich so in der Wirklichkeit nicht umsetzen lässt, streitet er das ab und kommt mit Pixeltabellen, Screenshots mit Pixelmessungen, etc.

Das nächste Self-Treffen ist in Berlin, da muss er uns aber viele Berliner Weiße ausgeben!

Herzliche Grüße

Matthias Scharwies

[MudGuard]

Hi,

Das nächste Self-Treffen ist in Berlin, da muss er uns aber viele Berliner Weiße ausgeben!

Mir nicht, ich bevorzuge Roten. Abgesehen davon ist mir Berlin zu weit …

cu,
Andreas a/k/a MudGuard

[Matthias Apsel]

Hallo MudGuard,

Abgesehen davon ist mir Berlin zu weit …

Aber eingeladen bist du trotzdem.

Bis demnächst
Matthias

[Auge]

Hallo

Das nächste Self-Treffen ist in Berlin, da muss er uns aber viele Berliner Weiße ausgeben!

Oha, wenn es um richtige™️ Berliner Weiße gehen sollte, wird das teuer.

Tschö, Auge