Character Pixel Width

Char

Hello All,

In a nutshell, my problem is this:

I have a script which has a left menu with user-defined titles. The problem is, if a user enters 15 W's (or M's, or another wide character), the table width gets pushed ruining the look of the page.

Why not lower the character width, you say? Well, suffice to say that we need to leave the character max at about 15. Not to mention the fact that 15 i's looks SIGNIFICANTLY different than 15 w's (try it sometime!).

In any case, while brainstorming a solution to this problem, we came up with the possibility of finding the pixel width (either in PHP or javascript) of the entire string - if it was too long, we cut it off and add a "..." to the end.

All of this is good and well except for the fact that I can't find how to measure the pixel width of a string anywhere!

I have searched and searched for an answer to this problem however thus far I haven't come up with anything useful. I'm sure it has been solved, or at least worked around before.

If someone could propose a solution, or another idea as to how to stop 15 w's from ruining the menu, it would be greatly appreciated!

Thanks and Best Regards,
Charlotte Genevier
Webligo Developments
http://www.webligo.com

steadyguy

Have you considered using a fixed-width font (ie: Courier)? Then 15 i's will take the same amount of space as the 15 w's. 😃

Another possibility would be to fix the width to a set number of pixels, with CSS then hide the stuff that overflows. like this:

#noOverFlow {
width: 100px; /or whatever you want it to be/
overflow: hidden;
}

No elipsis, but it gets the job done, and you can use whatever font you like, then.

Char

No, we can't use fixed width font. We figured out a work around for it, so for all you people who have had this problem, here's our solution:

This solution only works if you do not allow users to change the font. We made two functions: one that assigns a number (corresponding to the letter's width measured with photoshop) to a letter, and another function which uses the first function to add all the widths together - if the width is above a certain number, we add ellipses.

This method isn't perfect, but it does work for our purposes. Please let me know if any of you have fixes/suggestions.

Best Regards,
Charlotte Genevier
Webligo Developments
http://www.webligo.com