Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > getting the font size in pixels

Reply
Thread Tools

getting the font size in pixels

 
 
Cartoper
Guest
Posts: n/a
 
      09-08-2007
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

 
Reply With Quote
 
 
 
 
Evertjan.
Guest
Posts: n/a
 
      09-08-2007
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[i]);
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>

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

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
 
Reply With Quote
 
 
 
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      09-08-2007
Johannes Baagoe wrote:
> Cartoper :
>> I have learned from a html newsgroup that there is no easy way to do
>> this in a browser

>
> 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
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16
 
Reply With Quote
 
Cartoper
Guest
Posts: n/a
 
      09-08-2007
On Sep 8, 7:50 am, Thomas 'PointedEars' Lahn <(E-Mail Removed)>
wrote:

> 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

 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      09-08-2007
Cartoper wrote:
> On Sep 8, 7:50 am, Thomas 'PointedEars' Lahn <(E-Mail Removed)>
> wrote:
>> 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.


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?...ch+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
--
"Use any version of Microsoft Frontpage to create your site. (This won't
prevent people from viewing your source, but no one will want to steal it.)"
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Swing Font, it's Java Font? ot native? how install new font? mttc Java 2 07-03-2009 07:29 PM
Converting Font-Size To Pixels Ram Javascript 6 05-05-2007 05:02 AM
Converting Font-Size To Pixels Ram HTML 6 05-03-2007 07:39 AM
mega pixels, file size, image size, and print size - Adobe Evangelists Frank ess Digital Photography 0 11-14-2006 05:08 PM
get font size in pixels - IE nutso fasst Javascript 3 11-28-2004 06:27 PM



Advertisments