FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

px to em relation

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


aegir
My qestion is, how many pixels (px) em usually has?

Ok I know that em can theoretically have any number of pixels.

What I ask is what distribution of values occur in real life, what range will cover for example 95% of users? Do such statistics exist?

I need to know because I am forced to combine em and px in page layout (page is generally done using ems but banners and some images have
pixel dimensions unfortunatelly). Sadly, CSS cannot handle things like:
Code:
width: 12em+120px
Sad
LukeakaDanish
I dont know about the statistics thing, but you could set the width to 12 em and then measure how many pixels it is with javascript and then add 120 to this and set the width of your object dynamically...

sounds hard but it should be pretty simple...

if you need help just ask...

Luke
AftershockVibe
There is no direct conversion I'm afraid because em is relative and px is absolute;

10px is ALWAYS 10 pixels (in height I think) regardless of resolution, browser etc.
1.5em is 150% of the current font size. This depends on the browser (in the case of defaults) and what element you're applying it to: a <h1> will have a larger default font than a <p>
Panrac
Why don't You just set font-size of the body (or maybe You alredy have done it since You said, You're finishing the layout), and that's Your 1em. No measurements or statistics are needed?
But if You really can't set the font size, you should check what are default font-size of browsers. I've noticed that for Firefox and Opera it's the same value, and it's 16-18px. Don't remember exactly, but You probably will be able to find it.
Hire's something about it: http://tinyurl.com/5ecgf
Hadn't read it, but it seams to suggest that there is a standard value of 16px.
Kaneda
AftershockVibe wrote:
1.5em is 150% of the current font size. This depends on the browser (in the case of defaults) and what element you're applying it to: a <h1> will have a larger default font than a <p>


Wow, for once I can correct you, ASV Smile At least somewhat, since that's either not very clear, or wrong Wink

1. Xem in font sizes: sets the font size to X * parent element's font size.
2. Xem in all other properties (width, height, border, padding, margin etc.): sets the property to X * current element's font size.

Since em's allow your users to change their browser settings for text size, the "parent element's font size" and "current element's font size" is variable however, which is the whole point Smile

Anyway, using this, you can calculate an approximate pixel size for the banner:

If the body's font-size is set to, say, 0.75em, that means 75% of the default font size. The default font size in all modern browsers for the "medium"/"normal" text size setting is 16px. We'll assume most users use that.

So, 0.75 * 16px = 12px for that setting. Which means that in the rest of the document (unless font-size changes elsewhere), 1em = 12px (again, for the medium setting).

Then you have to traverse through the elements to the element where your banner is placed. So, if, say, there's a <div> directly inside the <body> with font-size set to 2em, that means the font-size for medium text is now 2 * 12px = 24px. So, inside the <div>, 1em = 24px. Etc.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.