getting the font size in pixels

Discussion in 'Javascript' started by Cartoper, Sep 8, 2007.

  1. Cartoper

    Cartoper Guest

    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
    Cartoper, Sep 8, 2007
    #1
    1. Advertising

  2. Cartoper

    Evertjan. Guest

    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>

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

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Sep 8, 2007
    #2
    1. Advertising

  3. 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
    Thomas 'PointedEars' Lahn, Sep 8, 2007
    #3
  4. Cartoper

    Cartoper Guest

    On Sep 8, 7:50 am, Thomas 'PointedEars' Lahn <>
    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
    Cartoper, Sep 8, 2007
    #4
  5. Cartoper wrote:
    > On Sep 8, 7:50 am, Thomas 'PointedEars' Lahn <>
    > 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?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
    --
    "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>
    Thomas 'PointedEars' Lahn, Sep 8, 2007
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. dave richards
    Replies:
    2
    Views:
    600
    Paul Furman
    Feb 19, 2004
  2. Ram
    Replies:
    6
    Views:
    390
  3. mttc
    Replies:
    2
    Views:
    2,362
    Roedy Green
    Jul 3, 2009
  4. nutso fasst

    get font size in pixels - IE

    nutso fasst, Nov 28, 2004, in forum: Javascript
    Replies:
    3
    Views:
    93
    Martin Bialasinski
    Nov 28, 2004
  5. Ram

    Converting Font-Size To Pixels

    Ram, May 1, 2007, in forum: Javascript
    Replies:
    6
    Views:
    76
    töff
    May 5, 2007
Loading...

Share This Page