height && width für Grafiken mit "em", ist das toll?

[brizly]

Hallo Forum,

ich hätte da gern ma 'n Problem:

Bisher habe ich Höhen und Breiten von Grafiken immer schick per PHP (getimagesize()) auslesen lassen und zur Laufzeit bspw. ins <img>-Tag geschrieben (Einheit: px). Super.
Dummerweise bleiben die Bilder dann aber auch immer gleich groß, wenn man im Browser einstellt, dass man gerne alles bspw. auf 150% Größe hätte (Barrierefreiheit?, das Thema hab ich nicht mehr gefunden...).
Also: Das ist doof, so.

Nun habe ich mir gedacht, man könnte da ja mla die tolle Einheit "em"  nehmen.

Problem: Wie rechnet man px in em um?
Geht das überhaupt? weil px ja absolut und em relativ ist?

Ich habs vorab schon mal getestet, mit 2 Bildern. Eins war ein Icon (gif, 16x16 Pixel), das andere eine Comix-Seite (jpg, 918x650). Hierbei bin ich durch das Intervall-Halbierungsverfahren bei der hoffentlich relativ genauen Formel
( x px / 12.93 ) = x em
gelandet.

beide Bilder neben- && untereinander sehen gleich groß aus. Auf 3 Rechnern, die alle unterschiedliche Auflösungen haben (aber alle als OS W2K && System-Schriftgröße:Standard).

Kann ich nun also damit rechnen, dass dieser Umrechnungsfaktor tatsächlich bei allen das gleiche bringt?

Also nicht dass beispielsweise das Bild bei jemandem plötzlich bspw. eine Größe von 105% hat oder noch viel Schlimmeres?

In der Hoffnung eine Lösung zu erhalten verbleibe ich erstmal...

_______________________
Mit freundlichen Grüßen
Sebastian

[Gunnar Bittersmann]

Problem: Wie rechnet man px in em um?
Geht das überhaupt?

Nein.

weil px ja absolut und em relativ ist?

Du sagst es.
Gunnar

[Dieter Raber]

Hallo Sebastian,

Du kannst Grafiken nicht so einfach skalieren, da leidet die Qualitaet enorm, (siehe Skalier-Feature des IE). Aber ich finde den Ansatz sehr interessant und bin gespannt, was da so an Ideen kommt.

Ich hab eine aehnliche Geschichte mal mit Javascript gemacht, du kannst gerne mein Script haben, vielleicht bringt dich das auf die ein oder andere Erleuchtung.

Dieter

[brizly]

Hallo Dieter,

Du kannst Grafiken nicht so einfach skalieren, da leidet die Qualitaet enorm, (siehe Skalier-Feature des IE). Aber ich finde den Ansatz sehr interessant und bin gespannt, was da so an Ideen kommt.

