Home/ Questions/Q 6943549
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T13:10:14+00:00

I’m trying to precisely fit a string into a certain width. This means the

  • 0

I’m trying to precisely fit a string into a certain width. This means the font-size changes depending on the string. I now use the following function, using jQuery:

function fontResize ( )
{
    for (var i = $("#date").css("font-size").slice(0, -2); $("#date").width() < $("#clock").width(); i++)
        $("#date").css("font-size", i.toString() + "px");   
}

The idea is that I set the font-size in the CSS to the lowest possible value. I initialize the loop with this value and increment the font-size with 1 until the string is wider than the width of the containing element. The string in this case is “date” and the containing element is “clock”.

Although this works, I think the main disadvantage is that the string has to be first drawn before the width can be determined. This means I cannot call this function before loading the body.

If anyone knows a better way to do this please let me know! Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To make sure you’re getting all the styles and such applied to it that will be applied when the page is fully rendered, yes, you do want to put the element in the DOM (and in the right place in the DOM) before you do your measurement stuff. But you don’t have to wait until everything else is there (unless you think it will affect the styling of the string you’re measuring). You can put your code in a script block immediately after the element in question — no waiting for ready. The date element will be there and accessible, according to Google’s Closure library engineers. E.g., if date is a span:

    <body>
...
<span id="date">December 13th</span>
<script>fontResize();</script>
...
...
</body>

    It’s unfortunate to intermix code and markup like that (particularly if you have separate teams doing the markup and the code), but if your requirement is to size the text absolutely as soon as possible, that’s how.

    The above also assumes your fontResize function is already loaded (e.g., in a script block higher on the page). This is another reason it’s unfortunate to mix markup and code like this, because normally of course you want to put your scripts at the bottom, just before closing the body tag.

    However: It may be worth experimenting to see if you can do your resizing in the script you put just before the closing body tag instead. There’d be a small window of opportunity for the page not to look right, but quite small and of course pages tend to look a little funny as they load anyway. Then you wouldn’t have the intermixing problem and wouldn’t have to load your scripts early. You may find that the just-before-the-closing-body-tag is soon enough.

    • 0