Matthias Scharwies: relative Angabe von Schriftgrößen in em

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

--
Es gibt viel zu tun: ToDo-Liste
  1. 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

    1. 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

      --
      Es gibt viel zu tun: ToDo-Liste
  2. 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

    --
    Rosen sind rot.
    1. 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

      1. 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

        --
        Es gibt viel zu tun: ToDo-Liste
    2. 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

      --
      Es gibt viel zu tun: ToDo-Liste
      1. 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

        1. 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:

          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

          --
          Es gibt viel zu tun: ToDo-Liste
          1. 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

            1. Hallo MudGuard,

              Abgesehen davon ist mir Berlin zu weit …

              Aber eingeladen bist du trotzdem.

              Bis demnächst
              Matthias

              --
              Rosen sind rot.
          2. 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

            --
            Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
            Toller Dampf voraus von Terry Pratchett