Calculate Text Length in Pixels

I'm going to dynamically build a custom control, and add it to a page.  I'm not sure which kind of control elements yet, because:

After I add the text to the control's text element,

I need a way to calculate the length of the text in the text element...

So I can then change the element's height, top and width.....

So that it only shows two lines (wrapped), and that it's bottom edge is at "set-able" position.

Any suggestions on how to calculate the text width of any appropriate text element would be welcome.

Thanks!

LVL 2
codequestAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

naveenkohliCommented:
There is no sure way of calculating this width. You can do couple of things ...

1. Choose a font that all brwosers are probably going to support. E.g. Verdana, Arial.
2. Fix the size of the font.
3. Create a Graphics object (Bitmap.. see System.Drawing namespace). And then use that graphics object to calculate size of the string in pixels.

This could give you some approximate size.

I think you need to weight the benefots of doing this and the overhead of calculating this width. And then decide if its worth it.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
codequestAuthor Commented:
Thanks for your message.  After researching this a bit more, I think that your solution is probably right.  

I recently learned how to create graphic objects, so that's a start.

If I don't like the overhead, then the fallback will be to use the method you suggest to develop some conversion values for the target fonts and font sizes, using an assortment of random phrases.   Then I can apply the conversion value to the character count and come up with an approximate pixel length.  Fortunately, the app is somewhat forgiving if the length is miscalculated (some truncation, and some un-used double lines, will be acceptable.)

One big help would be if you could indicate the variables that I need to use to get the size of the string from the bitmap object.   I could probably work backwards from those variables to build the routines.

In the mean time I'll do some experimentation to find those variables.
naveenkohliCommented:
There are no variables. There is a method in Graphics object to actually calculate size of the string. And that will give you the height and width of the string in pixels. I don't remeber the name of the method at the momemt. Look in the doucmentatio
Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

codequestAuthor Commented:
Ok, cool.  I'll check it out.  Thanks!
codequestAuthor Commented:
I see the Bitmap.width property, though it seems that it's necessary to set the width (either by loading something into it, or just specifying it when new) before it can be DrawString'd into...and then the width is just what it was initially set to.

So while I can get the width, I'm not seeing how the DrawString method is going to change the width.

There is definitely a method in windows forms for calculating the height and width of a rendered string (I think it's called MeasureRendered, or something like that), but I don't see its equivalent in web forms.

naveenkohliCommented:
The procedure is quite simple.

1. Create a graphics object. You can set the height and width of Bitmap object as high as you want. It would not matter because you are not actually going to show this bitmap anywhere. This height and width simply gives you enough surface are to work with.
2. Call MeasureString method using this graphics object. Two parameters of this method are string and font.

Thats pretty much you need.
Bob LearnedCommented:
There is a problem with web pages and fonts and measuring text--the font size can't really be predicted when you have the ability to specify font size as XX-Small and change the zoom factor through a browser (like Internet Explorer).

If everything is known (fixed font size), then you could do something like this (C#):

Font font = new Font("Arial", 28);
// need a graphics object to call the MeasureString method...
Bitmap bmp = new Bitmap(1, 1);
g = Graphics.FromImage(bmp);
int width = (int)g.MeasureString("Hello, world!", font).Width;
g.Dispose();

Bob
codequestAuthor Commented:
Thanks for inputs.  Those are great tips.  I'll check them out in the AM...they should get me there, at least to test this approach.

I appreciate the uncertainty about font size...in the business context for this app there should some control over how the page is display (but you never know...)
codequestAuthor Commented:
Works great.  Thanks!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.