tag:forum.selfhtml.org,2005:/self Was Sie schon immer über ex wissen wollten – SELFHTML-Forum 2006-03-23T09:09:40Z https://forum.selfhtml.org/self/2006/mar/22/was-sie-schon-immer-ueber-ex-wissen-wollten/949187#m949187 Houyhnhnm houyhnhnm@online.de 2006-03-22T13:52:12Z 2006-03-22T13:52:12Z Was 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#m949191 wahsaga http://wazgnuks.net/ 2006-03-22T14:12:09Z 2006-03-22T14:12:09Z Was 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#m949189 Struppi struebig@gmx.net http://javascript.jstruebig.de/ 2006-03-22T14:37:31Z 2006-03-22T14:37:31Z Was 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#m949188 Robert Bienert http://www.robertbienert.de/ 2006-03-22T18:07:38Z 2006-03-22T18:07:38Z Was 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#m949190 Houyhnhnm houyhnhnm@online.de 2006-03-22T14:47:46Z 2006-03-22T14:47:46Z Was 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#m949197 Houyhnhnm houyhnhnm@online.de 2006-03-22T14:29:16Z 2006-03-22T14:29:16Z Was 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#m949192 Houyhnhnm houyhnhnm@online.de 2006-03-22T14:51:02Z 2006-03-22T14:51:02Z Was 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#m949193 Houyhnhnm houyhnhnm@online.de 2006-03-22T15:05:57Z 2006-03-22T15:05:57Z Was 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#m949194 Struppi struebig@gmx.net http://javascript.jstruebig.de/ 2006-03-22T22:05:40Z 2006-03-22T22:05:40Z Was 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#m949195 wahsaga http://wazgnuks.net/ 2006-03-23T09:06:13Z 2006-03-23T09:06:13Z Was 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#m949196 Struppi struebig@gmx.net http://javascript.jstruebig.de/ 2006-03-23T09:09:40Z 2006-03-23T09:09:40Z Was 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>