.css() px vs. em

[Karl Swedberg-2]

Hi folks,

I'm trying to get the font size of some text using the .css() method, but I'm running into a problem because Firefox is returning the value in pixels while IE6 is returning the value in ems. Is this a bug? Or is it just a browser difference that we have to account for in our code?

Text is inside a div with ID of "container" and I have the following relevant CSS: 

body {

 font-size: 62.5%;

}

#container {

 font-size: 1.2em;

}

Here is what the browsers return for $('#container').css('fontSize') : 

Firefox: 12px

IE6: 1.2em

 

Actually, it looks to me like IE6 is doing the right thing here, returning the actual value from the stylesheet rather than a computed value.

This is a problem because I want to incrementally increase the font size. I was doing that in Firefox by 

1. getting the font size 

2. stripping the "px" with parseInt()

3. multiplying the remaining number by 1.2

4. reattaching the "px"

5. setting the new font size

I know that in this case I can simply grab the last two letters of the string and put them in a variable and attach them back after I do the multiplication. But does anyone have an idea why the difference is there in the first place, and if it should be there, and if there is a way to normalize it?

Thanks all for your help.

--Karl

_________________

Karl Swedberg

www.englishrules.com

www.learningjquery.com

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[dave.methvin]

> Firefox is returning the value in pixels while IE6 is returning

> the value in ems. Is this a bug?

 

It's just IE being IE. Other browsers have getComputedStyle which tells you the dimensions in pixels. IE has currentStyle; although that does tell you the current style (taking the CSS cascade into effect) it returns whatever dimensions were given in the style rule. jQuery's .css() method uses whatever it's dealt by the browser.

 

I think I've seen IE hacks where you can put a box around a character and then measure the box in pixels to get the font size, but my Google-fu is weak at the moment.

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[Luke Lutman]

I've run into the same problem with IE :-(

I did more or less what Dave suggested (untested, of course!):

var $tmp = $('#some-element')
     .append('<div style="position: absolute; width: ' +
$('#some-element').css('font-size') + ';" />')
     .find(':last-child')

var fontSizeInPx = $tmp.width();

$tmp.remove();

This would work for other units (i.e. in, pt) and other properties
(text-indent, line-height) too.

Some things to watch out for:
* the element you want to measure must be able to have children (i.e.
not <br />, <img />)
* this method makes the browser to two extra re-flows (I think?)
* make sure the appended div doesn't pick-up any funny business from the
cascade.

Luke

Dave Methvin wrote:

>>  Firefox is returning the value in pixels while IE6 is returning
>> the value in ems. Is this a bug?
>  
> It's just IE being IE. Other browsers have getComputedStyle which tells
> you the dimensions in pixels. IE has currentStyle; although that does
> tell you the current style (taking the CSS cascade into effect) it
> returns whatever dimensions were given in the style rule. jQuery's
> .css() method uses whatever it's dealt by the browser.
>  
> I think I've seen IE hacks where you can put a box around a character
> and then measure the box in pixels to get the font size, but my
> Google-fu is weak at the moment.
>
>
> ------------------------------------------------------------------------
>
> _______________________________________________
> jQuery mailing list
> discuss@...
> http://jquery.com/discuss/

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[Luke Lutman]

Here it is as a plugin (I don't have IE handy, but it the IE part of the
code works in FireFox):

Example:
$('#example').px('font-size'); -> '12px'

Plugin:
(function($){
       
        var $px = $(document.createElement('div')).css({
                position: 'absolute'
        });

        $.fn.px = function(prop) {
                var val;
                if($.browser.msie) {
                        $px
                        .clone()
                        .css('width', this.css(prop))
                        .appendTo(this[0])
                        .each(function(){
                                val = $(this).width() + 'px';
                        })
                        .remove();
                } else {
                        val = this.css(prop);
                }
                return val;
        };

})(jQuery);

Luke

Luke Lutman wrote:

