[js] em of ex naar px? - Softwareontwikkeling

zondag 9 januari 2005 18:19

Acties:

Verwijderd

Topicstarter

is het mogelijk om een bepaalde maat in em of ex om te rekenen naar px?

als er een padding is van 5em, kan ik dan berekenen hoeveel px dat is?
of is er misschien een standaard maat, ik weet dat deze kan veranderen,
maar dat zou dan de laatste oplossing kunnen zijn.
of is die maat bij elke browser/computer anders?

ik wil namelijk een em of ex maat optellen bij een px maat.

zondag 9 januari 2005 18:21

Acties:

Verwijderd

[google=em en px conversion] :
> http://archivist.incutio.com/viewlist/css-discuss/34727

zondag 9 januari 2005 18:23

Acties:

Sendy

Een em of ex zijn de (standaard-)maten van een font. Em is normaal gesproken de breedte van een "M" en ex is de hoogte van een "x".

Dat kan je dus niet zomaar omrekenen, behalve als je de maten van het font weet. Dit is echter nog niet handig, want op het web kan iedereen eigen fonts gebruiken. Dus je hebt gelijk: de maat is bij elke browser/computer anders. Je kan heel misschien standariseren op Windows en IE en een specifiek font.

[ Voor 4% gewijzigd door Sendy op 09-01-2005 18:25 ]

zondag 9 januari 2005 20:43

Acties:

Verwijderd

gaat niet nee, als ik een groter lettertype instel voor m'n browser, dan schalen em en ex maten netjes mee, px maten blijven gewoon netjes op de pixel. Als je het een en ander op wil tellen kan je misschien creatief doen met margins en paddings of een extra container gebruiken

zondag 9 januari 2005 21:01

Acties:

Verwijderd

Topicstarter

extra containers zijn voor mijn script helaas niet mogelijk.

maar als de em aangepast is dan zou het aantal px's ook aan moeten passen.

maar zo te zien is het niet mogelijk, dan ga ik dus voor de standaart waarde in IE,
en volgens de link van euss is die 16px == 1em

[ Voor 18% gewijzigd door Verwijderd op 09-01-2005 21:02 ]

zondag 9 januari 2005 21:09

Acties:

Verwijderd

niet mogelijk is een raar woord

wat je eventueel kan doen (gedachtenspinsel)

zet ergens een hidden div neer met wat text erin (eventueel absoluut gepositioneerd), padding op 0, border op 0, lineheight op 1em, fontgrootte klein, de hoogte is dan 1em.

Vraag vervolgens met javascript de hoogte van die div op en voila: da actuele em hoogte in px

zondag 9 januari 2005 22:24

Acties:

Verwijderd

Topicstarter

als je daarvan de hoogte opvraagt dan krijg je tog de hoogte in em...

zondag 9 januari 2005 22:51

Acties:

Verwijderd

code:

<html>

<head>
<style>
div#embox {
margin: 0;
padding: 0;
height: 1em;
width: 1em;
background-color: red;
overflow: hidden;
}
</style>
<script type="text/javascript">
function checkEm() { 
var embox = document.getElementById('embox');
document.getElementById('eminpx').firstChild.nodeValue = embox.clientHeight;
}
</script>
</head>

<body>

<div id="embox"></div>
<div id="eminpx">#</div>
<p>
<input type="button" onclick="checkEm()" value="Check">
</p>
</body>

</html>

klik, pas je lettergrootte aan en klik nog eens

vervolgens kan je de visibility op hidden zetten (geen display: none) en eventueel absoluut positioneren zodat ie ook nog uit de flow is

[ Voor 57% gewijzigd door Verwijderd op 09-01-2005 23:05 . Reden: wat IE bugs fixed ]

zondag 9 januari 2005 22:51

Acties:

Verwijderd

is het mogelijk om een bepaalde maat in em of ex om te rekenen naar px?

als er een padding is van 5em, kan ik dan berekenen hoeveel px dat is?

Dat kan. 1em is gelijk aan de gespecificeerde font-grootte. Dus stel dat je als grootte 12px hebt gebruikt (voor het HTML element) komt dat overeen met 5*12px = 60px. Heb je echter geen standaard grootte gebruikt dan verschilt het per browser implementatie.

zondag 9 januari 2005 23:07

Acties:

Verwijderd

Topicstarter

mooi script mophor,

alleen ik krijg het niet werkent in IE, en dat was nou eigenlijk wat ik wel nodig had...

zondag 9 januari 2005 23:10

Acties:

Verwijderd

zaten wat foutjes in, maar nu gefixed (die eminpx div heeft content nodig (een spatie alleen is niet voldoende, overflow: hidden toegevoegd omdat de testdiv anders hoger wordt (je kan ook de width uitlezen) vanwege de text die er in kan staan (textsize kleiner maken voor die div werkt niet want dan wordt je em ook kleiner uiteraard), en "var" voor die embox var gezet, omdat het anders ook niet werkt.

Met een timertje erin kan je hem ook dynamisch laten checken

zondag 9 januari 2005 23:31

Acties:

Verwijderd

Topicstarter

tnx, dat is persies wat ik nodig heb.
ik laat gewoon elke keer dat ik iets bereken de hoogte meten, dus er hoeft geen timertje in.

badankt !