If you are using fixed font like Courier New then it is easy: the
amount of letters per line equals to the box "size" attribute ("cols"
in textarea)
otf: Actually an estimate if fine. I don't need to be exact to the
pixel and users could of course use which ever font they prefer.
I also thought of a general solution, not only for textareas
..
For variable fonts like Times you are out of lack because JavaScript
doesn't have FontMetrics equivalent like in Java. Both em and ex units
refer to a certain glyph's *height*, which has very relative or none
correlation to the glyphs' width in the given typeset.
otf: Well, I wasn't exactly thinking about having FontMetrics like in
Java ;-)
and I beg to differ with your general statement. I just scratched some
code quickly and tested it with Konqueror and Firefox just fine using
different font sizes and types. It does what is needed!!!
..
The idea is to just write some text in and check its properties. an
'm' was safely used, because it is a wide enough font.
..
<html>
<head><title>Object's internal space for text</title></head>
<style TYPE="text/css">
p{
margin: 0px;
border: 0px;
padding: 0px;
font-size: 1.0em;
/* font-family: Courier monospace; */
font-family: Times;
}
#testsize{
height: 100px;
width: 200px;
border: 1px solid black;
}
#testpsz{
font-family: arial;
background-color: lightblue;
}
</style>
<script language="JavaScript1.2">
<!--
function Space4Text(){
var iVSz00, iHSz00, iVSz02, iHSz02;
var DOMTestSize = document.getElementById('testsize');
iVSz00 = DOMTestSize.offsetHeight;
iHSz00 = DOMTestSize.offsetWidth;
alert(" DOMTestSize: " + DOMTestSize + " iVSz00: " + iVSz00 + ",
iHSz00: " + iHSz00);
// __
document.getElementById('testsize').innerHTML = '<p>this is an <span
id="testpsz">m</span> hfhfh.</p>';
var DOMPSize = document.getElementById('testpsz');
iVSz02 = DOMPSize.offsetHeight;
iHSz02 = DOMPSize.offsetWidth;
alert(" DOMPSize: " + DOMPSize + " iVSz02: " + iVSz02 + ", iHSz02: "
+ iHSz02);
// __
var iMs = parseInt((iHSz00/iHSz02));
var iLns = parseInt((iVSz00/iVSz02));
alert(" so, approximately " + iMs + "m\'s could be written in each of
the " + iLns + " lines, for a total of " + (iMs*iLns) + "
characters.");
}
//-->
</script>
<body onload="Space4Text();">
<div id="testsize"><div>
</body>
</html>
