amlug: em - was is das?

hey forum

ich bin beim durchlesen von beiträgen hier schon öfters darauf gestossen, dass man em anstatt px benutzen sollte.
kann mir jemand sagen was das ist und wie das funktioniert?
mir würde auch ein suchbegriff für selfhtml reichen, aber unter em kann ich leider nicht suchen.

mfg amlug

--
Es gibt nur eine Regel:
Finger weg von meinem Engel!
  1. Hallo,

    ich bin beim durchlesen von beiträgen hier schon öfters darauf gestossen, dass man em anstatt px benutzen sollte.

    Genau.
    Relative Einheiten wie "em" oder "%" sind toll.
    Damit laesst sich alles wunderbar skalieren,
    d.h. es passt sich der Schriftgroesse an, die
    der Benutzer in seinem Browser eingestellt hat.

    http://selfhtml.teamone.de/css/formate/wertzuweisung.htm#numerische

    http://www.netandmore.de/faq/fom-serve/cache/414.html
    "em
    Sicherlich die beste Einheit. [...]"

    Gruesse,

    Thomas

    --
    Bitte keine Mails mit Fachfragen - dafuer gibt es das Forum!
    Ich mag es, wenn URLs verlinkt sind (</faq/#Q-19>).
    Oft gestellte PHP-Fragen beantwortet die dclp-FAQ bestens: http://www.dclp-faq.de/
    1. "em Sicherlich die beste Einheit. [...]"
      und? dann ist alles in einer schriftgröße? na toll

      derik

      1. Hallo,

        "em Sicherlich die beste Einheit. [...]"
        und? dann ist alles in einer schriftgröße? na toll

        [ ] Du hast es begriffen.
        Es steht nicht "1em ist die beste Groesse".
        Obwohl das IMHO auch zutreffen wuerde - fuer Fliesstext.
        "em" als Einheit ist fuer Schrift sicher sinnvoller als "px"
        oder gar "pt".
        Die armen MS IE Benutzerlein koennen bei "px" Angaben den
        Text gar nicht skalieren...

        Moegliche Anwendungen von "em":
        h1 { font-size:1.8em; }
        p.fusszeile { font-size:0.9em; }
        ul.menue { width:12em; border:thin solid red; float:left; }

        <h1>Ueberschrift</h1>

        <ul class="menue">
          <li><a href="...">Bla</a></li>
          <li><a href="...">Ble</a></li>
          <li><a href="...">Bli</a></li>
        </ul>

        <p>Fliesstext in normaler Groesse bla bla</p>
        <hr>
        <p class="fusszeile">Autor: ... <a href="impressum.html">Impressum</a></p>

        Gruesse,

        Thomas

        --
        Bitte keine Mails mit Fachfragen - dafuer gibt es das Forum!
        Ich mag es, wenn URLs verlinkt sind (</faq/#Q-19>).
        Oft gestellte PHP-Fragen beantwortet die dclp-FAQ bestens: http://www.dclp-faq.de/
        1. Hallo.

          h1 { font-size:1.8em; }

          Bei einer solchen Angabe sollte aber <html> oder <body> schon eine Größe zugewiesen erhalten haben. Denn ansonsten wäre <h1> ja fast doppelt so groß wie es ohnehin schon ist. -- In Opera in Standard-Konfiguration entspräche deine Angabe somit etwa 52px.
          MfG, at

          1. Hallo,

            h1 { font-size:1.8em; }

            Bei einer solchen Angabe sollte aber <html> oder <body> schon eine Größe zugewiesen erhalten haben. Denn ansonsten wäre <h1> ja fast doppelt so groß wie es ohnehin schon ist.

            Das »wie es ohnehin schon ist« wird aber nicht beachtet. Die relative Schriftgrößenangabe bezieht sich auf die Schriftgröße des Elternelements. Das heißt, dass h1 {font-size:1em;} im Opera die Größe bewirkt, die der Standardtext hat. Es bedeutet nicht die Größe einer h1-Überschrift, wie sie unter Preferences->Fonts und Co. eingestellt ist bzw. im Browserstylesheet fest eingebaut ist. Oder habe ich dich missverstanden?

            In Opera in Standard-Konfiguration entspräche deine Angabe somit etwa 52px.

            <html>
            <head>
            <style type="text/css">
            h1 {font-size:1em;}
            h1,p {font-weight:normal; margin:0;}
            </style>
            </head>
            <body>
            <h1>ÜÖÄXMµpy</h1>
            <p>ÜÖÄXMµpy</p>
            </body>
            </html>

            Beide Texte sollten gleich groß sein. Ganz gleich, welche Größe der Opera für Überschriften standardmäßig vorsieht und ganz gleich, welche Größe für h1-Überschriften in den Einstellungen gewählt wurde. Relevant ist alleine, welche Größe für den Standardtext eingestellt ist.

            Dementsprechend würde h1 {font-size:1.8em;} die 1,8-fache Standardschriftgröße bedeuten, wenn in Elementen darüber keine (von 1em abweichende) Angabe gemacht wurde. Wenn ich also 18px für den Standardtext festlege (das entspricht hier in 7.5p1 der Einstellung 16pt), dann ist die Überschrift im obigen Dokument bei font-size:1.8em für h1 32 Pixel groß.

            Um 52 Pixel zu erreichen, müsste ich eine Standardtextgröße von ca. 29 Pixeln eingestellt haben...

            Mathias

            1. Hallo.

              Die relative Schriftgrößenangabe bezieht sich auf die Schriftgröße des Elternelements. Das heißt, dass h1 {font-size:1em;} im Opera die Größe bewirkt, die der Standardtext hat. Es bedeutet nicht die Größe einer h1-Überschrift, wie sie unter Preferences->Fonts und Co. eingestellt ist bzw. im Browserstylesheet fest eingebaut ist. Oder habe ich dich missverstanden?

              Nein, du hast Recht. Nur logisch erscheint es mir nicht, denn wenn kein übergeordnetes Element in Bezug auf die Schrifzgröße definiert wurde, sollte doch die Voreinstellung des Browser für <h1> "1em" bei diesem Element entsprechen.

              Um 52 Pixel zu erreichen, müsste ich eine Standardtextgröße von ca. 29 Pixeln eingestellt haben...

              Dieser Wert ist bei mir für <h1> hinterlegt.
              MfG, at

              1. Hi,

                Nein, du hast Recht. Nur logisch erscheint es mir nicht, denn wenn kein übergeordnetes Element in Bezug auf die Schrifzgröße definiert wurde, sollte doch die Voreinstellung des Browser für <h1> "1em" bei diesem Element entsprechen.

                wieso das?
                Wenn Du bei Dir für h1 {color:blue;} eingestellt hast (ohne !important), sollte dann h1 {color:red;} kein rot ergeben?

                freundliche Grüße
                Ingo

                1. Hallo.

                  Wenn Du bei Dir für h1 {color:blue;} eingestellt hast (ohne !important), sollte dann h1 {color:red;} kein rot ergeben?

                  Mir erschließt sich hier der Zusammenhang nicht.
                  MfG, at

                  1. Hi,

                    der Zusammenhang ist einfach der, daß eine Definition für ein Element die Browsereinstellung für _dieses_ Element überschreiben sollte.
                    Anders wäre es, wenn Du für ein übergeordnetes Element wie body eine Schriftgröße voreingestellt hast; wenn in der Seite dann body keine Größe bekommt, wirkt sich Deine Grundeinstellung auf eine relative Schriftgröße des untergeordneten Elements auch aus.

                    freundliche Grüße
                    Ingo

                    1. Hallo.
                      Deine Erklärung verstehe ich -- Kunststück, sie verräz mir jaauch nichts neues -- aber den Zusammenhang kann ich dennoch nicht herstellen.
                      Aber meinetwegen musst du dich nicht weiter bemühen. Denn wie die Technik funktioniert, habe ich erfahren, und wie sie meines Erachtens funktionieren sollte, wird sie niemals werden.
                      MfG, at

              2. Hallo,

                Die relative Schriftgrößenangabe bezieht sich auf die Schriftgröße des Elternelements. Das heißt, dass h1 {font-size:1em;} im Opera die Größe bewirkt, die der Standardtext hat. Es bedeutet nicht die Größe einer h1-Überschrift, wie sie unter Preferences->Fonts und Co. eingestellt ist bzw. im Browserstylesheet fest eingebaut ist. Oder habe ich dich missverstanden?

                Nein, du hast Recht. Nur logisch erscheint es mir nicht, denn wenn kein übergeordnetes Element in Bezug auf die Schrifzgröße definiert wurde, sollte doch die Voreinstellung des Browser für <h1> "1em" bei diesem Element entsprechen.

                Das verstehe ich nicht, über h1, body und html liegt als Browsereinstellung die Standardtextgröße. Auch ohne explizite Angabe vererbt sie sich, sodass html und body ebenfalls 1em/100% haben bzw. den entsprechenden absoluten »computed value«, also die Schrift von Elementen darin bzw. anonymen Textknoten eben so groß wie die Standardtextgröße ist. html,body,p {font-size:1em} drückte aufgrund dieses Vererbungsprinzips nur Selbstverständliches aus (von Browserfehlern einmal abgesehen). Wenn ich dich richtig verstanden habe, sollte somit ein »ein übergeordnetes Element in Bezug auf die Schriftgröße definiert« sein, es existiert auch ohne explizite Angabe ein bestimmter Wert für font-size für die jeweils darüberliegenden Elemente, der sich von der Standardtextgröße ableitet. Natürlich kann man diese Vererbung an sich hinterfragen, aber ich verstehe nicht ganz dein Gegenmodell. Soll demnach diese Vererbung nur eintreten, wenn der Autor explizit 1em für html oder body angibt, ansonsten bedeutet 1em für ein Element die Ursprungsgröße eben dieses speziellen Elements in den Browsereinstellungen unabhängig vom darüberliegenden Element?

                Für mich ist die momentane Vorgehensweise sehr logisch, denn anders wäre es für den Autor nicht möglich, überhaupt eine Schriftgröße für die Überschrift festzulegen, die in einem bestimmten, vom Autor festgelegten Verhältnis zur Fließtextschriftgröße steht. Der eine Benutzer kann ja z.B. 14px als Standardtextgröße und 26px für h1 eingestellt haben, der andere 12px und 32px, dann ließe sich seitens des Autors nie eine einigermaßen stimmige Präsentation erarbeiten, weil sich jeweils 1em auf diese variierenden Größen bezöge. Der Autor könnte nicht mit >1em bzw. <1em die Größe an seine Anforderungen korrigieren, denn er würde damit nicht nur zwangsläufig dem expliziten Benutzerwunsch widersprechen, sondern auch nie Einheitlichkeit erzielen können, da die jeweiligen konkreten Verhältnisse mannigfaltig und nicht vorherzusehen sind. Im dem Fall wäre die Eigenschaft font-size mit relativen Werten ziemlich witzlos, zumindest wenn das der einzige Interpretationsmodus wäre, siehe oben.

                Mathias

                1. Hallo.

                  Soll demnach diese Vererbung nur eintreten, wenn der Autor explizit 1em für html oder body angibt, ansonsten bedeutet 1em für ein Element die Ursprungsgröße eben dieses speziellen Elements in den Browsereinstellungen unabhängig vom darüberliegenden Element?

                  Yep.

                  Der eine Benutzer kann ja z.B. 14px als Standardtextgröße und 26px für h1 eingestellt haben, der andere 12px und 32px, dann ließe sich seitens des Autors nie eine einigermaßen stimmige Präsentation erarbeiten, weil sich jeweils 1em auf diese variierenden Größen bezöge.

                  Jain. Zum einen täte er damit vielen Nutzern einen Gefallen, zum anderen könnte er dies ja aber vermeiden, indem er die Eigenschaften der übergeordneten Elemente definiert.

                  Im dem Fall wäre die Eigenschaft font-size mit relativen Werten ziemlich witzlos, zumindest wenn das der einzige Interpretationsmodus wäre, siehe oben.

                  Nein, nicht witzlos, siehe oben, aber warum soll man sich weiter den Kopf darüber zerbrechen? Das System steht fest, und jetzt noch Veränderungen daran vorzunehmen, würde ja auch die Interpretation der bisherigen Angaben beeinflussen. Und das kann wohl niemand wollen.
                  MfG, at

  2. »Moin moin

    ich bin beim durchlesen von beiträgen hier schon öfters darauf gestossen, dass man em anstatt px benutzen sollte.
    kann mir jemand sagen was das ist und wie das funktioniert?

    http://selfhtml.teamone.de/css/formate/wertzuweisung.htm#numerische

    Grob gesagt ist em eine CSS-Grössenangabe.

    mir würde auch ein suchbegriff für selfhtml reichen, aber unter em kann ich leider nicht suchen.

    Aber gerne doch :-)
    em css

    Gruß
    Patrick

  3. Tach auch,

    ich bin beim durchlesen von beiträgen hier schon öfters darauf gestossen, dass man em anstatt px benutzen sollte.
    kann mir jemand sagen was das ist und wie das funktioniert?

    Fuer die einen das beste seit es geschnittenes Brot gibt (mal ganz frei uebersetzt). Diesen wird von den anderen oft vorgeworfen sie seien Theoretiker die nicht wissen was in der Praxis wirklich erforderlich ist.

    Fuer andere ein theoretisches Konzept das ihnen das Himmelreich auf Erden versprochen hat aber in der Praxis doch oefter mal versagt. Diesen wird von den anderen gerne vorgeworfen dass sie das Internet nicht verstanden haben und doch gefaelligst PDFs erstellen sollen.

    Das zusammen ergibt dann die Grundlage fuer muntere Diskussionen und mitunter Flamewars, bei denen am Ende meistens keiner gewonnen hat und nur die wenigsten ihre Meinung aendern. Was sich die Seiten dann wieder gegenseitig vorwerfen koennen.

    Und den Rest haben Dir die anderen ja schon erzaehlt.

    Gruss,
    Armin

    --
    Location: Swindon/Wiltshire/England/UK/Europe/Northern Hemisphere/Planet Earth/Solar System/Milky Way Galaxy/Universe
    http://www.ministryofpropaganda.co.uk/
    1. Hi Armin,

      [...]

      wunderbar! Eine köstliche Zusammenfassung. Du hast nur vergessen, dass WIR Recht haben.

      Grüße,
       Roland :-)

      --
      http://www.exclipy.com/upgrade/ - Browserflamewars sind auch lustig.
      1. Hallo,

        Du hast nur vergessen, dass WIR Recht haben.

        Nein, er hat vergessen, die dritte Gruppe zu beschreiben, die glaubt, sie stünde über diesen Diskussionen bzw. könne sich überhaupt außerhalb positionieren.

        Mathias

        1. habe d'ehre

          Nein, er hat vergessen, die dritte Gruppe zu beschreiben, die glaubt, sie stünde über diesen Diskussionen bzw. könne sich überhaupt außerhalb positionieren.

          oder keinen Bock hat, sich mit einem egomanischen Besserwisser und Alleinrechthaber zu unterhalten. Das muss Dich aber nicht kuemmern.

          carpe diem
          Wilhelm

          1. Hallo,

            Nein, er hat vergessen, die dritte Gruppe zu beschreiben, die glaubt, sie stünde über diesen Diskussionen bzw. könne sich überhaupt außerhalb positionieren.

            oder keinen Bock hat, sich mit einem egomanischen Besserwisser und Alleinrechthaber zu unterhalten.

            Sollte das eine Beleidigung werden? Ziemlich mau.

            Das muss Dich aber nicht kuemmern.

            Dann ist ja gut.

            Mathias

            --
            (tm)
            1. Hi molily,

              Sollte das eine Beleidigung werden? Ziemlich mau.

              warum glaubst du es sollte eine Beleidigung sein? Vielleicht teilt einfach nur nicht jeder die Ansicht, "em und % ist immer gut, alles andere ist immer böse".

              1. Hallo,

                Vielleicht teilt einfach nur nicht jeder die Ansicht, "em und % ist immer gut, alles andere ist immer böse".

                Ähm, und er äußert dies, indem er mich als Egomanen usw. bezeichnet? Gewagte These. Er hat sich gar nicht zum Thema geäußert, sondern nur gepöbelt.

                Mathias

                1. Er hat sich gar nicht zum Thema geäußert

                  Ich wage es den Meister zu zitieren:

                  <cite>
                  Nein, er hat vergessen, die dritte Gruppe zu beschreiben, die glaubt, sie stünde über diesen Diskussionen bzw. könne sich überhaupt außerhalb positionieren.
                  </cite>

                  Du solltest Deine eigenen Postings besser lesen, bevor Du andere der Poebelei bezichtigst. Du verurteilst pauschal Leute, die nicht Deinem Glauben anhaengen.

                  Wilhelm

            2. habe d'ehre

              oder keinen Bock hat, sich mit einem egomanischen Besserwisser und Alleinrechthaber zu unterhalten.

              Sollte das eine Beleidigung werden?

              Nein, nur eine Feststellung, abgeleitet aus Reaktionen von Dir.

              Ziemlich mau.

              Wenn ich Dich beleidigen wollen wuerde, glaube mir, da haette ich schon mehr auf der Pfanne. Aber warum sollte ich.

              carpe diem
              Wilhelm

    2. Hallo.

      Fuer die einen das beste seit es geschnittenes Brot gibt (mal ganz frei uebersetzt).

      Du treibst dich zu viel auf http://www.hebig.org/blogs/archives/main/001367.php herum ;-)
      MfG, at

      1. Tach auch,

        Du treibst dich zu viel auf http://www.hebig.org/blogs/archives/main/001367.php herum ;-)

        Ob ich ihm mal erzaehlen sollte dass die Grammatik etwas seltsam ist? Normalerweise heisst es "The best thing since sliced bread" ;-)

        Gruss,
        Armin

        --
        Location: Swindon/Wiltshire/England/UK/Europe/Northern Hemisphere/Planet Earth/Solar System/Milky Way Galaxy/Universe
        http://www.ministryofpropaganda.co.uk/
        1. Hallo.

          Ob ich ihm mal erzaehlen sollte dass die Grammatik etwas seltsam ist? Normalerweise heisst es "The best thing since sliced bread" ;-)

          "since sliced"? Unaussprechbar. Grammatik? Firlefanz! Sein Spruch _klingt_ wenigstens gut ;-)
          MfG, at

  4. Hallo,

    ich bin beim durchlesen von beiträgen hier schon öfters darauf gestossen, dass man em anstatt px benutzen sollte.

    vergiß es - alles graue Theorie. Ich habe es auf direkt nebeneinander stehenden Systemen - Mac und PC auf IE und Netscape getestet. Die relativen Einheiten sind nicht brauchbar. Beste _Ergebnisse_, nicht rhetorische Schleifen, habe ich mit px erzielt und bleibe dabei. Es wird ja immer auf Lesbarkeit hingewiesen. Schönschön, aber das liegt doch ganz einfach in der Verantwortung des Designers. 12px z.B. kannst Du auf einem normal eingestellten System gut lesen. Wer schwierigkeiten hat und sich deswegen die Auflösung auf seinem Bildschirm größer eingestellt hat, der sieht 12px eben auch größer, weil bei Ihm die Pixel nun einmal größer sind und schon läuft die Sache rund. Wer sich hingegen auf einem 13'' Bildschirm eine Auflösung von 3000 * 2000 Pixel Einstellt, wird nicht nur Deine in px formatierte Seite nicht lesen können, statt sein System mal runterzukühlen, schreibt er dann hier unleserliche Postings gegen px :)

    Gruß, Andreas

    --
    <img src="http://was-ist-das.andreas-lindig.de/was_ist_das_fetzen.jpg" border="0" alt="">
    http://was-ist-das.andreas-lindig.de
    1. Hallo.

      Die relativen Einheiten sind nicht brauchbar.

      Lies: Nicht jeder kann mit relativen Einheiten umgehen.
      MfG, at

      1. Hallo.

        auch so.

        Die relativen Einheiten sind nicht brauchbar.

        Lies: Nicht jeder kann mit relativen Einheiten umgehen.

        nein. lies: die Relationen der relativen Einheiten werden auf jedem System unterschiedlich dargestellt. Daß 1.5 em das Eineinhalbfache von Irgendwas ist, ist eben Theorie, entspricht aber nicht den Testergebnissen. Dagegen kann ich mit px sehrwohl die Verhältnisse zwischen den Schriftgrößen genau bestimmen, muß allerdings immer in absolute Zahlen umrechnen. Wenn das relative System in der Praxis funktionierte, würde ich es sehr begrüßen.

        Gruß, Andreas

        --
        <img src="http://was-ist-das.andreas-lindig.de/was_ist_das_fetzen.jpg" border="0" alt="">
        http://was-ist-das.andreas-lindig.de
        1. Hallo.

          Wenn das relative System in der Praxis funktionierte, würde ich es sehr begrüßen.

          Wenn ich deine Erkenntnisse nachzuvollziehen in der Lage wäre, würde ich dies jetzt gern tun. Mir stellt sich der Sachverhalt aber eben(t) anders dar.
          MfG, at

        2. Hi,

          die Relationen der relativen Einheiten werden auf jedem System unterschiedlich dargestellt.

          teilweise gebe ich Dir Recht, allerdings wirken sich die Unterschiede nicht immer auch aus. Ok, es erfordert einige Tests, aber dann kann man - zugegeben recht krumme - em-Werte finden, die in den verschiedenen Systemen zu meist gleichen Pixelgrößen führen.
          Wenn Du Dich Du fragst, wozu der Aufwand gut sein soll, hätte ich zwei Gründe: zum einen die allseits bekannte Skalierbarkeit unter dem IE und zum anderen die Möglichkeit, auch Weitenangaben in em anzugeben und so ein flexibles Layout zu erreichen.

          freundliche Grüße
          Ingo

    2. Hallo Andreas,

      vergiß es - alles graue Theorie. Ich habe es auf direkt nebeneinander
      stehenden Systemen - Mac und PC auf IE und Netscape getestet.

      Hast Du den Testcase und Deine Ergebnisse noch und kannst diese vielleicht
      online stellen? Den einzigen umfassenden Browsertest mit diversen Methoden
      der Deklaration der Schriftgröße, den ich kenne, ist dieser hier:
      http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html

      ... und so wie ich das lese, gibt es - wenn man weiß, was man tut - kaum
      Probleme mit relativen Schriftgrößen mit ems.

      12px z.B. kannst Du auf einem normal eingestellten System gut lesen. Wer
      schwierigkeiten hat und sich deswegen die Auflösung auf seinem Bildschirm
      größer eingestellt hat, der sieht 12px eben auch größer, weil bei Ihm die
      Pixel nun einmal größer sind und schon läuft die Sache rund.

      Dafür verschenkt er aber Bildschirmfläche. Und wenn er nun aber nicht
      Bildschirmfläche verschenken will, sondern einfach nur eine etwas
      größere Schriftgröße als 12 Pixel haben will? Da wäre doch das passende
      Mittel, die Schrift zu vergrößern, egal nun, ob diese in relativer
      Schriftgröße oder in »absoluten« Pixeln deklariert wurde, oder?

      Wer sich hingegen auf einem 13'' Bildschirm eine Auflösung von 3000 * 2000

      Hehe. Schönes Rechenbeispiel. Aber so wie ich das mitkriege, »schrumpft« über
      lange Sicht gesehen eh der tatsächliche Raum, den ein Pixel einnimmt - die
      Displays werden einfach besser. Das heißt irgendwann kann Dein Szenario
      tatsächlich Wirklichkeit sein.

      Tim