• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

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

 
Ranch Hand
Posts: 140
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Look into computedStyle

Eric
 
Joe Vahabzadeh
Ranch Hand
Posts: 140
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Looks promising . . thank you very much!
 
Joe Vahabzadeh
Ranch Hand
Posts: 140
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 140
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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).
 
Doe, a deer, a female deer. Ray, a pockeful of sun. Me, a name, I call my tiny ad ...
a bit of art, as a gift, that will fit in a stocking
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic