calculating pixels width  based on number of characters

Posted on 2006-04-06
Last Modified: 2013-12-03
I have a drop down menu and we are trying to calculate pixel positioning of elements on the menu.

we have the length of a word but this is not the same as the pixel width of the word.

Is there a way to calculate the number of pixels a word would take , based on its width ?
Question by:Knowledge-Dimension
    LVL 12

    Expert Comment

    i just use guess work. Seems to work fine...

    LVL 12

    Expert Comment

    Uhhh guess work will only work fine if you've got a monospace font like courier.  Fonts like Times New Roman, and most others for that matter are NOT monospace, they are true type, which means that different characters take up a different amount of screen real estate.  For instance a little i takes up only a pixel or two while an uppercase G takes up at least seven?

    If precision is something you'll need in your calculation DEFFINATLY go with a monospace font!


    LVL 14

    Accepted Solution

    I agree with jessegivy, if you use a monospaced font such as courier new you'll be able to calculate the width. I would recommend you leave some extra room for people that enlarge their browser text-size though.
    LVL 12

    Assisted Solution

    ...I just got done creating this hanous 588 page pdf that I had to use monospace font for grrrrr!  It's a pain.

    ...anyway, I've done it without, and if you can't part with the style of your page, it's possible to use the largest character to go by, just calculate how many pixels one of the larger-sized characters of your font is (generally with guess work) and then use that figure, it will give you something a little bigger than it needs to be but bigger is better than smaller, as inclusive is better than exclusive, unless you're talking about nightclubs of course ;)

    @Esopo, that could be quite a bit of extra room couldn't it?  The large font is really quite large.  I'm sure there's some accessability solution, could the accessability options be accessed to check the "real" font size somehow?  An interesting point.

    @Knowledge-Dimension, I'm sure we could help further if you'd explain what it is you're doing.  Me I was just providing blank lines so their damn form looked all official.  I guess hey, as long as they keep writing checks :)


    LVL 14

    Expert Comment

    If you are still dealing with this and don't want to go with monospaced fonts,

    Do a print-screen, blow it up and print it out to paper. Then do measurments with a ruler to figure out the dimensions and ratios and when you create your menu give the width dimension a relative number based on the size of the text (CSS ems would do well).

    If your menus are being created dynamically you can use something like the GD library of PHP to figure out the exact width of a word or phrase in pixels.

    I would normally recommend to just use a reasonable size and code your menu in such a way that would look well if a line needs to wrap into two.

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    Join & Write a Comment

    Introduction This warning has to be one of the most commonly issued warnings in the history of PHP.  The article explains why this warning arises and what to do to mitigate the problem. How this Happens HTTP headers include many different kinds…
    Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

    732 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    23 Experts available now in Live!

    Get 1:1 Help Now