> I've run into the same problem with IE :-(
>
> I did more or less what Dave suggested (untested, of course!):
>
> var $tmp = $('#some-element')
>      .append('<div style="position: absolute; width: ' +
> $('#some-element').css('font-size') + ';" />')
>      .find(':last-child')
>
> var fontSizeInPx = $tmp.width();
>
> $tmp.remove();
>
> This would work for other units (i.e. in, pt) and other properties
> (text-indent, line-height) too.
>
> Some things to watch out for:
> * the element you want to measure must be able to have children (i.e.
> not <br />, <img />)
> * this method makes the browser to two extra re-flows (I think?)
> * make sure the appended div doesn't pick-up any funny business from the
> cascade.
>
> Luke
>
> Dave Methvin wrote:
>>>  Firefox is returning the value in pixels while IE6 is returning
>>> the value in ems. Is this a bug?
>>  
>> It's just IE being IE. Other browsers have getComputedStyle which tells
>> you the dimensions in pixels. IE has currentStyle; although that does
>> tell you the current style (taking the CSS cascade into effect) it
>> returns whatever dimensions were given in the style rule. jQuery's
>> .css() method uses whatever it's dealt by the browser.
>>  
>> I think I've seen IE hacks where you can put a box around a character
>> and then measure the box in pixels to get the font size, but my
>> Google-fu is weak at the moment.
>>
>>
>> ------------------------------------------------------------------------
>>
>> _______________________________________________
>> jQuery mailing list
>> discuss@...
>> http://jquery.com/discuss/
>
>
> _______________________________________________
> jQuery mailing list
> discuss@...
> http://jquery.com/discuss/

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[Robert Biggs]

To have consistent font size across fonts, browsers and OSs and to be able to use variable lengths for font resizing, try the following percentage based method. It will use percentages that result in pixel lengths. This should solve your problem:

body { font-size: 13px; }
body * { line-height: 1.22em; }
table, td { font-size: inherit; font: 100%; }

/*
Use the following percentages for these pixel sizes:
63%              8px            
--------------------
70%              9px            
--------------------
77%             10px            
--------------------
85%             11px            
--------------------
92%             12px            
--------------------
100%            13px            
--------------------
107%            14px            
--------------------
114%            15px            
--------------------
122%            16px            
--------------------
129%            17px            
--------------------
136%            18px            
--------------------
144%            19px            
--------------------
152%            20px            
--------------------
159%            21px            
--------------------
167%            22px            
--------------------
174%            23px            
--------------------
182%            24px            
--------------------
189%            25px            
--------------------
197%            26px            
*/

Luke Lutman wrote:

Here it is as a plugin (I don't have IE handy, but it the IE part of the
code works in FireFox):

Example:
$('#example').px('font-size'); -> '12px'

Plugin:
(function($){
       
        var $px = $(document.createElement('div')).css({
                position: 'absolute'
        });

        $.fn.px = function(prop) {
                var val;
                if($.browser.msie) {
                        $px
                        .clone()
                        .css('width', this.css(prop))
                        .appendTo(this[0])
                        .each(function(){
                                val = $(this).width() + 'px';
                        })
                        .remove();
                } else {
                        val = this.css(prop);
                }
                return val;
        };

})(jQuery);

Luke

Luke Lutman wrote:
> I've run into the same problem with IE :-(
>
> I did more or less what Dave suggested (untested, of course!):
>
> var $tmp = $('#some-element')
>      .append('<div style="position: absolute; width: ' +
> $('#some-element').css('font-size') + ';" />')
>      .find(':last-child')
>
> var fontSizeInPx = $tmp.width();
>
> $tmp.remove();
>
> This would work for other units (i.e. in, pt) and other properties
> (text-indent, line-height) too.
>
> Some things to watch out for:
> * the element you want to measure must be able to have children (i.e.
> not <br />, )
> * this method makes the browser to two extra re-flows (I think?)
> * make sure the appended div doesn't pick-up any funny business from the
> cascade.
>
> Luke
>
> Dave Methvin wrote:
>>>  Firefox is returning the value in pixels while IE6 is returning
>>> the value in ems. Is this a bug?
>>  
>> It's just IE being IE. Other browsers have getComputedStyle which tells
>> you the dimensions in pixels. IE has currentStyle; although that does
>> tell you the current style (taking the CSS cascade into effect) it
>> returns whatever dimensions were given in the style rule. jQuery's
>> .css() method uses whatever it's dealt by the browser.
>>  
>> I think I've seen IE hacks where you can put a box around a character
>> and then measure the box in pixels to get the font size, but my
>> Google-fu is weak at the moment.
>>
>>
>> ------------------------------------------------------------------------
>>
>> _______________________________________________
>> jQuery mailing list
>> [e-mail]
>> http://jquery.com/discuss/
>
>
> _______________________________________________
> jQuery mailing list
> [e-mail]
> http://jquery.com/discuss/


