Website komplett mit Einheit em

[Bene]

Hallo,

ich versuche gerade eine Website komplett in em umzusetzen, also nicht nur die Schriftgrößen, sondern auch die Spalten in em zu definieren.
Dabei bin ich so vorgegangen:
1em entspricht in der Standardeinstellung 16px => daraus folgend ist dann 1px 0,0625em. Wenn der Benutzer die Standardeinstellung verändert hat, hat er dies denke ich bewusst gemacht und hat ja dann auch den gewünschten Effekt.
Bin ich so richtig vorgegangen?

Im Firefox funktioniert alles einwandfrei. Der IE hat offenbar einen anderen Algorithmus. Die Schriften werden deutlich stärker skaliert als die Spalten, so dass der Text schneller umbricht.
Das Layout bleibt nicht stabil. Das heißt Teile der Seite vergrößern sich stärker als andere. Habt ihr mehr infos (u.u. Link) darüber wie der ie sich verhält?

Ein weiteres Problem ist für mich das Runden. Ich bin zwangsläufig in die Verlegenheit gekommen das ich Werte runden musste, z.B. auf 11.66666em. Ursache ist in erster Linie, dass ich die Werte umrechnen muss wenn ich bereits eine Schriftgröße von 0.75em einstelle.
Das Runden hat bisher bei mir noch keine Probleme gemacht. Wisst ihr ob das ein Problem darstellen kann? Auf wieviele Stellen sollte gerundet werden?

Danke und viele grüße
Bene

[Daniel P.]

Hallo,

ich versuche gerade eine Website komplett in em umzusetzen, also nicht nur die Schriftgrößen, sondern auch die Spalten in em zu definieren.

em richtet sich IMHO nach der Schriftgröße. Daher ist es sinnlos, Schriftgrößen mit em zu definieren. Stattdessen solltest du pt verwenden. Ein em entspricht der Breite des Buchstaben "m" - der richtet sich wiederum nach pt. Kapiert - ich nicht.

Im Firefox funktioniert alles einwandfrei. Der IE hat offenbar einen anderen Algorithmus. Die Schriften werden deutlich stärker skaliert als die Spalten, so dass der Text schneller umbricht.
Das Layout bleibt nicht stabil. Das heißt Teile der Seite vergrößern sich stärker als andere. Habt ihr mehr infos (u.u. Link) darüber wie der ie sich verhält?

Wird wohl daran liegen, dass die Schrift mit em und nicht mit pt definiert wurde. Außerdem kannst du nicht verlangen, dass alle Browser das gleich umrechnen. Wenn du barrierefrei eine Seite basteln möchtest, musst du eben gewisse Einbußen in Kauf nehmen.

Ein weiteres Problem ist für mich das Runden. Ich bin zwangsläufig in die Verlegenheit gekommen das ich Werte runden musste, z.B. auf 11.66666em. Ursache ist in erster Linie, dass ich die Werte umrechnen muss wenn ich bereits eine Schriftgröße von 0.75em einstelle.
Das Runden hat bisher bei mir noch keine Probleme gemacht. Wisst ihr ob das ein Problem darstellen kann? Auf wieviele Stellen sollte gerundet werden?

Ich würde nicht mehr als 2, max. 3 Stellen nach dem Komma verwenden. Du solltest bedenken, dass bei solchen kleinen Einheiten wie 0.75em die Seite bei starker Verkleinerung nicht mehr vollständig angezeigt wird, weil der Browser das em in 0.0001px umgerechnet hat...

Gruß
Daniel

[wahsaga]

hi,

em richtet sich IMHO nach der Schriftgröße.

http://www.1ngo.de/web/em.html

Daher ist es sinnlos, Schriftgrößen mit em zu definieren.

Im Gegenteil, es ist sogar sehr empfehlenswert.

Stattdessen solltest du pt verwenden.

Nein, _das_ ist ein wirklich dämlicher Tipp.
pt ist eine Einheit für den Druck, nicht für die Bildschirmdarstellung.

