1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Getting pixel width & height for different font sizes & different fonts

Discussion in 'CSS' started by bzy231, Jun 9, 2008.

  1. #1
    Hi, I need some direction on how to go about doing this in CSS. If it can't be done in CSS, well just let me know.. I'll go on to try my luck in javascript or something else..

    Basically I'm building a web app, and I need this information:
    I need to know exactly(as accurate as possible) the height and width in pixels of a single average letter in a chosen font as it corresponds to a 'font size' like '12' or '20'.

    OR
    I need to be able to simply specify a font width and height in pixels (and that it be super accurate to the pixels of browser screen) to a font and know that the average letter in the text generated by this font is what I specifified.

    You get the picture, the goal is to know the width & height of a single font letter in pixels, whether i can convert that from font size or use css to find out this conversion, or i can just directly attribute these specifications the font with CSS. That's 1 of two possible solutions I'm looking for.

    I'd appreciate if someone could clue me in if any of these 2 are possible, and if so give me an example of the methodology to do it in css.
    Thank you very much.
    [​IMG]
     
    bzy231, Jun 9, 2008 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    To know those specifics, you need to read the metrics file of PS font faces. I don't know what to look for in TTF. Keep in mind there is no such thing as an average width in any non-mono type face. Also keep in mind that "if" has a different width than "fi" due to kerning issues.

    To make things really difficult for you, the user has total control over which font face is used and what size; even what size window it all appears in, and the pixel density. You are totally owned.

    The web is not about compiled desk-top applications. You'll have to learn to create flexible interfaces to accommodate the way browsers work—and that includes cells, PDAs and assistive technologies.

    cheers,

    gary
     
    kk5st, Jun 9, 2008 IP
  3. bzy231

    bzy231 Guest

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for replying, but I didn't find your reply very helpful. :(
    You didn't answer some of my core questions like if what I am asking is even possible in the ways I mentioned in my question at all...


    Could you be a little bit more specific on this portion? I was looking for a way to
    dynamically get the pixel width/height with CSS.


    Thanks for pointing out the obviousness but, I'll settle for the best I can get and not an impossible perfection. All I'm concerned about are browsers run on desktop-like machines.
     
    bzy231, Jun 9, 2008 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    OK, let me be more explicit. No.

    That's not at all within the purview of css.

    Oh? Did I ever misunderstand this:
    html, css and browsers don't work that way. No matter what you specify as the font-face, no matter what you specify as the font-size, no matter what pixel density you expect and no matter what monitor resolution or window size you want, the user sets all of these to his own preferences that can always override your wishes.

    I'm sorry my more expanded answers did not satisfy you. Here, in short form are the answers: No, and no.

    gary
     
    kk5st, Jun 9, 2008 IP
  5. bzy231

    bzy231 Guest

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Let's say a user forces a certain font and font size (in pixels) with their browser of choice. So no matter what css rules your using, the fonts & font size will be displayed to the client's liking. If this is so, when you run javascript to retrieve properties like what the current font is, what will it retrieve?

    The font specified by the stylesheet, or the font being forced and actually displayed by the browser.
    In other words, can I know when this happens, simply by retrieving and checking to make sure the rendering font/font size is what I expect it to be. I'm not asking to be able to control it, but simply to know when it is outside of my stylesheet control.
     
    bzy231, Jun 22, 2008 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    You should be able to get the actual values used by the DOM. I haven't tried it, because the information is amazingly worthless.

    You have to get over your desktop application mentality. In the browser, the stylesheet and scripting are no more than bells and whistles. To the extent either improves the user experience, it's a Good Thing®. To the extent you depend on either is foolishness. Your visitor may not have support for either, or may have them disabled.

    If you want a desktop application, write a Java applet. Java is pitifully unsuited for client side work, as it's bandwidth intensive and it's slow, but it's your only choice. I, for one, refuse to enable Java in my browsers.

    gary
     
    kk5st, Jun 22, 2008 IP