getting the font size in pixels

[Cartoper]

I am working on a kiosk system. It is packaged software (I am a
ISV). I know my customers are going to be running on a number of
different resolutions and I want the kiosk to have the same
proportional layout. In other words, if at 1024x768 the font takes up
7% of the height, I want it to be 7% when at 1600x1200. I have
learned from a html newsgroup that there is no easy way to do this in
a browser so I am figuring that I will have to do it the hard way, via
JavaScript. Here is what I am assuming the steps are:

* First get the base percentage:

1.1: Find a font that looks good on my monitor
1.2: Somehow find out the height of the font (I know that height is a
relative term depending on the character), which height I should be
using I don't know.
1.3: Find out what percentage of the screen I want the text.

* Set the font size in the web page:

2.1: Determine the screen size/window size .
2.2: Use the percentage from step 1.3 to find out how many pixels on
this screen.
2.3: Somehow set the standard font size to the result of 2.2.

Is this the best way to achieve my goal? If so, how does one code up
step 1.2 and 2.3? I am targeting all the browsers, right now the
kiosk is IE7 but that will be changing to either Firefox or Safari
(WebKit) in the near future. Also in future versions, the system will
be running over a WiFi so that folks can use their personal laptops to
access it. In a perfect world, I would love to see things size as the
user adjusts the size of the browser!

The back end is Apache with both PHP and a custom Apache Module, so I
have lots of flexibility there, too.

Cartoper

 

[Evertjan.]

Cartoper wrote on 08 sep 2007 in comp.lang.javascript:

1.2: Somehow find out the height of the font (I know that height is a
relative term depending on the character), which height I should be
using I don't know.

You can measure the line(!!) height
of the specific font with the below code.
[I heard the results are different
depending on the browser's settings.]

This ads some extra space at the top
of the standard 'hg' height [top of h to bottom of g]

==========================

<div id='testdiv' style='padding:0;'>hg</div>
<div id='result'></div>

<script type='text/javascript'>

var t = document.getElementById('testdiv');
var result = document.getElementById('result');
var r = '';
var a = [1,2,5,10,20,40,75,150,300];

for (var i=0;i<a.length;i++)
h(a);
t.style.display = 'none';
result.innerHTML = r;

function h(x) {
t.style.fontSize = x + 'pt';
var oh = t.offsetHeight;
r += x + 'pt: lineheight = ' + oh +'px ';
r += 'ratio height/pt: ' + oh/x + '<br>';
};

</script>

==========================

 

[Thomas 'PointedEars' Lahn]

Cartoper :

True enough, but there is an easy way to do it the other way round:
express the heights, widths, etc of all non-text elements in percentage of
the font height, IOW, in ems. (Yes, image sizes can be expressed in ems.)

They can, but they SHOULD NOT. A HTML user agent is not graphics software;
the image will lose quality considerably (to the point that it cannot be
recognized anymore) because anti-aliasing is not used.

And where did the OP state that they want to have scaled images anyway?
All I can see is that they write about font sizes that should be
proportional to the size of the viewport (although they are confusing
the display resolution with that).

Which means this cannot be done with HTML and CSS alone, because CSS has
no such measurement of length. 1em equals the height of the capital letter
`M' of the font (originating from Gutenberg's movable type printing),
called the font-size. The size of the viewport is irrelevant for that.

It also cannot be done reliably with client-side scripting of an (X)HTML
document, and should not be done here (performance, maintenance costs).

However, there are media formats where everything can be scaled
automagically: SVG and PDF (standardized), and Flash (proprietary), to name
just a few. All of the former can also be scripted with ECMAScript
implementations: SVG with ECMAScript, PDF with Adobe PDF Script (if used
with Adobe Reader), and Flash with built-in ActionScript.


PointedEars

 

[Cartoper]

However, there are media formats where everything can be scaled
automagically: SVG and PDF (standardized), and Flash (proprietary), to name
just a few. All of the former can also be scripted with ECMAScript
implementations: SVG with ECMAScript, PDF with Adobe PDF Script (if used
with Adobe Reader), and Flash with built-in ActionScript.

I find this very interesting, fore I have been playing around with SVG
in the project to display the next/previous/up arrows. I have not
been able to get them to position correctly in a div. I did
contemplate moving the whole thing to SVG, which sounds like what you
are suggesting. I have a couple issues with that, which you might be
able to solve:

1: Lack of information: I can find some stuff on the web about SVG,
but it just seems like is a very new technology (I don't think it is,
I think it is just isn't real popular). Do you have any suggestions
on good SVG forums to ask questions when/if I run into issues?

2: IE support: Right now the kiosk is using IE6/IE7, depending on
what my customer has installed on his/her kiosk machines. I guess I
should simply check to see if they have the Adobe plugin and install
it if they don't. Then there is the issue of when the system goes
"public" so that folks can use their personal computer to view the
site, I believe I am going to run into problems because the Internet
will more then likely not be avaiable. I don't know, maybe I just
say: deal with it

Cartoper

 

[Thomas 'PointedEars' Lahn]

I find this very interesting, fore I have been playing around with SVG
in the project to display the next/previous/up arrows. I have not
been able to get them to position correctly in a div.

That would be a problem to be best discussed in
comp.infosystems.www.authoring.stylesheets.

I did contemplate moving the whole thing to SVG, which sounds like what
you are suggesting. I have a couple issues with that, which you might be
able to solve:

1: Lack of information: I can find some stuff on the web about SVG,
but it just seems like is a very new technology (I don't think it is,
I think it is just isn't real popular). Do you have any suggestions
on good SVG forums to ask questions when/if I run into issues?

For general questions, the newsgroup comp.text.xml would be my first
choice in the Big 8. adobe.svg and netscape.public.mozilla.svg might
also provide some insight.

http://groups.google.com/groups/dir?q=SVG&qt_s=Search+for+a+group

Scripting issues with SVG are on-topic here in comp.lang.javascript.

2: IE support: Right now the kiosk is using IE6/IE7, depending on
what my customer has installed on his/her kiosk machines. I guess I
should simply check to see if they have the Adobe plugin and install
it if they don't. Then there is the issue of when the system goes
"public" so that folks can use their personal computer to view the
site, I believe I am going to run into problems because the Internet
will more then likely not be avaiable. I don't know, maybe I just
say: deal with it

Or move to Firefox or another XUL application where partial SVG support
is built-in (since Firefox 1.1a1, Gecko 1.8, 2005-05-31), and is apparently
going to be completed per Firefox 3.0, Gecko 1.9 (AIUI).


PointedEars