1

I am working on a chrome extension which returns the font-size property of any element. I am loading the ajax response data into the extension document and computing their properties. Now something strange happening and I'm not being able to find out the reason.

I have a heading tag on the webpage I'm analysing upon. Style tab (inspect element) on the webpage says its font-size is 2em and computed value is 32 pixels.

Now, when i load the same page in my chrome extension, Style tab (inspect element) on my extension says its font-size is 2em but shows its computed style to be 24px. To clarify, I'm attaching the images of styles and computed syles of both webpage and chrome extension.

Case 1: Style (Webpage) Look at the right most side, font-size:2em

Computed Style (Webpage) Computed font-size = 32px

Case 2: Style (After Loading In Chrome Extension) Style: font-size = 2em (similar to what it's on webpage)

Computed Style (After Loading In Chrome Extension) Here is my problem. computed font-size = 24px

I just want to know why is this happening? Same styles (2em) but browser window showing computed size as 32 and extension window (on same browser) showing 24px.

Ali Baig
  • 3,819
  • 4
  • 34
  • 47
  • 1
    `em` is a relative unit, based on the (in this case) font-size of the parent element. So the simple and logical conclusion here is that the different values you are getting for what `2em` _actually_ is, is that the font-sizes of the parent elements in both cases differ … Notice how in your first screenshot for your extension, under “inherited from body” it says `font-size: 75%` for `body` – and 24 is exactly 75% of 32. – CBroe Jan 18 '15 at 03:06
  • Ohh yeah i see it now!! How on earth has the body 75% of font-size. Anyways good point @cbroe .. When i review the extension's .html page, there's nothing of this sort (75%) found there. – Ali Baig Jan 18 '15 at 03:24
  • 1
    As it also shows clearly, this value comes from the user stylesheet (the default stylesheet applied by the browser, unless you have specified a user stylesheet of your own) … – CBroe Jan 18 '15 at 03:28
  • Setting 'font-size:100%' manually on extension's html page does the trick!!! Wonder why the default size of body wasn't 100%. Thanks – Ali Baig Jan 18 '15 at 03:29

1 Answers1

2

The problem lies in that em is a relative unit in CSS, which means that an element whose font-size is in ems will base the font-size on its parent's font-size. In your second example, it seems that the body has had its font-size changed to 75%, which you need to change to 100%. The behind-the-scenes calculation that is occuring here is that html's default font-size is 16px, 75% of that is 12px, and twice that (2em) is 24px- the computed font size.

rioc0719
  • 303
  • 2
  • 11