Ich weiß, dass die Qualität dabei flöten geht. Ich hätte vielleicht erwähnen sollen, das ich keine Hochglanz-Grafiken meinte, sondern eben die kleinen Icons, die hier und da mal auftauchen (ein Smile, ein Ordner-Symbol), und diese sollten sich eben mit vergrößern, damit das Ganze einen einheitlichen Fluss hat.
(Denn wie schei**e sieht das aus, wenn bspw. ein Forum auf 200% gestellt wird, und die kleinen Bildchen im Verhältnis gesehen dann eher Satzzeichen ähneln als alles andere...

Ich hab eine aehnliche Geschichte mal mit Javascript gemacht, du kannst gerne mein Script haben, vielleicht bringt dich das auf die ein oder andere Erleuchtung.

ich habe mal spaßeshalber online ein Beispiel erstellt:
https://brizly.dyndns.org/
mich würde interessieren, ob "ihr da draußen" die 2 Bilder in gleicher größe seht. Das obere ist in "fixen" px-Angaben, das untere in "relativen" em-Angaben ge-'stylt'.

Dieter

_______________________
Mit freundlichen Grüßen
Sebastian

[molily]

Hallo, Sebastian,

Ich hätte vielleicht erwähnen sollen, das ich keine Hochglanz-Grafiken meinte, sondern eben die kleinen Icons, die hier und da mal auftauchen (ein Smile, ein Ordner-Symbol), und diese sollten sich eben mit vergrößern, damit das Ganze einen einheitlichen Fluss hat.

Das halte ich prinzipiell für eine gute Idee, vor allem wenn sowieso die komplette Seite mit em/%-Größen gestaltet ist. Ein Icon in den größenmäßig stets relativen Text einzuweben, welches sich in Höhe und Breite auf die aktuelle Schriftgröße bezieht und welches mitskaliert, ist ebenfalls kein Problem. Schwierig wird es lediglich aus dem Grund, dass die Formen eines Icons in der Regel auf kleinsten Raum so angelegt sind, dass sie bei einer ungeraden Vergrößerung oder Verkleinerung insgesamt unerkennbar/unidentifizierbar werden. (Dies trifft auf viele Icons zu, auf andere wiederum glücklicherweise nicht.) Insofern wäre es bei hochauflösenden, farbenreichen Bildern vermutlich letztendlich problemloser, wenn einen em-Größenwert erhalten. Nur musst du dann damit rechnen, dass die tatsächlich angezeigte Größe höchstens aus Zufall der ursprünglichen Pixelgröße entspricht, ganz ohne dass der Benutzer bewusst nachträglich hoch- oder herunterskaliert hat.

(Denn wie schei**e sieht das aus, wenn bspw. ein Forum auf 200% gestellt wird, und die kleinen Bildchen im Verhältnis gesehen dann eher Satzzeichen ähneln als alles andere...

Ja, da hast du Recht. Deine Idee ist ein guter Ansatz. Dennoch werden in den von dir erwähnten Zusammenhängen eher assistive Techniken wie Bildschirmlupen verwendet, und diese vergrößern Text und Grafiken (wie Opera).

ich habe mal spaßeshalber online ein Beispiel erstellt:
https://brizly.dyndns.org/
mich würde interessieren, ob "ihr da draußen" die 2 Bilder in gleicher größe seht. Das obere ist in "fixen" px-Angaben, das untere in "relativen" em-Angaben ge-'stylt'.

Im MSIE 6/Win bei Schriftgröße Mittel ja. Das liegt aber nur daran, dass meine systemweite Schriftgröße anscheinend deiner gleicht. Im Mozilla und Opera, bei welchen ich eine gesonderte Standardschriftgröße angegeben habe, ist das Bild mit em-Angabe kleiner.
Das Skalieren über die Schriftgröße funktioniert tatsächlich sehr gut... Ich halte diese Möglichkeit zumindest für eingeschränkt sinnvoll und tauglich.

Grüße,
Mathias

[Stefan Bach]

Hallo,

https://brizly.dyndns.org/
mich würde interessieren, ob "ihr da draußen" die 2 Bilder in gleicher größe seht. Das obere ist in "fixen" px-Angaben, das untere in "relativen" em-Angaben ge-'stylt'.

Ja, wenn ich in Mozilla auf Windows ohne die großen Schriftarten oder sonstige Sondereinstellungen deine Seite betrachte, dann sind die Bilder gelich groß.
Wenn ich den Text Zoom bei Mozilla ändere, dann skaliert das untere Bild. Allderdings führt das dann dazu, dass Scrollen zu einer relativ ruckligen Angelegenheit wird. Das liegt aber dann wahrscheinlich an Mozilla.

Viele Grüße,

Stefan

[Stefan Bach]

Hallo,

Nun habe ich mir gedacht, man könnte da ja mla die tolle Einheit "em"  nehmen.

Problem: Wie rechnet man px in em um?
Geht das überhaupt? weil px ja absolut und em relativ ist?

Nein, geht nicht wirklich. Zur Erklärung von em siehe:

http://www.w3.org/TR/REC-CSS2/syndata.html#length-units
-------------------------------------------------------

The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)

The 'ex' unit is defined by the font's 'x-height'. The x-height is so called because it is often equal to the height of the lowercase "x". However, an 'ex' is defined even for fonts that don't contain an "x".

Example(s):

The rule:

H1 { line-height: 1.2em }

means that the line height of H1 elements will be 20% greater than the font size of the H1 elements. On the other hand:

H1 { font-size: 1.2em }

means that the font-size of H1 elements will be 20% greater than the font size inherited by H1 elements.

When specified for the root of the document tree (e.g., "HTML" in HTML), 'em' and 'ex' refer to the property's initial value.

Die Höhe eines "em"s hängt also von der Schriftgröße ab. Und die Schriftgröße selbst hängt wenn sie selbst nur relativ angegeben wurde mit der Schriftart zusammen. Wie das aber alles verknüpft ist hat sich mir bis heute noch nicht erschlossen.

Viele Grüße,

Stefan

[brizly]

Hallo Stefan,

Problem: Wie rechnet man px in em um?
Geht das überhaupt? weil px ja absolut und em relativ ist?
Nein, geht nicht wirklich. Zur Erklärung von em siehe:
http://www.w3.org/TR/REC-CSS2/syndata.html#length-units
[snip]

Hmpf. Leider hab ich das nicht so ganz verstanden...

Die Höhe eines "em"s hängt also von der Schriftgröße ab. Und die Schriftgröße selbst hängt wenn sie selbst nur relativ angegeben wurde mit der Schriftart zusammen. Wie das aber alles verknüpft ist hat sich mir bis heute noch nicht erschlossen.

Also in meinem (wenn auch noch bescheiden kleinen) Internet-Auftritt wollte ich _alles_ relativ (mit "em") angeben. Klappt bisher auch ganz gut. Jetzt sollte es doch wohl nicht so schwer sein den Browsern noch beizubringen die Bilder auch dem entsprechend zu "relativieren"...
oder wie?

_______________________
Mit freundlichen Grüßen
Sebastian

[rainer groth]

Hallo Sebastian,

ich finde Deinen Ansatz sehr interessant - ich will naemlich auch raus aus dem Pixel-Klub, weil ich selbst schon bei einer Bildschirmaufloesung von 1280x1024 Pixeln bei 19-Zoll-Monitoren regelmaessig Leseprobleme habe (und das Vergroessern des Schriftgrades nicht wirklich etwas bringt :-().

Freilich steht bei mir auch der (lesbare) Inhalt im Vordergrund.

Deshalb habe ich schon etliche heftige Diskussionen mit design-verliebten Studenten gefuehrt, die regelmaessig ins Leere fuehrten (die Diskussionen), weil durch die von mir favorisierte Verwendung der Masseinheit 'em' natuerlich die Verhaeltnisse von Texten zu Grafiken nicht mehr 'stimmten'.
Und Designer lassen sich halt hoechst ungern ihr Design/Layout 'zerstoeren' :-)

...und auf die Idee, fuer die Darstellung von Grafiken 'em' zu nutzen, kam ich garnicht !

Problem: Wie rechnet man px in em um?

Eigentlich nur fuer jeweils EINEN Monitor.

Geht das überhaupt? weil px ja absolut und em relativ ist?

...weil 'px' ja absolut UND relativ sind - naemlich abhaengig vom jeweiligen Anzeigegeraet ist ein Pixel unterschiedlich gross, ABER bei demselben Geraet immer gleich gross (egal welche Aufloesung gewaehlt wird).

(Ich habe meinen letzten Satz gerade noch mal gelesen :-) Eigentlich meinte ich: "Auf EINEM Monitor ist 1px immer gleich gross !" und "Auf VERSCHIEDENEN Monitoren ist 1px durchaus auch verschieden gross (wg. Lochmaske usw.)")

