tag:forum.selfhtml.org,2005:/selfWas Sie schon immer über ex wissen wollten – SELFHTML-Forum2006-03-23T09:09:40Zhttps://forum.selfhtml.org/self/2006/mar/22/was-sie-schon-immer-ueber-ex-wissen-wollten/949187#m949187Houyhnhnmhouyhnhnm@online.de2006-03-22T13:52:12Z2006-03-22T13:52:12ZWas Sie schon immer über ex wissen wollten<p>Nämlich wieviele px ein ex sind.</p>
<p>Man kann zumindest eine praxistaugliche Näherung mit folgender Funktion bestimmen:</p>
<p>function exToPx() {<br>
var div = document.createElement("div");<br>
document.getElementsByTagName("body")[0].appendChild(div);<br>
div.innerHTML = 'xxx xxx';<br>
div.style.height = '10px';<br>
div.style.width = '2em';<br>
div.style.overflow = 'hidden';<br>
var h = div.scrollHeight / 2;<br>
document.getElementsByTagName("body")[0].removeChild(div);<br>
return h;<br>
}</p>
<p>Für andere Fontgrößen schreibt man:</p>
<p>div.innerHTML = '<font size=n>xxx xxx</font>';</p>
<p>Wobei n der Wert für die gewünschte Größe ist.</p>
<p>Die Funktion ist erfolgreich getestet für FF 1.0, IE 6, Opera 7 und Mozilla 1.7</p>
<p>Die Methode läßt sich zur Bestimmung der Länge eines em entsprechend abwandeln.</p>
https://forum.selfhtml.org/self/2006/mar/22/was-sie-schon-immer-ueber-ex-wissen-wollten/949191#m949191wahsagahttp://wazgnuks.net/2006-03-22T14:12:09Z2006-03-22T14:12:09ZWas Sie schon immer über ex wissen wollten<p>hi,</p>
<blockquote>
<p>Man kann zumindest eine praxistaugliche Näherung mit folgender Funktion bestimmen:</p>
</blockquote>
<p>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?</p>
<p>Mein Vorschlag:</p>
<pre><code class="block language-javascript"><span class="token keyword">function</span> <span class="token function">heightInPx</span><span class="token punctuation">(</span><span class="token parameter">height</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
div<span class="token punctuation">.</span>style<span class="token punctuation">.</span>height <span class="token operator">=</span> height<span class="token punctuation">;</span>
div<span class="token punctuation">.</span>style<span class="token punctuation">.</span>overflow <span class="token operator">=</span> <span class="token string">"hidden"</span><span class="token punctuation">;</span> <span class="token comment">// fuer IE </span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>div<span class="token punctuation">)</span><span class="token punctuation">;</span>
h <span class="token operator">=</span> div<span class="token punctuation">.</span>offsetHeight<span class="token punctuation">;</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>div<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> h<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Damit bekomme ich unter Angabe des Parameters "1ex" 8 heraus, was mir bei meinen Schrifteinstellungen auch sehr viel plausibler erscheint.</p>
<blockquote>
<p>Die Methode läßt sich zur Bestimmung der Länge eines em entsprechend abwandeln.</p>
</blockquote>
<p>"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.</p>
<p>Btw: Für "1em" bekomme ich 16 heraus, also _kann_ der von deiner Funktion ermittelte Wert 19 für 1ex gar nicht stimmen.</p>
<p>gruß,<br>
wahsaga</p>
<div class="signature">-- <br>
/voodoo.css:<br>
#GeorgeWBush { position:absolute; bottom:-6ft; }
</div>
https://forum.selfhtml.org/self/2006/mar/22/was-sie-schon-immer-ueber-ex-wissen-wollten/949189#m949189Struppistruebig@gmx.nethttp://javascript.jstruebig.de/2006-03-22T14:37:31Z2006-03-22T14:37:31ZWas Sie schon immer über ex wissen wollten<blockquote>
<p>Nämlich wieviele px ein ex sind.</p>
</blockquote>
<p>Das haten wir gerade letzte Woche, der Thread scheiont aber och nicht im Archiv zu sein.</p>
<p>Mein Lösung sah so aus, es gab aber noch weitere von Ingo und Mathias</p>
<pre><code class="block language-javascript"><span class="token keyword">function</span> <span class="token function">check_px</span><span class="token punctuation">(</span><span class="token parameter">unit</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>document<span class="token punctuation">.</span>createElement<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>unit<span class="token punctuation">)</span> unit <span class="token operator">=</span> <span class="token string">'em'</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> s <span class="token operator">=</span> div<span class="token punctuation">.</span>style<span class="token punctuation">;</span>
s<span class="token punctuation">.</span>position <span class="token operator">=</span> <span class="token string">'absolute'</span><span class="token punctuation">;</span>
s<span class="token punctuation">.</span>padding <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
s<span class="token punctuation">.</span>margin <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
s<span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token string">'1'</span> <span class="token operator">+</span> unit<span class="token punctuation">;</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span> div <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> px <span class="token operator">=</span> div<span class="token punctuation">.</span>offsetWidth<span class="token punctuation">;</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span> div <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Struppi.</p>
<div class="signature">-- <br>
<a href="http://javascript.jstruebig.de/" rel="nofollow noopener noreferrer">Javascript ist toll</a>
</div>
https://forum.selfhtml.org/self/2006/mar/22/was-sie-schon-immer-ueber-ex-wissen-wollten/949188#m949188Robert Bienerthttp://www.robertbienert.de/2006-03-22T18:07:38Z2006-03-22T18:07:38ZWas Sie schon immer über <font> und ex wissen wollten<p>Nämlich weshalb man <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>font</span><span class="token punctuation">></span></span></code> nicht benutzen sollte:</p>
<p>Selfhtml - <a href="http://de.selfhtml.org/html/text/schrift.htm" rel="nofollow noopener noreferrer">Ältere Elemente zur Schriftformatierung</a></p>
<p>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]<br>
\pi \cdot Daumen<br>
[/latex] funktioniert, gäbe das doch ein schönes Bookmarklet.</p>
<p>Viele Grüße,<br>
Robert</p>
https://forum.selfhtml.org/self/2006/mar/22/was-sie-schon-immer-ueber-ex-wissen-wollten/949190#m949190Houyhnhnmhouyhnhnm@online.de2006-03-22T14:47:46Z2006-03-22T14:47:46ZWas Sie schon immer über ex wissen wollten<p>Das habe ich eben auch festgestellt. Ich hatte nicht mehr mit weiteren Antworten gerechnet und die ersten waren klar negativ.</p>
https://forum.selfhtml.org/self/2006/mar/22/was-sie-schon-immer-ueber-ex-wissen-wollten/949197#m949197Houyhnhnmhouyhnhnm@online.de2006-03-22T14:29:16Z2006-03-22T14:29:16ZWas Sie schon immer über ex wissen wollten<p>Das nennt man 'optimization by forum' - dank!</p>
https://forum.selfhtml.org/self/2006/mar/22/was-sie-schon-immer-ueber-ex-wissen-wollten/949192#m949192Houyhnhnmhouyhnhnm@online.de2006-03-22T14:51:02Z2006-03-22T14:51:02ZWas Sie schon immer über ex wissen wollten<p>Du gehst in Deiner Funktion davon aus, daß die Pixel des Ausgabegerätes quadratisch sind - das gilt jedoch nicht immer, vor allem bei Druckern.</p>
https://forum.selfhtml.org/self/2006/mar/22/was-sie-schon-immer-ueber-ex-wissen-wollten/949193#m949193Houyhnhnmhouyhnhnm@online.de2006-03-22T15:05:57Z2006-03-22T15:05:57ZWas Sie schon immer über ex wissen wollten<p>In x-Richtung geht es leider nicht ohne das innerHTML-'Gehampel'; ein leerer div hat keine Breite...</p>
<p>function emToPx(w) {<br>
if (!w)<br>
w = 1;<br>
var div = document.createElement("div");<br>
div.style.width = w.toString() + 'em';<br>
div.style.overflow = "hidden";<br>
div.innerHTML = 'm';<br>
document.body.appendChild(div);<br>
var h = div.offsetWidth;<br>
document.body.removeChild(div);<br>
return h;<br>
}</p>
<p>Frage: In welcher Maßeinheit sind denn die size-Angaben in font?</p>
https://forum.selfhtml.org/self/2006/mar/22/was-sie-schon-immer-ueber-ex-wissen-wollten/949194#m949194Struppistruebig@gmx.nethttp://javascript.jstruebig.de/2006-03-22T22:05:40Z2006-03-22T22:05:40ZWas Sie schon immer über ex wissen wollten<blockquote>
<p>In x-Richtung geht es leider nicht ohne das innerHTML-'Gehampel'; ein leerer div hat keine Breite...</p>
</blockquote>
<p>Bei mir schon.</p>
<blockquote>
<p>function emToPx(w) {<br>
if (!w)<br>
w = 1;<br>
var div = document.createElement("div");<br>
div.style.width = w.toString() + 'em';</p>
</blockquote>
<p>Das toString() macht JS von alleine.</p>
<blockquote>
<p>div.style.overflow = "hidden";</p>
</blockquote>
<p>und das ist hier wiederrum nicht nötig.</p>
<blockquote>
<p>div.innerHTML = 'm';</p>
</blockquote>
<p>ebenso</p>
<blockquote>
<p>document.body.appendChild(div);<br>
var h = div.offsetWidth;<br>
document.body.removeChild(div);<br>
return h;<br>
}</p>
</blockquote>
<p>Ich komm auf das um eine relative Einheit in Pixel umzurechenen:</p>
<pre><code class="block language-javscript">
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 ;
}
</code></pre>
<blockquote>
<p>Frage: In welcher Maßeinheit sind denn die size-Angaben in font?</p>
</blockquote>
<p>Browserspezifisch?</p>
<p>Struppi.</p>
<div class="signature">-- <br>
<a href="http://javascript.jstruebig.de/" rel="nofollow noopener noreferrer">Javascript ist toll</a>
</div>
https://forum.selfhtml.org/self/2006/mar/22/was-sie-schon-immer-ueber-ex-wissen-wollten/949195#m949195wahsagahttp://wazgnuks.net/2006-03-23T09:06:13Z2006-03-23T09:06:13ZWas Sie schon immer über ex wissen wollten<p>hi,</p>
<blockquote>
<blockquote>
<p>div.style.overflow = "hidden";</p>
</blockquote>
<p>und das ist hier wiederrum nicht nötig.</p>
</blockquote>
<p>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.</p>
<p>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.)</p>
<p>gruß,<br>
wahsaga</p>
<div class="signature">-- <br>
/voodoo.css:<br>
#GeorgeWBush { position:absolute; bottom:-6ft; }
</div>
https://forum.selfhtml.org/self/2006/mar/22/was-sie-schon-immer-ueber-ex-wissen-wollten/949196#m949196Struppistruebig@gmx.nethttp://javascript.jstruebig.de/2006-03-23T09:09:40Z2006-03-23T09:09:40ZWas Sie schon immer über ex wissen wollten<blockquote>
<blockquote>
<blockquote>
<p>div.style.overflow = "hidden";</p>
</blockquote>
<p>und das ist hier wiederrum nicht nötig.</p>
</blockquote>
<p>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.</p>
<p>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.)</p>
</blockquote>
<p>Du hast gesehen, das nicht mehr die Höhe gesetzt wird, sondern die Breite?</p>
<p>Struppi.</p>
<div class="signature">-- <br>
<a href="http://javascript.jstruebig.de/" rel="nofollow noopener noreferrer">Javascript ist toll</a>
</div>