Get "font-family" from iframe

[jordanrynard]

I'm trying to retrieve the current font from an element that is within an
iframe... unsuccessfully.

From within the document itself I can retrieve the font just fine using the

following:

$(document).ready(function(){
var getFontFamily = $("#get_font_of_this").css("font-family");
alert(getFontFamily);
});

-- returns (Comic Sans MS, cursive)


But once I try retrieving the same element's font from a parent document as
shown below, I do not get the expected response:

$(document).ready(function(){
$("#iframe").load(function(){
var getFontFamily =
$("#iframe").contents().find("#get_font_of_this").css("font-family");
alert(getFontFamily);
});
});

-- returns (serif)


I can seemingly retrieve any other css property through this method, but for
some reason the font returns as a default (serif), or sometimes (Arial, ...,
serif)


If anyone can shed some light on this issue, I will be indebted to you.

Thanks in advance!

Example page can be found at http://www.arcadiasitedesign.com/page1.php
http://www.arcadiasitedesign.com/page1.php

[Jonathan Vanherpe (T & T nv)]

does every browser do that?

Post by jordanrynard
I'm trying to retrieve the current font from an element that is within an
iframe... unsuccessfully.

From within the document itself I can retrieve the font just fine using the

$(document).ready(function(){
var getFontFamily = $("#get_font_of_this").css("font-family");
alert(getFontFamily);
});
-- returns (Comic Sans MS, cursive)
But once I try retrieving the same element's font from a parent document as
$(document).ready(function(){
$("#iframe").load(function(){
var getFontFamily =
$("#iframe").contents().find("#get_font_of_this").css("font-family");
alert(getFontFamily);
});
});
-- returns (serif)
I can seemingly retrieve any other css property through this method, but for
some reason the font returns as a default (serif), or sometimes (Arial, ...,
serif)
If anyone can shed some light on this issue, I will be indebted to you.
Thanks in advance!
Example page can be found at http://www.arcadiasitedesign.com/page1.php
http://www.arcadiasitedesign.com/page1.php

[Jonathan Vanherpe (T & T nv)]

I didn't see you posted azn example page. When testing it, I found that
both Opera and Chromium returned the correct thing but they format it
differently. Opera alerts "Comic Sans MS [microsoft]". I actually like
how Opera alerts the font you're actually using instead of the whole
font stack, this is way more useful information in most cases.

I didn't test in IE, but I guess this is a bug in Firefox.

Jonathan

Post by Jonathan Vanherpe (T & T nv)
does every browser do that?

Post by jordanrynard
I'm trying to retrieve the current font from an element that is within an
iframe... unsuccessfully.

From within the document itself I can retrieve the font just fine using the

$(document).ready(function(){
var getFontFamily = $("#get_font_of_this").css("font-family");
alert(getFontFamily);
});
-- returns (Comic Sans MS, cursive)
But once I try retrieving the same element's font from a parent document as
$(document).ready(function(){
$("#iframe").load(function(){
var getFontFamily =
$("#iframe").contents().find("#get_font_of_this").css("font-family");
alert(getFontFamily);
});
});
-- returns (serif)
I can seemingly retrieve any other css property through this method, but for
some reason the font returns as a default (serif), or sometimes (Arial, ...,
serif)
If anyone can shed some light on this issue, I will be indebted to you.
Thanks in advance!
Example page can be found at http://www.arcadiasitedesign.com/page1.php
http://www.arcadiasitedesign.com/page1.php

[jordanrynard]

Wow, you're absolutely right -- I didn't even bother to try any other
browsers as it's just the sort of thing I wouldn't think would be the result
of a 'browser issue'.

I tested this code in recent versions of IE, Chrome, Opera, and Safari, and
it works perfectly.
In Firefox 3.5.7 this appears to be a bug... How disappointing - I love my
Firefox, and it's never let me down before : (

Thanks for pointing that out Jonathan - at least I know I can use the code
for now and know it'll work 'most' of the time... and I can stop racking my
brain as to why it wasn't working!
Now if only I can find a workaround to use in Firefox for now that's
preferably not as annoying as having to store fonts in a cookie!!!

If anyone has any suggestions I'd love to hear it...
Thanks!!

Post by Jonathan Vanherpe (T & T nv)
I didn't see you posted azn example page. When testing it, I found that
both Opera and Chromium returned the correct thing but they format it
differently. Opera alerts "Comic Sans MS [microsoft]". I actually like
how Opera alerts the font you're actually using instead of the whole
font stack, this is way more useful information in most cases.
I didn't test in IE, but I guess this is a bug in Firefox.
Jonathan