http://www.w3.org/TR/REC-CSS2/syndata.html#length-units
[snip]
Hmpf. Leider hab ich das nicht so ganz verstanden...

'em' und 'ex' kommen aus der Typographie, wobei 'em' die sogenannte Laufweite ('Breite') des kleinen m, und 'ex' die Hoehe des kleinen x einer Schriftart meint.

Also: der Browser nutzt zur Darstellung eine (Standard-) Schriftart in einer (vom Nutzer) festgelegten Groesse -> m und x sind somit in Laufweite bzw. Hoehe definiert.
Die Schriftgroesse kann nun mittels HTML-Anweisungen und auch mit CSS-Anweisungen veraendert werden - im letzteren Fall werden z.B. 'em'-Angaben auf VORHER ergangene Groessenangaben aufbauen - halt kaskadierend :-)
Beispiel: <body style="font-size:0.9em"> ergibt eine Normal-Schrifthoehe von 0,9 x (Laufweite von m). <div style="font-size:0.9em"> ergibt dann also 0,9 x 0,9 x (Laufweite von m), also 0,81 x (Laufweite von m).

Ich hoffe, dass Du jetzt etwas klarer siehst :-)

Poste bitte bei Gelegenheit, wie Du mit Deinem Ansatz weiter kommst, besonders im Hinblick auf Browser-Kompatibilitaet - oder schicke mir einfach eine PM.

gruesse
rainer groth

[MudGuard]

Hi,

Problem: Wie rechnet man px in em um?
Eigentlich nur fuer jeweils EINEN Monitor.

Nein, der Monitor spielt keine Rolle. Die Schriftgröße in Pixeln spielt eine Rolle.

cu,
Andreas

[rainer groth]

Hallo Andreas,

Nein, der Monitor spielt keine Rolle. Die Schriftgröße in Pixeln spielt eine Rolle.

...also die Anzahl der Pixel, die am Monitor 'leuchten', um ein Schriftzeichen darzustellen ?

