This week's book giveaway is in the OCMJEA forum.
We're giving away four copies of OCM Java EE 6 Enterprise Architect Exam Guide and have Paul Allen & Joseph Bambara on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes Programmatically determine actual font size, face, color, etc., being used? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of OCM Java EE 6 Enterprise Architect Exam Guide this week in the OCMJEA forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Programmatically determine actual font size, face, color, etc., being used?" Watch "Programmatically determine actual font size, face, color, etc., being used?" New topic
Author

Programmatically determine actual font size, face, color, etc., being used?

Joe Vahabzadeh
Ranch Hand

Joined: Jan 05, 2005
Posts: 140
All,

Is there a way with Javascript to determine the actual font size, face, color, and any other characteristics that the user is ACTUALLY seeing?

That is, let's say there's no css definition for a particular element, so it's using the default. Or, whether there is or not, let's say the user has set their browser to override the page-fonts with their own fonts.

I want to be able to get the font information for the font the user is actually seeing, and ideally, a method that will work with IE6 and 7, Firefox, and it would be nice if it also worked with Safari and Opera, although IE and FF are the primary concerns.

Thanks in advance.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Look into computedStyle

Eric
Joe Vahabzadeh
Ranch Hand

Joined: Jan 05, 2005
Posts: 140
Looks promising . . thank you very much!
Joe Vahabzadeh
Ranch Hand

Joined: Jan 05, 2005
Posts: 140
Man, I think I'm starting to hate companies that develop web browsers!

Anyway, I tried getComputedStyle (and the equivalent for IE, currentStyle), and came up with more variation in how each browser handles things than I would like.

The browsers I used, all on WinXP, are:
IE 6
Firefox 2.0.0.11
Opera 9.25
Safari 3.0.4

Now, my ultimate goal is to pass this data over to a Java program, in order to set colors, font size/face/etc, to make the Java program seem as seamless to the browser front end as possible.

Anyone know how to resolve the various issues I'm about to describe below:

1) Background color: Safari gives me an rgba(0,0,0,0) value - easy enough to translate, as is IE6's #rrggbb value. Firefox and Opera, on the other hand, say "transparent" rather than giving me an actual color that's being used. Is there any way to get the actual color? My method was:

getComputedStyle(document.getElementsByTagName("body")[0], null).getPropertyValue('background-color')


2) Font size: Lovely. Nobody can agree on what sizing mechanism to use. IE gives me point size, which I prefer, thus says 12pt. Safari and Firefox give a px size. Is there any way to convert from px to pt?

Opera is even worse. Depending on what is or isn't chosen in the Style menu under "View", it'll give px, em, or even, for size, say "sans-serif"

Is there a way to force everything to convert to point-size by any chance?


3) Font face: Safari, Opera, and IE are all good with this, they give me an actual font name. Firefox, however, will say "serif" or "sans-serif". Apparently in their display options, you choose whether you want serif or sans-serif to be the default font, and then choose which font is "serif" and which font is "sans-serif"

I'm trying to get the actual font name that Firefox uses ultimately. Is there a way to get that information (ie: "Times New Roman" or whatever).

Thanks again in advance to anyone who can offer pointers.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Wrote this awhile back to compare colors thought you might find some interest in it:
http://radio.javaranch.com/pascarello/2005/05/19/1116513366466.html


===

The pt to px depends on the ppi which is different based on computer and OS setup

here is a chart
http://sureshjain.wordpress.com/2007/07/06/53/#comment-1648

windows is normally set at 96ppi
pt = px/3;

Mac is normally at 76
pt = px

===

If you get transparent you may have to loop through the parentNodes and see what color that have set.

===

for font face, you may want to look into this: http://ajaxian.com/archives/javascriptcss-font-detector

Eric
Joe Vahabzadeh
Ranch Hand

Joined: Jan 05, 2005
Posts: 140
Thanks again Eric!

I wonder if either Javascript in the browser, or Java itself, will give me the current ppi that is operating on the system (in case the user has changed it in the various OS settings or whatever).
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
 
subject: Programmatically determine actual font size, face, color, etc., being used?