em/ex <-> px

[Houyhnhnm]

Gibt es eine Möglichkeit, relative Größenangaben in em oder ex in die vom Browser aktuell benutzten px-Werte umzurechnen?

[Der Martin]

Hallo,

Gibt es eine Möglichkeit, relative Größenangaben in em oder ex in die vom Browser aktuell benutzten px-Werte umzurechnen?

nicht mit allgemein verfügbaren Techniken wie z.B. Javascript. Möglicherweise im Firefox mit einer speziell dafür programmierten Extension, oder im IE/Win mit einem selbstgeschriebenen ActiveX-Object, das Zugriff auf die Systemeinstellungen hat. Siehe auch [http://forum.de.selfhtml.org/archiv/2006/3/t124772/#m805044].

Schönen Abend noch,
 Martin

[Ingo Turski]

Hi,

Gibt es eine Möglichkeit, relative Größenangaben in em oder ex in die vom Browser aktuell benutzten px-Werte umzurechnen?

nicht mit allgemein verfügbaren Techniken wie z.B. Javascript.

aber sicher doch. In http://beratungscentrum-monheim.de/ habe ich genau das mit Javascript umgesetzt, um für den IE max-width in em zu simulieren (die Funktion wird nur onload aufgerufen, nach Änderung des Schriftgrades wäre ein Reload nötig, um die Auswirkung im IE zu sehen).

Man nehme: ein Element, dessen Breite in em angegeben ist.
Man experimentiere etwas mit dem Umrechnungsfaktor für die verschiedenen IE-Versionen: var v = document.compatMode ? 10.44 : 11.8;
Man rechne die Breite (hier des Menüs) um: var em = v / document.getElementById("imenu").offsetWidth;
;-)

freundliche Grüße
Ingo

[molily]

Hallo,

Man nehme: ein Element, dessen Breite in em angegeben ist.
Man experimentiere etwas mit dem Umrechnungsfaktor für die verschiedenen IE-Versionen: var v = document.compatMode ? 10.44 : 11.8;
Man rechne die Breite (hier des Menüs) um: var em = v / document.getElementById("imenu").offsetWidth;
;-)

Guter Ansatz, ich habe das einmal ähnlich gelöst:

  
function max_width_internet_explorer () {  
 var max_width_ids = ["e"];  
 var root, cs, fontsize_string, fontsize;  
 if (  
  !document.getElementById ||  
  !(root = document.documentElement) ||  
  !(root.currentStyle) ||  
  !(fontsize_string = root.currentStyle.fontSize) ||  
  fontsize_string.substr(fontsize_string.length - 2) != "pt"  
 )  
  return;  
 fontsize = parseInt(fontsize_string);  
 var one_em_in_pt_string = root.currentStyle.fontSize;  
 var one_em_in_pt = parseInt(one_em_in_pt_string);  
 var pt_in_px_factor = 4 / 3;  
 window.one_em_in_px = one_em_in_pt * pt_in_px_factor;  
  
 var elem, max_width_em_string, max_width_em, max_width_px;  
 for (var ids_index = 0; ids_index < max_width_ids.length; ids_index++) {  
  elem = document.getElementById(max_width_ids[ids_index]);  
  if (  
   elem.currentStyle.maxWidth ||  
   !(max_width_em_string = elem.currentStyle["max-width"])  
  )  
   return;  
  max_width_em = parseInt(max_width_em_string);  
  max_width_px = one_em_in_px * max_width_em;  
  if (elem.offsetWidth > max_width_px) {  
   elem.style.width = max_width_px;  
  } else {  
   elem.style.width = "auto";  
  }  
  // alert("max_width_px: " + max_width_px + "\n" + "one_em_in_px: " + one_em_in_px);  
 }  
};  

Ich gehe also über document.documentElement.currentStyle.fontSize, in etwa wie auf http://www.svendtofte.com/code/max_width_in_ie/ beschrieben. Das ist im IE 6 standardmäßig »12pt«. 1em ist also 12pt. Den Wert rechne ich in Pixel um, der Faktor ist 4 zu 3 (das ist 96ppi soweit ich weiß). Dann habe ich den gesuchten Wert »Wieviel Pixel ist ein em?«. Dementsprechend werden ein paar Elemente mit max-width angesprochen, der CSS-Wert wird automatisch ausgelesen und es wird gegebenenfalls die width-Eigenschaft vergeben.

Ich nutze das allerdings nicht in der Praxis, das war einmal eine »Studie«. Verschiedene Umrechnungsfaktoren habe ich nicht berücksichtigt.

Mathias

[Ingo Turski]

Hi,

Ich gehe also über document.documentElement.currentStyle.fontSize, in etwa wie auf http://www.svendtofte.com/code/max_width_in_ie/ beschrieben. Das ist im IE 6 standardmäßig »12pt«. 1em ist also 12pt.

Das dürfte allerdings den Haken haben, daß es nur bei Standardeinstellung funktioniert - ungetestet.
Wer schlecht sieht und im IE die Eingabehilfen gefunden hat und hier die Schriftgradangaben ignorieren läßt und die Schriftgröße über ein User-CSS anpaßt, bekommt bei meiner empirischen Methode zumindest die zur Schriftgröße des Testelements passende max-width. Dummerweise werden dann die übrigen Schriftgrößen ja auch ignoriert, so daß die max-width nur dann passend ist, wenn im Testelement dieselbe Schriftgröße ist wie im übrigen Dokument (bei meiner genannten seite des Inhaltsbereiches).
Ist schon übel, daß schlecht sehende IE-User zu solch rabiaten Mitteln greifen müssen, um die üblichen "px-Schriften" lesen zu können. Kann der IE7 eigentlich px-Angaben skalieren?

