Welcome to WebmasterWorld Guest from 35.173.234.237

Forum Moderators: not2easy

Message Too Old, No Replies

px to em

easy as math?

     
7:10 pm on Feb 6, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 18, 2004
posts:119
votes: 0


I've tried to figure out if it's possible to convert px to em, and I think I found a very simple formula that seems to do it, at least for the most popular browsers.

px * 0.0626 = em

For instance,
15px * 0.0626 = 0.939em
80px * 0.0626 = 5.008em

This seems to give accurate results with Firefox in Linux and Firefox and IE on windows. It's not equally accurate in konqueror, but still fairly close.

I wonder if it works on Mac..

I did a google on it, but I couldn't find anything that confirms this, so I figured this wasn't widely known.

Any feedback on this? Is it stupid to try to do this in the first place? ...

8:50 pm on Feb 6, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member kaled is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 2, 2003
posts:3710
votes: 0


px and pt, amongst others, are absolute values.
em is a relative value (I think).

In this case, there is no definitive conversion factor.

However, I'm most definitely not a CSS guru so someone may disagree.

Kaled.

8:55 pm on Feb 6, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 11, 2002
posts:2024
votes: 0


A very good method to do resizeable text on almost any browser can be found here: [thenoodleincident.com...]

It uses a mixture of em and percentage, to make this work.

9:06 pm on Feb 6, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 18, 2004
posts:119
votes: 0


Kaled,

yes, em is relative, but if you don't set a size which it can be relative to, then it must use a browser-specific default size. (anyone correct me if I'm mistaken)

That's what this is about, so instead of setting

body { font-size:10px; }
you could set
body { font-size:0.626em; }
10:57 pm on Feb 6, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 14, 2002
posts:157
votes: 0


Valder, I'm not sure, what you are trying to do. The size of em depends on font face and font size. There is no fixed relation between em and px.
12:26 am on Feb 7, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 18, 2004
posts:119
votes: 0


What am I trying to do.. good question! ;)

It's nothing important at all, just a little something that triggered my imagination or something.

Did you try it though?

To make the point a bit more obvious, in case it's unclear:

<html>
<head>
<style>
p {font-size: 30px}
</style>
</head>
<body>
<p>Lorem ipsum bla bla</p>
</body>
</html>

(30px * 0.0626 = 1.878em)
should display very much the same as

<html>
<head>
<style>
p {font-size: 1.878em}
</style>
</head>
<body>
<p>Lorem ipsum bla bla</p>
</body>
</html>

These examples displayed the exact same on my computers, in both Firefox and IE. In Konqueror (on my machine), 30 px differs slightly to 1.878em.

So what am I trying to accomplish?
-Not much, as you can see, just making a point.

You say em depends on font-family? I'm under the impression that px and em depends on font-family just the same, and that there is in fact a fixed relation between em and px (when the size of em hasn't been set!).

If someone can prove me wrong, I'm more than willing to listen, because I'm not sure about these things.

1:10 am on Feb 7, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 14, 2002
posts:157
votes: 0


First of all, the em unit has two different meanings:

1. When applied to any property but font-size, it is is equal to the computed value of the font-size property of the element on which it is used.

2. When applied to the value of the font-size property itself it refers to the font size of the parent element.