_______________________________________________
jQuery mailing list
[e-mail]
http://jquery.com/discuss/

[John Resig]

Just as a follow up, here's how I helped Karl on AIM:

var num = parseFloat( val );
var type = val.slice(-2);
num *= 1.2;
$(...).css( "fontSize", num + type );

The difference in the reported fontSize is something we're looking at.

--John

On 1/6/07, Karl Swedberg <karl@...> wrote:

> Hi folks,
>
> I'm trying to get the font size of some text using the .css() method, but
> I'm running into a problem because Firefox is returning the value in pixels
> while IE6 is returning the value in ems. Is this a bug? Or is it just a
> browser difference that we have to account for in our code?
>
> Text is inside a div with ID of "container" and I have the following
> relevant CSS:
> body {
>  font-size: 62.5%;
> }
> #container {
>  font-size: 1.2em;
> }
>
> Here is what the browsers return for $('#container').css('fontSize') :
> Firefox: 12px
> IE6: 1.2em
>
> Actually, it looks to me like IE6 is doing the right thing here, returning
> the actual value from the stylesheet rather than a computed value.
>
> This is a problem because I want to incrementally increase the font size. I
> was doing that in Firefox by
> 1. getting the font size
> 2. stripping the "px" with parseInt()
> 3. multiplying the remaining number by 1.2
> 4. reattaching the "px"
> 5. setting the new font size
>
> I know that in this case I can simply grab the last two letters of the
> string and put them in a variable and attach them back after I do the
> multiplication. But does anyone have an idea why the difference is there in
> the first place, and if it should be there, and if there is a way to
> normalize it?
>
> Thanks all for your help.
>
>
> --Karl
> _________________
> Karl Swedberg
> www.englishrules.com
> www.learningjquery.com
>
>
>
>
> _______________________________________________
> jQuery mailing list
> discuss@...
> http://jquery.com/discuss/
>
>
>

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[Karl Swedberg-2]

Thanks a lot to Dave, Luke, and John for all your help! John's code is just what I needed. The other ideas are very interesting, too, and I'll definitely take a closer look at them later.

If anyone is interested, you can take a look at the test page:

http://test.learningjquery.com/css-test.htm

--Karl

_________________

Karl Swedberg

www.englishrules.com

www.learningjquery.com

On Jan 6, 2007, at 6:02 PM, John Resig wrote:

Just as a follow up, here's how I helped Karl on AIM:

var num = parseFloat( val );

var type = val.slice(-2);

num *= 1.2;

$(...).css( "fontSize", num + type );

The difference in the reported fontSize is something we're looking at.

--John

On 1/6/07, Karl Swedberg <karl@...> wrote:

Hi folks,

I'm trying to get the font size of some text using the .css() method, but

I'm running into a problem because Firefox is returning the value in pixels

while IE6 is returning the value in ems. Is this a bug? Or is it just a

browser difference that we have to account for in our code?

Text is inside a div with ID of "container" and I have the following

relevant CSS:

body {

 font-size: 62.5%;

}

#container {

 font-size: 1.2em;

}

Here is what the browsers return for $('#container').css('fontSize') :

Firefox: 12px

IE6: 1.2em

Actually, it looks to me like IE6 is doing the right thing here, returning

the actual value from the stylesheet rather than a computed value.

This is a problem because I want to incrementally increase the font size. I

was doing that in Firefox by

1. getting the font size

2. stripping the "px" with parseInt()

3. multiplying the remaining number by 1.2

4. reattaching the "px"

5. setting the new font size

I know that in this case I can simply grab the last two letters of the

string and put them in a variable and attach them back after I do the

multiplication. But does anyone have an idea why the difference is there in

the first place, and if it should be there, and if there is a way to

normalize it?

Thanks all for your help.

--Karl

_________________

Karl Swedberg

www.englishrules.com

www.learningjquery.com

_______________________________________________

jQuery mailing list

discuss@...

http://jquery.com/discuss/

_______________________________________________

jQuery mailing list

discuss@...

http://jquery.com/discuss/

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/