freundliche Grüße
Ingo

[molily]

Hallo,

Ich gehe also über document.documentElement.currentStyle.fontSize, in etwa wie auf http://www.svendtofte.com/code/max_width_in_ie/ beschrieben. Das ist im IE 6 standardmäßig »12pt«. 1em ist also 12pt.

Für den Fall, dass das missverständlich klang: Das Script geht nicht von einer bestimmten Größe aus. Dort könnte auch 10pt oder 16pt drinstehen und es würde trotzdem funktionieren. Aber du hast Recht, ...

Das dürfte allerdings den Haken haben, daß es nur bei Standardeinstellung funktioniert - ungetestet.

... es geht dem Script nicht darum, zu messen, wieviel 1em unter Berücksichtigung aller wirkenden font-size-Regeln wirklich ist bei einem bestimmten Element im Dokument, das max-width erhalten soll.

Wer schlecht sieht und im IE die Eingabehilfen gefunden hat und hier die Schriftgradangaben ignorieren läßt und die Schriftgröße über ein User-CSS anpaßt, bekommt bei meiner empirischen Methode zumindest die zur Schriftgröße des Testelements passende max-width.

In dem Fall schaltet sich das Script bewusst selbst aus, da bleibt einem nichts anderes als die konkrete Messung übrig. Das Script sollte lediglich demonstrieren, wie man mit JavaScript auf die Änderung der Schriftgröße über das Menü Ansicht > Schriftgröße reagieren kann.

Dummerweise werden dann die übrigen Schriftgrößen ja auch ignoriert, so daß die max-width nur dann passend ist, wenn im Testelement dieselbe Schriftgröße ist wie im übrigen Dokument (bei meiner genannten seite des Inhaltsbereiches).

Hm, interessanter Punkt, den ich nicht bedacht hatte, den werde ich mal weiter untersuchen.
Ich glaube allerdings nicht recht, dass ein solches User-CSS überhaupt funktionieren würde. Wenn sich jemand eine signifikant abweichende Schriftgröße darin festlegt, so ist es letztlich Unsinn, nicht gleichzeitig die Dimensionen von Elementen sowie deren Anordnung (float, position) außer Kraft zu setzen. Accessibility-Stylesheets sorgen daher meist auch für eine linearisierte Darstellung.

Ist schon übel, daß schlecht sehende IE-User zu solch rabiaten Mitteln greifen müssen, um die üblichen "px-Schriften" lesen zu können. Kann der IE7 eigentlich px-Angaben skalieren?

Er hat eine Zoom-Funktion (ähnlich Opera) zusätzlich zur Funktion, die Schrift zu vergrößern. Über letztere ist px-Schrift auch weiterhin nicht vergrößerbar, über erstere schon.

Mathias

[Ingo Turski]

Hi,

Ich glaube allerdings nicht recht, dass ein solches User-CSS überhaupt funktionieren würde. Wenn sich jemand eine signifikant abweichende Schriftgröße darin festlegt, so ist es letztlich Unsinn, nicht gleichzeitig die Dimensionen von Elementen sowie deren Anordnung (float, position) außer Kraft zu setzen. Accessibility-Stylesheets sorgen daher meist auch für eine linearisierte Darstellung.

Nur ist das in einem universellen User-CSS kaum möglich. Die Auswirkungen z.B. von Schriftgrad-Ignorierung und body{font-size:150%} sind je nach Seite akzeptabel bis völlig unbrauchbar und speziellere Eingriffe erfordern i.d.R. eine Analyse der jeweligen Seiten; ich vermute, daß sich kaum ein IE-User diese Arbeit machen wird bzw. kann. Ich denke, der normale Weg wird die Ignorierung des Schriftgrades und eine vergrößerte Ansicht sein.

Kann der IE7 eigentlich px-Angaben skalieren?

Er hat eine Zoom-Funktion (ähnlich Opera) zusätzlich zur Funktion, die Schrift zu vergrößern. Über letztere ist px-Schrift auch weiterhin nicht vergrößerbar, über erstere schon.

Ein passabler Kompromiss, der auch vielen Pixeldesignern entgegen kommt.

freundliche Grüße
Ingo

[molily]

Hallo,

Gibt es eine Möglichkeit, relative Größenangaben in em oder ex in die vom Browser aktuell benutzten px-Werte umzurechnen?

Du kannst dir den »calculated value« der Schriftgröße des html- bzw. body-Elements holen.

Das ist dann, sofern dein Stylesheet keine anderen Werte vorgibt, die Standardschriftgröße des Browsers.

Die Version für den IE wurde genannt, in standardkonformen Browsern geht das so:

alert(window.getComputedStyle(document.documentElement, null).getPropertyValue("font-size"));

Damit hast du den Umrechnungsfaktor.

Mathias

[Struppi]

Gibt es eine Möglichkeit, relative Größenangaben in em oder ex in die vom Browser aktuell benutzten px-Werte umzurechnen?

Wie wär's so:

<script type="text/javascript">  
window.onload = function ()  
{  
    alert( check_px('em') ) ;  
    alert( check_px('ex') ) ;  
}  
  
function check_px(unit)  
{  
    if(!document.createElement) return;  
    if(!unit) unit = 'em';  
  
    var div = document.createElement('div');  
    var s = div.style;  
    s.position = 'absolute';  
    s.padding = 0;  
    s.margin = 0;  
    s.width = '1' + unit;  
    document.body.appendChild( div );  
    var px = div.offsetWidth;  
    document.body.removeChild( div );  
    return px;  
}  
</script>  

Struppi.