Home/ Questions/Q 52467
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T16:54:41+00:00

I want to resize the font of a SPAN element’s style until it the

  • 0

I want to resize the font of a SPAN element’s style until it the SPAN’s text is 7.5 inches wide when printed out on paper, but JavaScript only reports the SPAN’s clientWidth property in pixels.

<span id='test'>123456</span>

And then:

#test {   font-size:1.2in; /* adjust this for yourself until printout measures 7.5in wide */ }

And then:

console.log(document.getElementById('test').clientWidth);

I’ve determined experimentally on one machine that it uses approximately 90 DPI as a conversion factor, because the above code logs approximately 675, at least under Firefox 3.

This number is not necessarily the same under different browser, printer, screen, etc. configurations.

So, how do I find the DPI the browser is using? What can I call to get back ’90’ on my system?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. I think this does what you want. But I agree with the other posters, HTML isn’t really suited for this sort of thing. Anyway, hope you find this useful.

    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <title>Untitled Document</title> <style type='text/css'> #container {width: 7in; border: solid 1px red;} #span {display: table-cell; width: 1px; border: solid 1px blue; font-size: 12px;} </style> <script language='javascript' type='text/javascript'> function resizeText() {   var container = document.getElementById('container');     var span = document.getElementById('span');      var containerWidth = container.clientWidth;   var spanWidth = span.clientWidth;      var nAttempts = 900;     var i=1;     var font_size = 12;      while ( spanWidth < containerWidth && i < nAttempts ) {       span.style.fontSize = font_size+'px';          spanWidth = span.clientWidth;          font_size++;       i++;     }        } </script> </head>  <body> <div id='container'> <span id='span'>test</span> </div> <a href='javascript:resizeText();'>resize text</a> </body> </html>
    • 0