Jump to content

Get Character Width


gerritvn
 Share

Recommended Posts

The only way I can see that you could do this is to find out the width of each character including whitespace and write a function that calculates the amount of times each letter is displayed, compares it against an array containing the width values and adds them all together.It would all be relative to the font sized used on individuals browsers unless you specifically set a fixed font size.

Link to comment
Share on other sites

Most fonts have different widths for different characters. Maybe the offsetWidth property of a block element containing the characters would be useful to you.Tell us why you need to know the width of the characters and we might be able to find a better solution.

Link to comment
Share on other sites

If you're trying to guess the width of an element that contains text, CSS has 2 units of width that can help with an approximation: ex and em. ex is the width of the "x" character. em is the width of the "m" character. The width is correct no matter what the font size is. I find that if I count the number of characters in some text, and then assign that many ex's (plus 2-3 just to be sure) the width usually turns out very close.So if my test says "Hello, World!" that's 13 characters. In in CSS, I might give the containing element a width of 15ex . Then I play with it on several computers and browsers just to be sure. That is, I enlarge or decrease the size of the text, change the font to typical default fonts, etc. And always check both Mac and PC, because their system fonts are usually different.It's not an exact technique, but it usually gets good results.

Link to comment
Share on other sites

Most fonts have different widths for different characters. Maybe the offsetWidth property of a block element containing the characters would be useful to you.Tell us why you need to know the width of the characters and we might be able to find a better solution.
I need to represent a character mode terminal (IBM 3270) in a browser. To position to the start of a field, I usestyle="position:absolute;left:"+x*xppc+"px;top:"+y+"em;"Where x is the character column position and y the character row position. xppc is the column pixels per character which is the value that I don't know how to calculate.I would normally use a fixed pitch font making it very simple, but may need to use a proportional font in which case I need to get the maximum width of a character (probably that of the W character).
Link to comment
Share on other sites

If you're trying to guess the width of an element that contains text, CSS has 2 units of width that can help with an approximation: ex and em. ex is the width of the "x" character. em is the width of the "m" character.
I beg to differ. My understanding is that em is a unit representing the height of the font an ex something like half of that. Seehttp://www.w3schools.com/css/css_units.aspI would love to be wrong, though :)
Link to comment
Share on other sites

:) You're correct. I think of them that way because that is how they work in printed typography. But since width and height work in proportion, the technique is still useful. The height of an "x" is close to the average width of a letter. Now that you have clarified your application, I see that perhaps it is not as exact as what you're looking for.Here's a hack that should give the result you want.Create a span with absolute position, top coordinate off the screen, like -100px. (This way, your user never has to see it.) Put your test character in the span. That is it's only content. In javascript, get the offset width of the span. That is the width of your character.You still have the problem of approximating the width of the total based on a single character's dimension, however, so it's not much of an improvement over other techniques.
Link to comment
Share on other sites

Create a span with absolute position, top coordinate off the screen, like -100px. (This way, your user never has to see it.) Put your test character in the span. That is it's only content. In javascript, get the offset width of the span. That is the width of your character.
I can't find any reference to "offsetWidth" in W3Schools. Any pointers?
Link to comment
Share on other sites

It's a property that all elements have. You just use it like this:

alert(document.getElementsByTagName("span").item(0).offsetWidth);

The following properties are on basically all elements:offsetWidth, offsetHeight, offsetLeft, offsetTop.

Link to comment
Share on other sites

Thanks for your inputs; it solved my problem. For other people who would like to use it:

document.write("<span id='spn' style='position:absolute;top:-200;font-family:monospace'>w</span>");var char_width=document.getElementById("spn").offsetWidth;

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...