Ein em entspricht der Breite des Buchstaben "m" - der richtet sich wiederum nach pt.

Was soll dieser Unfug bedeuten?

Kapiert - ich nicht.

Aha.

gruß,
wahsaga

[Daniel P.]

Hast du dir eigentlich mal den Text deiner Quelle durchgelesen? Dann wüsstest du, was ich mit "diesem Unfug" meine. Oder können relative Angaben neuerdings fixe Angaben ersetzen?. Das höchstliegende Elternelement (body am besten) benötigt eine fixe Größenangabe, nach dem sich em richten kann. Tiefer liegende Elemente können als Schriftart natürlich em verwenden, da sich diese nach dem Elternelement richten können...

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

P.S.: pt kann problemlos in px umgerechnet werden. Außerdem eignet sich pt für die Bildschirmausgabe der Schriftarten (und nur von denen) hervoragend. Bei px-Angaben verzerren nach meiner Efahrung einige Browser die Schriftarten.

Gruß

[Struppi]

P.S.: pt kann problemlos in px umgerechnet werden. Außerdem eignet sich pt für die Bildschirmausgabe der Schriftarten (und nur von denen) hervoragend. Bei px-Angaben verzerren nach meiner Efahrung einige Browser die Schriftarten.

Warum das Unfug ist kannst du hier nachlesen http://dciwam.de/faq/gute-websites/richtige-schriftgroesse

Struppi.

[wahsaga]

hi,

Oder können relative Angaben neuerdings fixe Angaben ersetzen?

Natürlich, wieso nicht?

Das höchstliegende Elternelement (body am besten) benötigt eine fixe Größenangabe, nach dem sich em richten kann.

Hör doch bitte endlich auf, Unfug zu erzählen, wenn du keine Ahnung hast.

Zahlreiche Webseiten nutzen bspw. % als Einheit für die Schriftgröße von body.

gruß,
wahsaga

[Auge]

Hallo

P.S.: pt kann problemlos in px umgerechnet werden. Außerdem eignet sich pt für die Bildschirmausgabe der Schriftarten (und nur von denen) hervoragend.

Na dann lies dies: SELFHTML-Featureartikel: Das Windows/Mac font-size-Problem

Tschö, Auge

[Der Martin]

Hallo,

P.S.: pt kann problemlos in px umgerechnet werden.

ja, aber nicht allgemeingültig, sondern nur immer auf eine ganz bestimmte Rechnerinstallation bezogen. Klar, das GUI heutiger Betriebssysteme macht diese Umrechnung ja im Prinzip ständig. Aber es braucht dazu eine wichtige Information, nämlich wieviele Pixel pro Zoll (dots per inch, dpi) der Bildschirm darstellen kann. Diese Angabe stellt der Grafiktreiber zur Verfügung.

Aber da der nicht erkennen kann, ob am VGA-Anschluss ein alter 12"-Monitor oder ein 21-Zöller angeschlossen ist, _kann_ er diese Angabe nicht selbst ermitteln. Und deshalb werden da normalerweise bei der Installation einfach Defaultwerte eingesetzt, die über den Daumen gepeilt zumindest in einer glaubwürdigen Größenordnung liegen. Die meisten Windows-Grafiktreiber gehen bei Bildschirmauflösungen bis 800x600 von 96dpi aus, ab 1024x768 von 120dpi. Mac-Rechner dagegen nehmen 72dpi an, obwohl sie vielleicht genau den gleichen Bildschirm benutzen. Schließlich kommt noch dazu, dass man diesen Wert auch noch selbst frei einstellen kann, wenn man unbedingt will.

Fazit: Wenn du von einem bestimmten System nicht genau weißt, wieviel dpi für das Monitorbild angenommen werden, ist die Umrechnung von pt in px (oder auch umgekehrt) völlig unmöglich.

Außerdem eignet sich pt für die Bildschirmausgabe der Schriftarten (und nur von denen) hervoragend.

