Script Umrechnung px ==> em

[Loon3y]

font-size :100.01% soll wohl gegen einen uralten 0pera-Bug helfen.
Die Version war meine ich kostenpflichtig (alternativ mit Werbung).

Sagen wir es mal so: falsch ist es nicht.

Ich meine aber auch mal gelesen zu haben, dass neben dem opera6 auch der IE und safari eine Art "Rechenproblem" haben, wenn man font-size:100% nimmt.

Simply put, IE for Windows' relative font size inheritance cascade is broken. The simplest workaround is to not use relative sizes, such as using keywords instead, except on base level containers. If you find it necessary to size through cascade, you'll find % works more reliably than ems. If you prefer using ems to %, then at least set the initial size using % instead, thus: html {font-size: 100.01%;} or body {font-size: 100.01%;} . This eliminates most size inheritance errors. Using 100.01% instead of 100% avoids size inheritance bugs in some ancient versions of Opera.

So einfach ist das nicht. Das Ergebniss hängt u.a. auch von der Schriftgrösse des Elternelementes ab.

Ist ja auch logisch ist:

(div -> 1em = 16px)
div -> 2em = 32px

(ul -> 1em = 32px)
ul -> 2em = 64px

(li -> 1em = 64px)
li -> 2em = 128px

Ja, deswegen habe ich auch geschrieben, dass ich dem Elternelement niemals eine andere Schriftgröße gebe, sondern dann letzenendes, wie in deinem Beispiel, dem <li>. Der Tag <strong> müsste in keinen von mir bekannten Browsern ein hasLayout in Bezug auf Schriftgröße haben. (Für Personen die nicht wissen, was hasLayout ist, das sind vordefinierte Werte von Browsern für Tags, wie z.B. die Überschriften <hx> bei keiner angegeben Schriftgröße in den Browsern verschieden aussehen)

Die schreibeweise mit dem Slash bei font ist so gewählt, da dies "deutlich" die Größe der CSS-Datei verkleinert. Es ist einfach einmal font: ....; zu schreiben, statt font-size:..; font-family:...; line-height:...; ... . Aber das ist jedem selbst überlassen wie er es macht. Meiner Meinung nach sollte man solche Mittel nutzen wenn sie etwa die Dateigröße verringern.
Ebenso wie man alles in background schreiben kann oder alles einzeln mit background-image, background-position, background-attachment, background-color, ....

16px ist einfach die häufige Standardeinstellung in den Browsern, die die meisten Benutzer nicht verändern, mehr nicht.

Davon geht auch mein Beispiel aus. Bzw. ich. Da die meisten User dumme User sind und sich nicht mit ihren PC auskennen, verstellen sie natürlich auch nichts.

Würde man jetzt nun davon ausgehen das standartmäßig 16px eingestellt sind, dann würde dies bedeuten dass:

16px -> 1.00em und
12px -> 0.75em sind. (75% von 16px)

Würde man nun schon per CSS mit 0.75em (statt 1em) arbeiten und jemand kommt mit einer Voreinstellung von 12px (statt 16px) an, dann würde das daraußfolgend auch heißen, dass:

1.00em -> 12px und
0.75em -> 9px sind.

Aufgrund unserer Festlegung in der CSS-Datei von 0.75em, bekommt der User dann darauffolgend die Seite mit einer Schriftgröße von 9px präsentiert.
Ich hoffe meine "Theorie" ist nicht falsch, aber vom logischen "Denken" her, sollte das so stimmen.

Aufjedenfall sollte man sich immer bewusst sein, das die Schriftgröße "em" vererbt wird. Wie im folgenden Beispiel zu sehen ist:

#over 1em (gehen wir mal davon aus das sind 16px)
ul 0.75em (das wären dann 12px)
li 1em (das wären 12px, weil das elternelement 12px hat)
li 1.333em (das wären 16px, da 12px * 1,333 = 16px sind)
li 0.75em ( das wären 9px, da 12px * 0.75 = 12px sind)

Also ist es immer besser dem Elternelement 1em (hier 16px) zu geben:

#over 1em
ul 1em
li 1em (16px)
li 1.333em ( ~21px)
li 0.75em (12px)


Grüßli
Loon3y

 

[neuroleptika]

Sagen wir es mal so: falsch ist es nicht.
Ich meine aber auch mal gelesen zu haben, dass neben dem opera6 auch der IE und safari eine Art "Rechenproblem" haben, wenn man font-size:100% nimmt.

Dem IE <7 reicht es wenn das erste umschliessende Element eine font-size in % erhält. Safari hat mit font-size: 100% kein Problem. Dafür aber mit der Schreibweise font-size/line-height (bis Vers.2 ?).

line-height in em für body ist keine gute Idee.
je nach Schriftgrösse können die Zeilen auch höher als 1.4em sein:

<body>
<p><span>lorem<br />ipsum</span></p>
</body>

