Was Sie schon immer über ex wissen wollten

[Houyhnhnm]

Nämlich wieviele px ein ex sind.

Man kann zumindest eine praxistaugliche Näherung mit folgender Funktion bestimmen:

function exToPx() {
    var div = document.createElement("div");
    document.getElementsByTagName("body")[0].appendChild(div);
    div.innerHTML = 'xxx xxx';
    div.style.height = '10px';
    div.style.width = '2em';
    div.style.overflow = 'hidden';
    var h = div.scrollHeight / 2;
    document.getElementsByTagName("body")[0].removeChild(div);
    return h;
}

Für andere Fontgrößen schreibt man:

div.innerHTML = '<font size=n>xxx xxx</font>';

Wobei n der Wert für die gewünschte Größe ist.

Die Funktion ist erfolgreich getestet für FF 1.0, IE 6, Opera 7 und Mozilla 1.7

Die Methode läßt sich zur Bestimmung der Länge eines em entsprechend abwandeln.

[wahsaga]

hi,

Man kann zumindest eine praxistaugliche Näherung mit folgender Funktion bestimmen:

Abgesehen davon, dass ich die Funktion für Quark halte - gibt bei mir im IE 5.01 den Wert 19 aus, was bei normaler Schriftgröße für 1ex definitiv viel zu viel sein dürfte - warum so umständlich?

Mein Vorschlag:

function heightInPx(height) {  
    var div = document.createElement("div");  
    div.style.height = height;  
    div.style.overflow = "hidden"; // fuer IE  
    document.body.appendChild(div);  
    h = div.offsetHeight;  
    document.body.removeChild(div);  
    return h;  
}

Damit bekomme ich unter Angabe des Parameters "1ex" 8 heraus, was mir bei meinen Schrifteinstellungen auch sehr viel plausibler erscheint.

Die Methode läßt sich zur Bestimmung der Länge eines em entsprechend abwandeln.

"Messung" für "1em" genauso leicht möglich, wenn du das als Parameter übergibst. Und Herumgehampel mit .innerHTML und Grausligkeiten wie <font> fällt vollkommen weg.

Btw: Für "1em" bekomme ich 16 heraus, also _kann_ der von deiner Funktion ermittelte Wert 19 für 1ex gar nicht stimmen.

gruß,
wahsaga

[Houyhnhnm]

Das nennt man 'optimization by forum' - dank!

[Houyhnhnm]

Du gehst in Deiner Funktion davon aus, daß die Pixel des Ausgabegerätes quadratisch sind - das gilt jedoch nicht immer, vor allem bei Druckern.

[Houyhnhnm]

In x-Richtung geht es leider nicht ohne das innerHTML-'Gehampel'; ein leerer div hat keine Breite...

function emToPx(w) {
    if (!w)
        w = 1;
    var div = document.createElement("div");
    div.style.width = w.toString() + 'em';
    div.style.overflow = "hidden";
    div.innerHTML = 'm';
    document.body.appendChild(div);
    var h = div.offsetWidth;
    document.body.removeChild(div);
    return h;
}

Frage: In welcher Maßeinheit sind denn die size-Angaben in font?

[Struppi]

In x-Richtung geht es leider nicht ohne das innerHTML-'Gehampel'; ein leerer div hat keine Breite...

Bei mir schon.

function emToPx(w) {
    if (!w)
        w = 1;
    var div = document.createElement("div");
    div.style.width = w.toString() + 'em';

Das toString() macht JS von alleine.

div.style.overflow = "hidden";

und das ist hier wiederrum nicht nötig.

div.innerHTML = 'm';

ebenso

document.body.appendChild(div);
    var h = div.offsetWidth;
    document.body.removeChild(div);
    return h;
}

Ich komm auf das um eine relative Einheit in Pixel umzurechenen:

  
function check_px(unit)  
{  
    if(!document.createElement) return;  
    if(!unit) unit = 'em';  
    var div = document.createElement('div');  
    div.style.width = '1' + unit;  
    document.body.appendChild( div );  
    var px = div.offsetWidth;  
    document.body.removeChild( div );  
    return px ;  
}  

Frage: In welcher Maßeinheit sind denn die size-Angaben in font?

Browserspezifisch?

Struppi.

[wahsaga]

hi,

div.style.overflow = "hidden";

und das ist hier wiederrum nicht nötig.

Doch, es ist angebracht, da der IE auch ein leeres Element gerne auf eine Mindesthöhe hypothetischen Textinhaltes ausdehnt - das führt zu einem Problem, wenn du einen Wert "umrechnen" möchtest, der kleiner als die aktuelle Zeilenhöhe ist.

Wenn ich meine Beispielfunktion ohne diese Zeile benutze, bekomme ich für eine Höhe von 1ex einen Wert von 19 Pixeln angezeigt - mit overflow:hidden nur 16. (Zumindest im IE 5.01, höhere Versionen zum Testen gerade nicht verfügbar.)

gruß,
wahsaga

[Struppi]

div.style.overflow = "hidden";

und das ist hier wiederrum nicht nötig.

Doch, es ist angebracht, da der IE auch ein leeres Element gerne auf eine Mindesthöhe hypothetischen Textinhaltes ausdehnt - das führt zu einem Problem, wenn du einen Wert "umrechnen" möchtest, der kleiner als die aktuelle Zeilenhöhe ist.

Wenn ich meine Beispielfunktion ohne diese Zeile benutze, bekomme ich für eine Höhe von 1ex einen Wert von 19 Pixeln angezeigt - mit overflow:hidden nur 16. (Zumindest im IE 5.01, höhere Versionen zum Testen gerade nicht verfügbar.)

Du hast gesehen, das nicht mehr die Höhe gesetzt wird, sondern die Breite?

Struppi.

[Struppi]

Nämlich wieviele px ein ex sind.

Das haten wir gerade letzte Woche, der Thread scheiont aber och nicht im Archiv zu sein.

Mein Lösung sah so aus, es gab aber noch weitere von Ingo und Mathias

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;  
}

Struppi.

[Houyhnhnm]

Das habe ich eben auch festgestellt. Ich hatte nicht mehr mit weiteren Antworten gerechnet und die ersten waren klar negativ.

[Robert Bienert]

Nämlich weshalb man <font> nicht benutzen sollte:

Selfhtml - Ältere Elemente zur Schriftformatierung

Ansonsten: Der Code ist recht klein, was mir gefällt. Ich werde deine Funktion mal unter Linux und Mac OS X testen, wenn es dort ebenfalls [latex]
\pi \cdot Daumen
[/latex] funktioniert, gäbe das doch ein schönes Bookmarklet.

Viele Grüße,
Robert