Sent by Michael Geary on 12 August 2006 21:09
> From: Micky Hulse
>
> I just found this neat tool:
>
> <http://riddle.pl/emcalc/>
>
> Looks like a great tool to help one create an EM-based layout...
>
> I have been wanting to make the move to EM's for layout, but
> I do not see EM layouts being practical when it comes to
> layouts that are needing pixel precision (some clients want
> that)... For example, a width of 700px for a child of the
> body converts to 43.75em.
Alas, it's not that simple. You're looking at the conversion for a specific
font size, 16px. At any other font size, the conversion will be different.
Font sizes, of course, vary with different browsers and browser settings, OS
logical display resolutions (e.g. the 96 DPI vs. 120 DPI setting in
Windows), and the like. So the conversion between em and px sizes varies
too.
> How do most browsers treat that
> number? Just speculating, but I would imagine that some
> browsers round to the nearest whole number.
If you try to mix em and px sizes, roundoff error is the least of your
worries! :-)
> Can I rely on the above linked-to tool?
Yes, in the sense that its calculations are probably accurate.
No, if it misleads you into thinking you can mix and match em and px sizes.
> Anyone have links to similar tools?
Any old calculator will do the job. But you should hear alarm bells if
you're doing the calculation at all, because you're building something that
will work at a specific font size only.
> What is the actual math to do the PX > EM conversion?
First, what is an "em"?
http://www.w3.org/TR/CSS21/syndata.html#length-units
* em: the 'font-size' of the relevant font
In other words, 1em is equal to the font-size.
So, for a font size in pixels, the conversion is simple:
px = em * fontSizeInPixels
Or
em = px / fontSizeInPixels
For a font size in points, it depends on the number of pixels per point,
e.g.
px = em * ( fontSizeInPoints * pixelsPerPoint )
em = px / ( fontSizeInPoints * pixelsPerPoint )
And of course, the number of pixels per point varies on different machines,
independently of the default font size.
-Mike
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