Ja, aber du hast dann als Autor keinen blassen Schimmer, wie groß die Schrift wirklich wird und wie die mit den restlichen Elementen auf der Seite harmoniert.

Bei px-Angaben verzerren nach meiner Efahrung einige Browser die Schriftarten.

Das ist Unsinn. Technisch gesehen ermöglicht eine Angabe in px sogar die sauberste Abbildung. Vor allem, wenn die Schrift dann -wie im IE- nicht mehr skalierbar ist. Es wäre also ein Usability-Killer.

Schönes Wochenende,
 Martin

[at]

Hallo.

Mac-Rechner dagegen nehmen 72dpi an, obwohl sie vielleicht genau den gleichen Bildschirm benutzen.

Mag es sein, dass du der Realität ein wenig hinterherhinkst?
MfG, at

[Der Martin]

Moin,

Mac-Rechner dagegen nehmen 72dpi an, obwohl sie vielleicht genau den gleichen Bildschirm benutzen.
Mag es sein, dass du der Realität ein wenig hinterherhinkst?

schon möglich. Die Zahl hat hier im Forum mal jemand genannt, ich hab's auch eben wiedergefunden. Offensichtlich hatte ich das falsch in Erinnerung; mir war, als hätte Tim als routinierter Mac-User das sogar bestätigt - so kann man sich täuschen.

Schönen Tag auch,
 Martin

[Struppi]

ich versuche gerade eine Website komplett in em umzusetzen, also nicht nur die Schriftgrößen, sondern auch die Spalten in em zu definieren.

Da würde ich aufpassen. Wie du schon gemerkt hast ist em eine relative Größe zur Größe der Schrift. Aber du willst ja z.b. nicht einen Rand oder eben eine Spaltenbreite unbedingt nach der Schriftgröße skalieren, sondern nach der zu Verfügung stehenden Fläche.

Ich benutze z.b. eine zentrierten Inhalt, der einen gewissen Rand zum Browserfenster hat. Würde ich diesen in em angeben, wäre er größer wenn die Schrift groß dargestellt wird, d.h. bei grosser Schrift ist die Darstellungsfläche kleiner, was natürlich Unsinn ist. Deshalb verwende ich für solche Sachen immer '%', also relativ zur Darstellungsfläche.

Ein weiteres Problem ist für mich das Runden. Ich bin zwangsläufig in die Verlegenheit gekommen das ich Werte runden musste, z.B. auf 11.66666em. Ursache ist in erster Linie, dass ich die Werte umrechnen muss wenn ich bereits eine Schriftgröße von 0.75em einstelle.
Das Runden hat bisher bei mir noch keine Probleme gemacht. Wisst ihr ob das ein Problem darstellen kann? Auf wieviele Stellen sollte gerundet werden?

Ich vermute, dass du einige Dinge Pixelgenau darstellen willst. Ansonsten bräuchtest du nicht diese krummen Zahlen. Hier kann ich dir nur empfehlen, bleib bei Pixel.
Es ist ja so, dass z.b. Bilder eben nicht vergößert werden bei größerer Schrift, dass heißt überall wo Bilder im Spiel sind ist eine Pixelangabe nötig.
Auch wenn es um sehr kleine Werte geht, würde ich px verwenden. z.b. wenn du in einem Kasten einen kleinen Innenabstand brauchst ist padding:2px sicher kein Verstoss gegen Barrierefreiheit und sollte den gewünschten Effekt auch bei riesiger Schrift haben. (Hier spricht aber prinzipiell auch nichts gegen z.b. 0.1em)

Struppi.

[Ingo Turski]

Hi,

Im Firefox funktioniert alles einwandfrei. Der IE hat offenbar einen anderen Algorithmus. Die Schriften werden deutlich stärker skaliert als die Spalten

dann hast Du vermutlich vergessen, gegen diesen Browser-Bug z.B. body {font-size:100.1%;} anzugeben.

