gerritvn Posted March 20, 2009 Share Posted March 20, 2009 How can I get the width of a character or a text string in pixels? Link to comment Share on other sites More sharing options...
ProblemHelpPlease Posted March 20, 2009 Share Posted March 20, 2009 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 More sharing options...
Ingolme Posted March 20, 2009 Share Posted March 20, 2009 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 More sharing options...
jeffman Posted March 20, 2009 Share Posted March 20, 2009 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 More sharing options...
gerritvn Posted March 20, 2009 Author Share Posted March 20, 2009 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 More sharing options...
gerritvn Posted March 20, 2009 Author Share Posted March 20, 2009 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 More sharing options...
jeffman Posted March 20, 2009 Share Posted March 20, 2009 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 More sharing options...
gerritvn Posted March 20, 2009 Author Share Posted March 20, 2009 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 More sharing options...
Ingolme Posted March 20, 2009 Share Posted March 20, 2009 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 More sharing options...
gerritvn Posted March 21, 2009 Author Share Posted March 21, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.