Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Pixel to Em conversion...

Reply
Thread Tools

Pixel to Em conversion...

 
 
Maxx Pollare
Guest
Posts: n/a
 
      05-30-2007
I'm in the process of creating some new CSS for my site (same as email)
and wanted to try something other then pixles for everything...

Unfortunately I couldn't get Google to give me a simple page that gives
me a relationship between Em and Pixels, as in "What the hell is an Em,
and how big is it in pixels?". So far I've scraped the experimental CSS
layouts twice because I can't things to work right with Em...

I am still learning all this CSS stuff, and for now most of my HTML is
either written in Notepad+ (XP) or gEdit (Ubuntu). I plan on learing
PHP next, once I've pick up some good books on it, and after I'm
finishing this HTML 4.01/CSS 2.1 stuff...

Note: I do not care about IE 5x or Netscape 4 until I reistall 98se on
a junker box... Which will probally be never...

--
Maxx Pollare, only a "small god" within this minds eye...
 
Reply With Quote
 
 
 
 
Chaddy2222
Guest
Posts: n/a
 
      05-30-2007
On May 30, 12:49 pm, Maxx Pollare <(E-Mail Removed)> wrote:
> I'm in the process of creating some new CSS for my site (same as email)
> and wanted to try something other then pixles for everything...
>
> Unfortunately I couldn't get Google to give me a simple page that gives
> me a relationship between Em and Pixels, as in "What the hell is an Em,
> and how big is it in pixels?". So far I've scraped the experimental CSS
> layouts twice because I can't things to work right with Em...
>
> I am still learning all this CSS stuff, and for now most of my HTML is
> either written in Notepad+ (XP) or gEdit (Ubuntu). I plan on learing
> PHP next, once I've pick up some good books on it, and after I'm
> finishing this HTML 4.01/CSS 2.1 stuff...
>
> Note: I do not care about IE 5x or Netscape 4 until I reistall 98se on
> a junker box... Which will probally be never...
>

1em is equivalent to 100%. I hope that helps a bit. Working with CSS
is a different mind set to udeing the old tables for layout, although
tables are easier for some things, mainly laying out for and other
items that you need in a grid type structure.
Use "%" if it's easier to work with.
--
Regards Chad. http://freewebdesign.awardspace.biz

 
Reply With Quote
 
 
 
 
David Dorward
Guest
Posts: n/a
 
      05-30-2007
On May 30, 3:49 am, Maxx Pollare <(E-Mail Removed)> wrote:
> I'm in the process of creating some new CSS for my site (same as email)
> and wanted to try something other then pixles for everything...
>
> Unfortunately I couldn't get Google to give me a simple page that gives
> me a relationship between Em and Pixels, as in "What the hell is an Em,
> and how big is it in pixels?". So far I've scraped the experimental CSS
> layouts twice because I can't things to work right with Em...


An em is the font height (or the font height of the parent element
when you are specifying the font-size).

Since this eventually means you are describing something as a ratio of
the font size of the parent element of html, this means that you are
describing things as a ratio of whatever font size the user as
selected as their preference.

Since you don't know what the user's preference is, you can't convert
from pixels to ems or the other way. If you could, then there would be
no point in using ems instead of pixels.

Just keep your body text (i.e. the main text) at 100% (trusting that
the user has their preference set to something comfortable to read
(and the browser defaults before changing are good for most people -
vendors have done a fair bit of usability testing) and adjust up and
down for headings, small print and similar.

--
David Dorward
http://dorward.me.uk/
http://blog.dorward.me.uk/

 
Reply With Quote
 
Jim Moe
Guest
Posts: n/a
 
      05-30-2007
Maxx Pollare wrote:
>
> Unfortunately I couldn't get Google to give me a simple page that gives
> me a relationship between Em and Pixels, as in "What the hell is an Em,
> and how big is it in pixels?". So far I've scraped the experimental CSS
> layouts twice because I can't things to work right with Em...
>

The default setting for browsers is 1 em = 16 pixels. The user has the
option to change that value to suit their preference.
Normally you would set font-size:100% for <body> and adjust the other
font sizes from there using per-cents or ems. There is really no need to
know the actual pixel setting for an em, it's all relative to the user's
preferred font size.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      05-30-2007
On 2007-05-30, David Dorward <(E-Mail Removed)> wrote:
> On May 30, 3:49 am, Maxx Pollare <(E-Mail Removed)> wrote:
>> I'm in the process of creating some new CSS for my site (same as email)
>> and wanted to try something other then pixles for everything...
>>
>> Unfortunately I couldn't get Google to give me a simple page that gives
>> me a relationship between Em and Pixels, as in "What the hell is an Em,
>> and how big is it in pixels?". So far I've scraped the experimental CSS
>> layouts twice because I can't things to work right with Em...

>
> An em is the font height (or the font height of the parent element
> when you are specifying the font-size).


Technically it's a measure of width (of an 'M') rather than of height.
An ex is supposed to be a measure of height (of an 'x'), but most
browsers don't bother to get exes exactly right.
 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      05-30-2007
On Wed, 30 May 2007 02:49:40 GMT Maxx Pollare scribed:

> I'm in the process of creating some new CSS for my site (same as email)
> and wanted to try something other then pixles for everything...
>
> Unfortunately I couldn't get Google to give me a simple page that gives
> me a relationship between Em and Pixels, as in "What the hell is an Em,
> and how big is it in pixels?". So far I've scraped the experimental CSS
> layouts twice because I can't things to work right with Em...
>
> I am still learning all this CSS stuff


1 em is the current local font size. There is no consistent relationship
to pixels.

--
Neredbojias
He who laughs last sounds like an idiot.
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      05-30-2007
Scripsit Ben C:

>> An em is the font height (or the font height of the parent element
>> when you are specifying the font-size).

>
> Technically it's a measure of width (of an 'M') rather than of height.


No it isn't. This disinformation used to be regularly presented and refuted
in various newsgroups, but recently it has been more quiet. Anyway, if in
doubt,
a) check the CSS specifications
b) make a simple test:
<div style="width:1em; height:1em; line-height:1; background:yellow:
color:black;font-size:300%">M</div>
and see if the width of M equals the width of the em square. To save your
time: it doesn't, except perhaps in some very fancy font - for most fonts,
it's considerably narrower.