So definition 'p {font-size: 1.878em}' in your example means, that fonts of paragraphs should be 1.878 times larger than fonts of their parent element. It should behave like font-size: 187.8% (actually it's not exactly the same because of wrong implementation of some browsers).

The only relation to px is, that the body has not its parent element and in this case the browser default is used. However you can't predict, what the browser default is, so this relation is quite useless.

3:07 am on Feb 7, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 18, 2004
posts:119
votes: 0


Well, prediction is a key-word here, and like I said I've tested it in IE and Firefox and Konqueror, so this is much of the question; does this default go for all or at least most browsers?

The purpose would be to use only relative sizes, even for setting the base size.

...

Hmm, for a moment there I was thinking this could perhaps be good for cross-browser designing and perhaps even different screen resolutions, but after giving it some more thought, I suppose there is no reason why I should use a relative size to set the base size. At least not with todays browsers. ..at least no reason that I can think of..

3:25 am on Feb 7, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


I suppose there is no reason why I should use a relative size to set the base size.

Here's one:

If you set the base font size in the body using a fixed unit, IE browsers will not allow users to resize ANY of your text, even if you use relative units elsewhere.

However, if you use a relative unit to declare the base font size, then size all other fonts in relation to that base font using relative units, then ALL browsers will allow users to resize text.

In these days of (a) increased emphasis on accessibility and (b) super-high screen resolutions, allowing users to control the display size of your text is vital.

To overcome the somewhat ambiguous results of using relative sizes based on a relative size, I set my base font to 62.8%, which makes 1.0em elsewhere in the document approximately 10px. Then when I need to size text in the document, I can easily estimate what font size I'll get from my EM units. 1.0em~10px. 1.1em~11px. 1.5em~15px. Etc.

Note that 62.8% is only .2 percent off from your (valder's) calculation. The difference being that the above method doesn't require me to do any more math. ;)

cEM

11:04 am on Feb 7, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 14, 2002
posts:157
votes: 0


I'm sorry, Vlader, but I still do not understand, what you are trying to calculate. The default font size of *every* browser is exactly 1em by definition. And every browser allows users to set their own default font size in px (or pt transformed in some way to px).

For instance, factory default of IE on Windows is 16px, but it can be more or less, if a user sets larger or smaller font size. In fact, it does not depend on what a uset sets in the browser only, but also on Windows settings as well. Try to set fonts 90% large in Windows and 'large' in Explorer, and then calculate em/px ratio again -- it will be different.

1:59 pm on Feb 7, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 18, 2004
posts:119
votes: 0


Thanks cEM, that's good advice. "Base font: 62.8%" has been added to my notes, much easier to remember too :)

Marek,
cEM took the intentions that I had left hanging in thin air from the beginning, and turned them into words:

In these days of (a) increased emphasis on accessibility and (b) super-high screen resolutions, allowing users to control the display size of your text is vital.

And although I wasn't sure it was good for anything to set the base font to a relative size, I had a hunch, and cEM confirmed it.

... ALL browsers will allow users to resize text
3:43 pm on Feb 7, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 14, 2002
posts:157
votes: 0


Valder, there are no doubts that setting font size in relative and resizable units, i.e. em or percents, is a good thing. I just wanted to make clear, that there is no fixed ratio between ems and pixels. Default body font size is always 1em = 100%, even if you set 'Smallest' or 'Largest' font in your browser, even if you set 200% font size in Windows, etc.

In all those cases font sizes in pexeles varies very widely, but they are still 1em = 100%.

4:33 pm on Feb 7, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


marek you're spot on..
100% = 1em = users default setting

e.g. if I set my user preference to 12px in IE the 62.8% body/base size will be 12px x 62.8% will want to render at 7.5px (it won't of course because that's too small)

There's no definitive answer to pixel-em correlation but generally it is 1/16 = 0.0625 because 16px is what most browsers ship out of the factory with as their default.

This does not include Mac browsers which I believe can be 14px, ~ therefore your your 62.8% (0.626em) will render approximately 10px windows and 9px Mac providing the users haven't adjusted their default/factory settings.

For this reason I really do think that 62.8% is too small a base setting. Not becasue I wouldn't like to use 10px across all sites, but I can't guarantee that users haven't already adjusted their default sizes if they prefer smaller text and more importantly because it "knocks out" IE's lower range settings ~ small and smallest ~ it won't render lower than 9px if memory serves. AND Then if you did have a user who required large text they can then only resize it two scales above your "10px" which may not be enough for them.

Personally that work that Owen Briggs did back then was very useful, but I don't think I'd go much below 85-90% for IE's base size for this reason.

I know that a lot of people consider 16px to be too big as normal viewing size but if your stylesheet takes away too much of a chunk of their resizing range/capability it kinda defeats the purpose of why you might be using that relative size ~ to give them (IE users) that accessibility ~ in the first place.

It would be nicer if IE would do lots of things (zoom, resize pixels etc..) when it comes to text resizing but I did a bit of research into this and now wonder if it's a better option to use one base for everyone else who can zoom up/down infinitely and then give IE a different look, (this probably means bigger intial text than you'd like) say by setting the intial base size to 90-100% for IE Only, because otherwise we are taking away the very accessibility we are trying to give IE users?

