Can I find a size of font in the current element?

[Matej Cepl]

I know about element.style.fontSize, but it seems to work here (with Mozilla
Firefox 1.0.6) just only when the fontSize was set via CSS. Can I get
somewhere current size of the font in the actual element. Explanation:
PeopleSoft uses very small font (9pt), which on Mozilla looks pretty small.
Unfortunately, it is set somewhere in their Javascript, so apparently it
fools even "Minimal font size" in Mozilla's settings. Therefore, I would
love to make small greasemonkey script to go through all elements on the
page and increase size of the fonts when it is lower than some threshold
(11pt?). Currently, the only thing I could do (and it works surprisingly
well, considering brutality of my script) is this:

---------------------------------------------------------------

// FixPSFonts
// version 0.1
// 2005-10-21
//
// --------------------------------------------------------------------
//
// This is a Greasemonkey user script that removes all CSS styles
// from selected sites.
//
// To install, you need Greasemonkey: http://greasemonkey.mozdev.org/
// Then restart Firefox and revisit this script.
// Under Tools, there will be a new menu item to "Install User Script".
// Accept the default configuration and install.
//
// To uninstall, go to Tools/Manage User Scripts,
// select "Unstyle", and click Uninstall.
//
// --------------------------------------------------------------------
//
// ==UserScript==
// @name FixPSFonts
// @namespace http://www.ceplovi.cz/matej/progs/scripts
// @description remove all font-size in CSS styles
// @include *
// ==/UserScript==

(function() {
var stylesheets, i, all, element;
all = document.getElementsByTagName('*');
for (i = 0; i < all.length; i++) {
all.style.fontSize = "11pt";
}
})();

//
// ChangeLog
// 2005-10-21 - 0.1 - MC - first attempt (quite brutal one! )
//

---------------------------------------------------------------

Is there a way how to bit more gentle and change only some font sizes?

Thanks for any tip,

Matìj

--
Matej Cepl, http://www.ceplovi.cz/matej/blog/
GPG Finger: 89EF 4BC6 288A BF43 1BAB 25C3 E09F EF25 D964 84AC

Whenever Christ our life is revealed, then also you will be
revealed with Him in glory.
-- Colossians 3:4 (Green's Literal Translation)

 

[Thomas 'PointedEars' Lahn]

(function() {
var stylesheets, i, all, element;
all = document.getElementsByTagName('*');
for (i = 0; i < all.length; i++) {
all.style.fontSize = "11pt";

`pt' is a unit suited for printing, not for desktop presentation.
How large (i.e. how many pixels) `11pt' actually is on the screen
depends on the font resolution. This in turn depends on the
display resolution which depends on the graphics driver which
depends on the operating system and platform. Which is too many
variables to be reliable, and it is known to have resulted in
illegible text on certain standard configurations.

Use the `em' unit or percentages instead. (Alas using the `px'
unit is known to prevent zooming fonts in all-too-buggy IE).

Is there a way how to bit more gentle and change only some font sizes?

Access and manipulate the style-sheet object and its rules itself.
Ask Google (Groups) for details, we had this several times before
(in the not-too-far past).


PointedEars

 

[Matej Cepl]

I know about element.style.fontSize, but it seems to work here (with
Mozilla Firefox 1.0.6) just only when the fontSize was set via CSS. Can I
get somewhere current size of the font in the actual element. Explanation:
PeopleSoft uses very small font (9pt), which on Mozilla looks pretty
small. Unfortunately, it is set somewhere in their Javascript, so
apparently it fools even "Minimal font size" in Mozilla's settings.
Therefore, I would love to make small greasemonkey script to go through
all elements on the page and increase size of the fonts when it is lower
than some threshold (11pt?). Currently, the only thing I could do (and it
works surprisingly well, considering brutality of my script) is this:

OK, so I found in other thread about getComputedStyle, but I was not able to
make some comparison on it. I've tried this, but I this does not seem to
work (no change happens):

function getComputedStyleValue (element, property) {
return element.ownerDocument.defaultView.getComputedStyle(element, ''
[property];
}

(function() {
var i, all, element;
all = document.getElementsByTagName('*');
for (i = 0; i < all.length; i++) {
element = all;
strVal = getComputedStyleValue(element,"fontSize");
if (strVal == "12px") { // I would actually want val <= 12
element.style.fontSize = "11pt";
}
}
})();

What I would like if command in the main function do is to compare actual
size of the element (however, it gets to be of such size) and if it is less
than 10pt (or 13px; I know it is not exact, but I do not care that much)
then set element.style.fontSize to "11pt". How to translate to integer
value? Should I just split the strVal by RegEx and convert to Number()?

Best,

Matej

--
Matej Cepl, http://www.ceplovi.cz/matej/blog/
GPG Finger: 89EF 4BC6 288A BF43 1BAB 25C3 E09F EF25 D964 84AC

He has the attention span of a lightning bolt.
-- Robert Redford

 

[weston]

Should I just split the strVal by RegEx and convert to Number()?

Yep.

str = new String('112px');
result = str.match(/^(\d+)(\D+)$/);
val = Number(result[1]) + 6

and val ends up being 118 (and you could even grab the units from
result[2])

Though if you do the subtraction operation, instead of addition, with
result[1], I don't even think you need the explicit conversion.