[Jonathan Vanherpe (T & T nv)]

I'm not sure what exactly you're trying to do, maybe if you gave us an
explanation of your overall goal we could help you better. There might
be other ways to do what you're trying that might not even involve
javascript and work everywhere.

FWiW, this behaviour is in FF 3.6 too

Jonathan

Post by jordanrynard
Wow, you're absolutely right -- I didn't even bother to try any other
browsers as it's just the sort of thing I wouldn't think would be the result
of a 'browser issue'.
I tested this code in recent versions of IE, Chrome, Opera, and Safari, and
it works perfectly.
In Firefox 3.5.7 this appears to be a bug... How disappointing - I love my
Firefox, and it's never let me down before : (
Thanks for pointing that out Jonathan - at least I know I can use the code
for now and know it'll work 'most' of the time... and I can stop racking my
brain as to why it wasn't working!
Now if only I can find a workaround to use in Firefox for now that's
preferably not as annoying as having to store fonts in a cookie!!!
If anyone has any suggestions I'd love to hear it...
Thanks!!

Post by Jonathan Vanherpe (T & T nv)
I didn't see you posted azn example page. When testing it, I found that
both Opera and Chromium returned the correct thing but they format it
differently. Opera alerts "Comic Sans MS [microsoft]". I actually like
how Opera alerts the font you're actually using instead of the whole
font stack, this is way more useful information in most cases.
I didn't test in IE, but I guess this is a bug in Firefox.
Jonathan

[jordanrynard]

I have two documents: The parent, and the iframe.

When activated, the parent document dynamically appends an instance of
tinymce to itself. It retrieves the content for the editor (tinymce) from a
selected element in the iframe.

The style of text displayed in tinymce is identical to the style of text
displayed in the iframe by extracting the css style properties from the
element when loading the editor.

So because of this bug in Firefox, the text in the editor isn't being styled
according to the font being used in the iframe. (works in all other browsers
of course, but not the current version of Firefox)

Hopefully that helps explain the situation in which I'm using the
aforementioned method.



I'm not sure what exactly you're trying to do, maybe if you gave us an
explanation of your overall goal we could help you better. There might
be other ways to do what you're trying that might not even involve
javascript and work everywhere.

FWiW, this behaviour is in FF 3.6 too

Jonathan

[Jonathan Vanherpe (T & T nv)]

So you're basically writing a preview window or something for tinyMCE? I
can't really think of a different way of doing this, unless you want to
implement autosave and reload the content periodically with AJAX.

Jonathan

Post by jordanrynard
I have two documents: The parent, and the iframe.
When activated, the parent document dynamically appends an instance of
tinymce to itself. It retrieves the content for the editor (tinymce) from a
selected element in the iframe.
The style of text displayed in tinymce is identical to the style of text
displayed in the iframe by extracting the css style properties from the
element when loading the editor.
So because of this bug in Firefox, the text in the editor isn't being styled
according to the font being used in the iframe. (works in all other browsers
of course, but not the current version of Firefox)
Hopefully that helps explain the situation in which I'm using the
aforementioned method.
I'm not sure what exactly you're trying to do, maybe if you gave us an
explanation of your overall goal we could help you better. There might
be other ways to do what you're trying that might not even involve
javascript and work everywhere.
FWiW, this behaviour is in FF 3.6 too
Jonathan

[jordanrynard]

I have just downloaded the latest trunk nightly build for Firefox
(Minefield), and this bug has been fixed in this version.
So now I just have to wait for it to be released!!

Post by jordanrynard
Wow, you're absolutely right -- I didn't even bother to try any other
browsers as it's just the sort of thing I wouldn't think would be the
result of a 'browser issue'.
I tested this code in recent versions of IE, Chrome, Opera, and Safari,
and it works perfectly.
In Firefox 3.5.7 this appears to be a bug... How disappointing - I love my
Firefox, and it's never let me down before : (
Thanks for pointing that out Jonathan - at least I know I can use the code
for now and know it'll work 'most' of the time... and I can stop racking
my brain as to why it wasn't working!
Now if only I can find a workaround to use in Firefox for now that's
preferably not as annoying as having to store fonts in a cookie!!!
If anyone has any suggestions I'd love to hear it...
Thanks!!

Post by Jonathan Vanherpe (T & T nv)
I didn't see you posted azn example page. When testing it, I found that
both Opera and Chromium returned the correct thing but they format it
differently. Opera alerts "Comic Sans MS [microsoft]". I actually like
how Opera alerts the font you're actually using instead of the whole
font stack, this is way more useful information in most cases.
I didn't test in IE, but I guess this is a bug in Firefox.
Jonathan