body { 
font:100.01%/1.4em Arial;
 }
p {
font-size: 1em;
 }
p span {
background-color: gray;
font-size: 3em;
 }

Ich denke es macht keinen Sinn px in em umzurechnen.

 

[crash]

Sehe ich genauso. Da man einfach nicht von 16px ausgehen kann.

 

[Efchen]

16px ist einfach die häufige Standardeinstellung in den Browsern, die die meisten Benutzer nicht verändern, mehr nicht.

Seit wann interessiert Cracks wie Euch das, was manche Leute velleicht bei sich eingestellt haben?

Ihr würdet auch niemals sagen, dass man von einem 1024px breiten Viewport ausgehen kann, weil die meisten eine Auflösung von 1024x768 haben. Ihr WISST, dass die Auflösung irrelevant ist und Ihr geht auch nicht davon aus, dass jeder sein Browserfenster maximiert hat und jeder die selben Tool- und Sidebars hat.

Warum geht Ihr immer von den 16px Schriftgröße aus, die nirgendwo vorgeschrieben ist?

Ihr Knalltüten :-)

Ich bin noch nie in die Verlegenheit gekommen, das umrechnen zu wollen. Ich hab einfach immer ausprobiert, bis es passt :-)

 

[_Thor_]

Ich gehe davon nicht aus, weshalb mein Text auch 1em als Schriftgröße bekommt. Irgendwelche Umrechnungen finden bei mir nie statt, wüsste auch nicht, was es da groß zu rechnen gibt.

 

[neuroleptika]

Warum geht Ihr immer von den 16px Schriftgröße aus, die nirgendwo vorgeschrieben ist?

Ich bin da nicht von ausgegangen.

 

[Efchen]

Ich bin da nicht von ausgegangen.

Das hab ich schon gesehen, ich hab ja auch nur die damit ansprechen wollen, die ständig vom Umrechnen reden und immer was von imaginären 16px schreiben. :-)

Du sprachst mir mit Deinem letzten Satz aus der Seele.

 

[Loon3y]

Das hab ich schon gesehen, ich hab ja auch nur die damit ansprechen wollen, die ständig vom Umrechnen reden und immer was von imaginären 16px schreiben. :-)

Du sprachst mir mit Deinem letzten Satz aus der Seele.

Naj aich denke das ganze kam nur zu Stande, weil bestimmt irgendwelche print-Grafikdesigner ankommen und meinen eine Seite müsste 900px oder gar 1000px breit sein...bzw der "Banner" und die Navigation muss so und so und der Footer so...

Im Endeffekt wenn ich das "Grundlayout" erstellen muss / darf und jemand kommt mit einem 900px breiten Banner an...dann nehm ich einfach im body font-size 100%, im obersten "Elternelement" font-size 1em und somit 56.25em breite für die Seite / Banner / was auch immer...und dann stimmt das auch so mit dem "umrechnen"....

Ich selbst hab es schon erlebt, dass Grafiker meinten "Der Text muss noch 2px weiter vom linken Rand weg"...worauf ich meinte das ich nicht mit Pixel arbeite...hm...und viele Grafiker - egal ob print oder non-print - kennen nichteinmal "em" oder "ex" oder schauen mich komsich an wenn ich meinte wieso man nichtmal mit %-werten und somit variablen Seitenbreiten arbeiten könnte... (wie wenn es ein Unmögliches wäre mal ein Layout für variable Breiten zu erstellen).

Im Endeffekt frage ich mich eh jetzt nach längerer Zeit unter Verwendung vom "em", ob das "zukunftssicher" ist? Immerhin gehen immer mehr Browser dazu über die komplette Seite im Browser fenster zu Zoomen und nichtnur den Text...Und wenn man so Dinge wie "Internet über TV / Handy" immer mehr im Trend sieht und selbst sich damit auch immer mehr beschäftigen darf, dann weiß man, dass diese Geräte auch zum Teil immer mehr mit "vollzoom" und nicht "textzoom" (wie wir es von alten IE gewohnt sind) arbeiten.

Natürlich ist es verständlich wenn viele jetzt der Meinung sind, dass es ja immernoch die alten Browser gibt. Der Meinung bin ich ja selbst. Aber wielange noch? Wer sich heutzutage einen PC mit neuesten Betriebssystem kauft, der sollte wohl eigentlich keinen <IE6 besitzen...selbst hier im Urlaub an dieser tollen neuesten EeeBox (als Arbeitsrechner sehr kompakt, gerade mal mousepadgroß, und ausreichend Leistung für 0815-Anwendungen und HD-Filme schauen) gibt es ein vorinstalliertes Tool welches automatisch das System und alle Treiber auf dem neusten Stand hält.

Nunja...lange rede kurzer Sinn..aber immer wieder toll darüber zu diskutieren und verschiedene Meinungen sich einzuholen.


Gruß zu Abend
Loon3y