PDA

View Full Version : How to Find Width Of A String?

dealmaker
09-13-2005, 06:09 PM
Hi,
I have a textarea with strings of text with '\n' at the end. I tried not to set the width textarea, but textarea's width is always longer than the string themselves. I want to find the width of the longest string. I know how to find the longest string, but don't know how to calculate the width. I tried width = string.length * font_size, but it's too long, so I should not use font size. What should I use?

When I calculated height of a string, I used lineHeight. Is there something similar for the width?

Many thanks.
rm-f
09-13-2005, 06:20 PM
<textarea> (HTML) has rows and cols.
For me the Cols is a strange attribute when a proportional width font is in use.
Did you try:
textarea.cols = string.length
dealmaker
09-13-2005, 08:03 PM
It seems to work with IE, but not with Firefox. Any better way?

<textarea> (HTML) has rows and cols.
For me the Cols is a strange attribute when a proportional width font is in use.
Did you try:
textarea.cols = string.length
rm-f
09-13-2005, 10:48 PM
(1)
FF takes space for the scroll bar, but doesn't show one as IE

<html>
<head>
<script>
var testNo=0;
var s = '';

function updateTA(str,cols) {
var ta = document.getElementById('tA');
ta.value = str;
ta.cols = cols;
}

function testWidth() {
switch(testNo++) {
case 0:
s = '1';
break;
case 1:
s = '123456789012345678901234567890';
break;
case 2:
s = '12';
break;
default:
s = 'END OF TEST';
testNo--;
}
updateTA(s, s.length);
}

function testWidthFF() {
s = 'END OF TEST\n2\n3\n4\n5\n6';
document.getElementById('tA').value = s;
var st = (new String(s)).split('\n');
var maxLen = 0;
for(var i=0; st[i]!=null; i++) {
if(st[i].length > maxLen) {
maxLen = st[i].length
}
}
updateTA(s, maxLen);
}
</script>
</head>
<body>
<textarea id='tA' rows="3"></textarea><br />
<button onclick="testWidth();">Click until 'END'</button><br />
<button onclick="testWidthFF();">Click to see why FireFox has more space</button>
</body>
</html>
dealmaker
09-13-2005, 11:30 PM
the weird thing is that I already set overflow to hidden. So why would Firefox still reservse space for scrollbar? There is always that extra space which seems to be more than the width of 2 scroll bars. In IE, there is no such space, it fits the string perfectly.

Is there a better way to do it without using textarea.cols?

(1)
FF takes space for the scroll bar, but doesn't show one as IE

<html>
<head>
<script>
var testNo=0;
var s = '';

function updateTA(str,cols) {
var ta = document.getElementById('tA');
ta.value = str;
ta.cols = cols;
}

function testWidth() {
switch(testNo++) {
case 0:
s = '1';
break;
case 1:
s = '123456789012345678901234567890';
break;
case 2:
s = '12';
break;
default:
s = 'END OF TEST';
testNo--;
}
updateTA(s, s.length);
}

function testWidthFF() {
s = 'END OF TEST\n2\n3\n4\n5\n6';
document.getElementById('tA').value = s;
var st = (new String(s)).split('\n');
var maxLen = 0;
for(var i=0; st[i]!=null; i++) {
if(st[i].length > maxLen) {
maxLen = st[i].length
}
}
updateTA(s, maxLen);
}
</script>
</head>
<body>
<textarea id='tA' rows="3"></textarea><br />
<button onclick="testWidth();">Click until 'END'</button><br />
<button onclick="testWidthFF();">Click to see why FireFox has more space</button>
</body>
</html>
rm-f
09-14-2005, 03:22 AM
I don't know is there a better way than cols. Major question is how to calculate width for width proportional fonts?

IE manages textarea better then FF. When rows has been specified, FF adds one more line (I assume this is for horizontal scroll bar). It is possible to show scroll bars all the time
<style> overflow: scroll;

To make life more interesting: rows/cols work correctly only for default font (fixed with, default size). I have changed font to Arial 20px. Result is just a mess.