PDA

View Full Version : the size of a space

angiras
09-22-2003, 03:02 PM
how can you know exactly the width of a &n\bsp; (without the \ )

let's say with a font-size : 12 px ?
brothercake
09-22-2003, 03:26 PM
measure the offsetWidth of its container.
angiras
09-22-2003, 03:36 PM
ok let say

<body>
<div> space</div>
<body>

what will the value of one space in the div

if the div has a courier new 12 px ?

thanks
liorean
09-22-2003, 04:46 PM
Create an element with only an &amp;nbsp; in it, and read the computed width/offsetWidth of the element. However, for a monospaced font such as Courier New, you could measure an element containing an arbitrary string and then divide the width with the number of characters within it.
angiras
09-22-2003, 05:26 PM
ok thank you ! :-)
cheesebag
09-22-2003, 06:58 PM
the size of a space :cool:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

.m {font-family: monospace;}
.v {font-family: verdana;}
.c {font-family: "comic sans ms";}
.t {font-family: "times new roman";}
.a {font-family: "arial black";}

</style>
<script type="text/javascript" language="javascript">

function getTestWidth(str, fontfamily)
{
var wid, testSPAN = document.createElement('span');
testSPAN.style.position = 'absolute';
testSPAN.style.visibility = 'hidden';
testSPAN.style.fontFamily = fontfamily;
testSPAN.appendChild(document.createTextNode(str));
document.getElementsByTagName('body')[0].appendChild(testSPAN);
wid = testSPAN.offsetWidth;
testSPAN = null;
return wid;
}

</script>
</head>
<body style="text-align:right;margin-right:50%;margin-top:100px;background:ghostwhite;">
<span class="m">This is a monospace space---&amp;gt; </span>|<span class="m">&amp;nbsp;</span>|<br />
width: <script>document.write(getTestWidth('&amp;nbsp;', 'monospace'))</script>
<br /><br />
<span class="v">This is a verdana space---&amp;gt; </span>|<span class="v">&amp;nbsp;</span>|<br />
width: <script>document.write(getTestWidth('&amp;nbsp;', 'verdana'))</script>
<br /><br />
<span class="c">This is a comic sans ms space---&amp;gt; </span>|<span class="c">&amp;nbsp;</span>|<br />
width: <script>document.write(getTestWidth('&amp;nbsp;', 'comic sans ms'))</script>
<br /><br />
<span class="t">This is a times new roman space---&amp;gt; </span>|<span class="t">&amp;nbsp;</span>|</span><br />
width: <script>document.write(getTestWidth('&amp;nbsp;', 'times new roman'))</script>
<br /><br />
<span class="a">This is an arial black space---&amp;gt; </span>|<span class="a">&amp;nbsp;</span>|<br />
width: <script>document.write(getTestWidth('&amp;nbsp;', 'arial black'))</script>
</body>
</html>
angiras
09-22-2003, 07:53 PM
well done !

but the values , 30, 45 ect ... are not pixels ?

a 45 look larger than a 60 ??


thanks a ton