> An ex is supposed to be a measure of height (of an 'x'), but most
> browsers don't bother to get exes exactly right.


Most browsers implement ex as 0.5em, which is exactly wrong for almost any
font - though perhaps a rough _average_ over fonts. Firefox 2 gets ex right.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
Toby A Inkster
Guest
Posts: n/a
 
      05-30-2007
Ben C wrote:

> Technically it's a measure of width (of an 'M') rather than of height.


In traditional typography, yes. But the modern definition of an 'em' is
that an em is the same as the font height.

The font height itself is quite a wishy-washy concept, but it can normally
be thought of as the height of most capital letters and lower-case letters
with ascenders (e.g. 'b', 'd', 'f', etc.). However, in certain fonts, some
of these letters may be smaller or taller than the font-height.

The CSS spec says that browsers are supposed to use the 1 em = font height
definition. So when using, say, a 13 px font, 1 em is supposed to be 13 px,
and doesn't depend at all on the width of the capital M, which could be
slightly larger or smaller than 13 px. The font may not even *have* a
capital letter M -- it may only have, say, Japanese Katakana characters
and no Western characters at all!

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.12-12mdksmp, up 95 days, 17:14.]

Non-Intuitive Surnames
http://tobyinkster.co.uk/blog/2007/0...tive-surnames/
 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      05-30-2007
On 30 May, 03:49, Maxx Pollare <(E-Mail Removed)> wrote:

> "What the hell is an Em, and how big is it in pixels?".


There's no such relationship, and to even think that there is is a
major error in CSS design. Read the groups' archives, as this gets
discussed to death.

To convert from pixels to ems, then converting 12pixels to 1em won't
go far wrong.

1em is 100%, so you can use percentages if you prefer.

Then after you've done that, normalise all em settings so that nothing
is less than than 0.75em. Possibly unreadable legal boilerplate might
go to 0.67em, but that's hard to read and anything less is impossible.

Then go through and delete (nearly) all the em settings anyway. It's
just not necessary in competent web design to set this explicitly
(thinking it's appropriate to do is again a major error, as it betrays
that you don't realise how little the author controls and how much the
reader controls).

If you set
body { font-size:1em; font-size:100%; }
then that's enough for nearly all web pages. <h*> will be bigger, but
the default style sheet will probably take care of that adequately
anyway. Semantic HTML markup (marking up your "headings" with <h*>
elements) will take care of most needs to set bigger sizes.

It's extremely rare to need to set a font-size > 2em, for anything.
Thinking this is a good idea is usually an indication of simple poor,
garish "eBay style" design.

If you still think you need to set em sizes all over the place, then
post again with example pages for where and why you think it's needed.

 
Reply With Quote
 
Toby A Inkster
Guest
Posts: n/a
 
      05-30-2007
Andy Dingley wrote:

> Then after you've done that, normalise all em settings so that nothing
> is less than than 0.75em. Possibly unreadable legal boilerplate might
> go to 0.67em, but that's hard to read and anything less is impossible.


I often drop superscripts down to .67em as they can otherwise disturb line
spacing. In my own writing, superscripts are nearly always footnotes, so
the readability of the textual content is not completely vital, as long as
the link can be followed.

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.12-12mdksmp, up 95 days, 17:51.]

Non-Intuitive Surnames
http://tobyinkster.co.uk/blog/2007/0...tive-surnames/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Is Fuji S3000 3.2m/pixel output, or 6 m/pixel interpolated output? Peter H Digital Photography 43 12-04-2003 02:35 PM
Fuji S3000 - 3.2 m/pixel or 6 m/pixel? Peter H Digital Photography 3 11-18-2003 11:17 PM
Re: Pixel size of individual Pixel Robert E. Williams Digital Photography 2 09-16-2003 03:02 PM
Re: Pixel size of individual Pixel Tom Thackrey Digital Photography 2 09-14-2003 04:17 PM
Hot pixel vs. stuck pixel Abrasha Digital Photography 5 09-02-2003 04:49 PM



Advertisments