[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 509
  • Last Modified:

calculating pixels width based on number of characters

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 ?
0
Knowledge-Dimension
Asked:
Knowledge-Dimension
  • 2
  • 2
2 Solutions
 
ShaneJonesCommented:
i just use guess work. Seems to work fine...

Shane
0
 
jessegivyCommented:
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!

Cheers,

JI
0
 
EsopoCommented:
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.
0
 
jessegivyCommented:
...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 :)

Cheers,

Jesse
0
 
EsopoCommented:
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.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now