just thoughts and I'd welcome yours back again

Suzy

7:07 pm on Feb 7, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 18, 2004
posts:119
votes: 0


Marek, I'm aware that there is no absolute fixed ratio between ems and pixels.

When I said

... and that there is in fact a fixed relation between em and px (when the size of em hasn't been set!).
I should have said something like:
"it looks like it is a fixed relation between em and px, but only with 'most' browsers (as in IE and FF) and with default settings (as in 'not configured by the user')".
Thanks for making it clear though. :)

Marek and Suzy said:

1em = 100%

I was not aware of this before cEM pointed out that he uses %, but it's clear now. Thanks for pointing it out guys! :)

And Suzy, as always, has some very good points.

Untill now, I've been using 0.8-0.9em as base setting (or 80-90% it seems :)), and I've been quite happy with that for most documents. I suppose that's not too bad of a choice then.

Regarding serving different styles to IE..
Is there an easy way to do this with css?
For instance some hack to prevent all browsers but IE to read the code? I have read about such things and even seen examples, just never tried it myself yet.

Eivind

9:02 pm on Feb 7, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


it "knocks out" IE's lower range settings ~ small and smallest ~ it won't render lower than 9px if memory serves. AND Then if you did have a user who required large text they can then only resize it two scales above your "10px" which may not be enough for them.

Suzy, it feels like we've been through this before, but I'm not recalling how the discussion ended last time.

Your point above about a too small base font-size messing up IE's resizeability is a major concern. I'm wondering, however, if simply making sure to size all text in EM increments higher than 1.0 would eliminate it as a problem.

In other words, if I set 62.8% as my base font, then 1.0em is about 10px, and sizes up and down from there. So, definitely, anything set at 1.0em isn't going to resize well in IE. Small is well-nigh illegible, smaller is non-existent, large and larger are hardly so.

But what if all the text is sized at 1.3em, or 1.4em? Won't that text resize in a reasonable way, while also allowing me the ease of unit selection that 1.0em=10px affords?

cEM

2:10 pm on Feb 8, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


But what if all the text is sized at 1.3em, or 1.4em? Won't that text resize in a reasonable way, while also allowing me the ease of unit selection that 1.0em=10px affords?

yes cEM it would, and very nicely too, but this is still purely a math trick that you would use and it's still based on a presumed 16px default setting,

I think what I'm actually meandering to is that rather than present IE with pretty (x-browser) matching designs, if the client (or I) would rather give them the resizing/accessibility feature why bother going to all that extra trouble?

valder asked

Regarding serving different styles to IE..
Is there an easy way to do this with css?
For instance some hack to prevent all browsers but IE to read the code?

yes valder there is there are Microsoft Conditional Comments [msdn.microsoft.com], when applied to CSS they can be used like this:

<style type="text/css" media="screen">
body {font-size: 10px;}
h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
@import "all.css";
</style>

<!--[if IE]>
<style type="text/css" media="screen">
body {font-size: 100%;}
@import "ie.css";
</style>
<![endif]-->

... that top bit will be read by all browsers then the bit inside the conditional will be read by all IE/Windows (the body rule and the import are not both necessary this is just to show that you can embed the IE CSS or call it externally as normal)

So what I'm thinking is that it's in the conditional that I would set the body font-size to be 85-100% (not 62.8%) and nothing else.. then IE could use the em/percentage settings, default or otherwise, set in the main stylesheet too without having to re-calculate anything.

basically being selfish: Why should I bother re-calculating all the relative sizes for it, (trying to outhink user defaults?), IE's lucky we're even providing the resizing functionality for it at all!

Suzy

3:33 pm on Feb 8, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


but this is still purely a math trick

Absolutely. But in my case I need all the math tricks I can get. ;)

7:15 pm on Feb 8, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 18, 2004
posts:119
votes: 0


Thanks Suzy, you've been very helpful. :)