Home/ Questions/Q 791565
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T21:51:28+00:00

I want to measure the size of a text in JavaScript. So far this

  • 0

I want to measure the size of a text in JavaScript. So far this isn’t so difficult because I can simply put a temporary invisible div into the DOM tree and check the offsetWidth and offsetHeight. The problem is, I want to do this BEFORE the DOM is ready. Here is a stub:

<html>
  <head>
    <script type="text/javascript">

    var text = "Hello world";
    var fontFamily = "Arial";
    var fontSize = 12;

    var size = measureText(text, fontSize, fontFamily);

    function measureText(text, fontSize, fontFamily)
    {
        // TODO Implement me!
    }      

    </script>
  </head>
  <body>
  </body>
</html>

Again: I KNOW how to do it asynchronously when DOM (or body) signals that it is ready. But I want to do it synchronously right in the header as shown in the stub above. Any ideas how I can accomplish this? My current opinion is that this is impossible but maybe someone has a crazy idea.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You don’t have to wait until the entire DOM is ready, just the bits of it you need.

    Move the script to just inside <body>. Now document.body exists, so you can document.body.insertBefore(myspan, document.body.firstChild). (But don’t appendChild, or you’ll be putting an element on top of where the parser is, which will typically break IE.)

    There may be more complicated workarounds (maybe using a canvas and measureText() for there?) but this is going to be by far the easiest.

    • 0