<frage>Falls ja: werden bei einem neuen Powerbook mit physikalischen 120 Pixeln pro Inch dann nicht mehr Pixel genutzt, als z.B. bei meinen Monitoren mit 94 Pixeln pro Inch ?</frage>

gruesse
rainer groth

[MudGuard]

Hi,

Hallo Andreas,

Nein, der Monitor spielt keine Rolle. Die Schriftgröße in Pixeln spielt eine Rolle.
...also die Anzahl der Pixel, die am Monitor 'leuchten', um ein Schriftzeichen darzustellen ?

<frage>Falls ja: werden bei einem neuen Powerbook mit physikalischen 120 Pixeln pro Inch dann nicht mehr Pixel genutzt, als z.B. bei meinen Monitoren mit 94 Pixeln pro Inch ?</frage>

Bei der selben Schriftgröße in Pixeln nicht.

cu,
Andreas

[MudGuard]

Hi,

Ich habs vorab schon mal getestet, mit 2 Bildern. Eins war ein Icon (gif, 16x16 Pixel), das andere eine Comix-Seite (jpg, 918x650). Hierbei bin ich durch das Intervall-Halbierungsverfahren bei der hoffentlich relativ genauen Formel
( x px / 12.93 ) = x em

beide Bilder neben- && untereinander sehen gleich groß aus. Auf 3 Rechnern, die alle unterschiedliche Auflösungen haben (aber alle als OS W2K && System-Schriftgröße:Standard).

<p style="font-size:20px;"><img src="bla" style="width:1em; height:1em;"></p>
<p style="font-size:40px;"><img src="bla" style="width:1em; height:1em;"></p>

Die Bilder werden unterschiedlich groß...

Eine Umrechnung von em zu px ist nur dann möglich, wenn Du weißt, wieviele Pixel hoch ein M in der an der passenden Stelle gültigen Schriftart ist.

Wenn bei Dir beide Bilder jeweils gleich groß waren, dann war die gültige Schriftart für beide Bilder dieselbe.
Und wenn Du in 3 Browsern den selben Umrechnungsfaktor ermittelt hast, dann war die gültige Schriftart für die Bilder jeweils gleich groß.

cu,
Andreas

[brizly]

Guten Morgen liebes Forum.

Meine Frage ist nun, so denke ich, ausreichend beantwortet:
Grafiken kann man sehr wohl mit relativen Größen angeben, _aber_

• es gibt Verzerrungen
• die 'Relativität' (nennt man das so?) hängt ab und an (MS IE?) nicht von der Schriftgröße des Browser, sondern von der des Systems ab, was bereits für Verzerrungen in 'normal'-Größe sorgt
• die Umrechnungsformel "(blah x 12.93) usw..." ergibt nicht durchgängig das (von mir) gewünschte Ergebnis
• gerade kleine Grafiken (sog. Icons) werden schnell hässlich, wenn sie verzerrt werden
• man sollte nicht gleich jede Maße relativ angeben
• bei verhältnismößit großen Grafiken (am Gutesten noch mit Farbverläufen) klappt das (meist) wunderbar.

Für diese Aufklärung einen herzlichen Dank an alle, die mir (fast durchgehend sehr qualitativ uns ausführlich) geantwortet haben*.
Einen schönen Start ins Wochenende :-)

_______________________
Mit freundlichen Grüßen
Sebastian

*wenn ich wüsste, ob, wie und wo man hier user voten kann, würde ich in diesem Thread einen gewaltigen Anlass dazu sehen.

[Stefan Bach]

Hallo,

Für diese Aufklärung einen herzlichen Dank an alle, die mir (fast durchgehend sehr qualitativ uns ausführlich) geantwortet haben*.

*wenn ich wüsste, ob, wie und wo man hier user voten kann, würde ich in diesem Thread einen gewaltigen Anlass dazu sehen.

So was gibts hier nicht. Wir sind hier ja auf einem Diskussionsforum und nicht bei einem "Wer-ist-der-beste-User" Wettkampf.
Aber ein herzliches Dankeschön, so wie du es oben ja hingeschrieben hast wird natürlich gerne gesehen.

Viele Grüße,

Stefan

[rainer groth]

Hallo,

...Wir sind hier ja auf einem Diskussionsforum und nicht bei einem "Wer-ist-der-beste-User" Wettkampf.
Aber ein herzliches Dankeschön, so wie du es oben ja hingeschrieben hast wird natürlich gerne gesehen.

...und im Bekannten-Kreis ueber positive Erfahrungen berichten ist auch ganz nett - das vergroessert eventuell mittelbar die Community.

gruesse
rainer groth