Ein weiteres Problem ist für mich das Runden. Ich bin zwangsläufig in die Verlegenheit gekommen das ich Werte runden musste, z.B. auf 11.66666em.

Das wird Dir nicht helfen, da auch Browser runden - und dies mit kleinen Unterschieden.
Versuche nicht, so exakt wie möglich zu rechnen, sondern *teste* das Ergebnis in verschiedenen Browsern, wie ich es bei meiner Umrechnungstabelle getan habe. Hier siehst Du z.B., daß ich für 15px von 0.9375 auf 0.93 abgerundet und bei 14px von 0.875 auf 0.88 aufgerundet habe.

Das Runden hat bisher bei mir noch keine Probleme gemacht. Wisst ihr ob das ein Problem darstellen kann? Auf wieviele Stellen sollte gerundet werden?

Mehr als zwei Stellen lohnen sich IMHO nicht.

freundliche Grüße
Ingo

[Bene]

Hallo,

danke für die hilfreichen Antworten.
Das Setzen von 101.1% auf body hat schon ziemlich geholfen. Das Angeben der Werte mit Hilfe der Umrechnungstabelle werde ich noch einbauen.
Meine Idee war für alle Angaben em zu benutzen und mit einem wrapper-div dafür zu sorgen, dass alles nebeneinander bleibt. (Gesehen hab ich das bei heute.de, wo übrigens auch die Bider in em definiert werden und somit mitskalieren. Mittlerweile bin ich von der Idee nicht mehr so überzeugt, da so schnell vertikales Scrollen notwendig wird.
Was haltet ihr von der Lösung die Navigationsleiste link in em anzugeben und den Contentbereich in Prozent?

viele grüße
bene

[Ingo Turski]

Hi,

Was haltet ihr von der Lösung die Navigationsleiste link in em anzugeben und den Contentbereich in Prozent?

das ist auch nicht optimal, denn wieviel % sind 100% - Xem?
Lasse die Breitenangabe für den Inhalt weg und/oder nutze für moderne Browser max-width.

freundliche Grüße
Ingo

[Auge]

Hallo

Mittlerweile bin ich von der Idee nicht mehr so überzeugt, da so schnell vertikales Scrollen notwendig wird.

Das kennt jeder, das benutzt jeder. Warum sollte das ein Problem sein?

Ich würde mir darum überhaupt keine Gedanken machen.

Tschö, Auge

[at]

Hallo.

1em entspricht in der Standardeinstellung 16px => daraus folgend ist dann 1px 0,0625em.

Darauf hast du keinen Einfluss. Ich bezweifle sogar, dass du alle Browser kennst und damit diese Aussage aus der hohlen Hand triffst.

Auf wieviele Stellen sollte gerundet werden?

Die Schwierigkeit liegt eher darin, dass du keinen Einfluss darauf hast, wie der Browser rundet. Eine gepunktete Unterstreichung, wie sie etwa für <abbr> üblich ist, kann also in einigen Browsern immer gleich dick sein, in anderen Browsern jedoch immer wieder unterschiedlich. Im genannten Fall ist der visuelle Unterschied erheblich.
MfG, at

[Auge]

Hallo

Die Schwierigkeit liegt eher darin, dass du keinen Einfluss darauf hast, wie der Browser rundet. Eine gepunktete Unterstreichung, wie sie etwa für <abbr> üblich ist, kann also in einigen Browsern immer gleich dick sein, in anderen Browsern jedoch immer wieder unterschiedlich. Im genannten Fall ist der visuelle Unterschied erheblich.

Kann ich nur bestätigen. Experimente mit border-width-Angaben mit der Einheit "em" förderten immer wieder unterschiedliche Ausgaben am Bildschirm zutage.

Wurden 0.05em in der einen Zeile als 1 Pixel dicke Linie dargestellt, konnte diese Linie in der nächsten Zeile 0 oder auch 2 Pixel dick sein.

Tschö, Auge