Html Question posted in
Some basic documentation can be found here.

Html – scrollwidth and clientwidth remain the same while increasing fontsize

I have this function that increases the fontsize of a container depending on the scrollwidth. But When I print the scrollWidth and clientWidth in the while loop, it stays the same.

function adjustFontSize(textField) {
      let fontSize = 10; // Starting font size
      textField.style.fontSize = fontSize + "px";
      // Increment font size until textField no longer fits
      while (textField.scrollWidth <= textField.clientWidth) {
        fontSize++;
        textField.style.fontSize = fontSize + "px";
      }
    }

This is my html. I am trying to resize the direct children of playerInfoContainer (the playerInfo classes).

<div id="playerInfoContainer">
        <div class="playerInfo winner">
          <div class="playerInfoName">Sané</div>
          <div class="playerInfoPercentage">9 (40,9%)</div>
        </div>
        <div class="playerInfo">
          <div class="playerInfoName">Hamm</div>
          <div class="playerInfoPercentage">8 (36,4%)</div>
        </div>

        <div class="playerInfo">
          <div class="playerInfoName">Gulászci</div>
          <div class="playerInfoPercentage">5 (22,7%)</div>
        </div>
      </div>

This is the css. The parent container is a flexbox but even if I change it to grid it doesn’t help.

#playerInfoContainer {
      position: absolute;
      top: 172px;
      left: 0;
      width: 267px;
      height: 599px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }

.playerInfo {
      width: 200px;
    }

.playerInfoName {
      font-family: UberEatsFat;
    }

    .playerInfoPercentage {
      font-size: 25px;
      font-family: UberEatsRegular;
    }

I tried to set the childrens flex-basis to 0px and flex-shrink to 0, so that the width stays the same.
When I am looking in devTools the scrollwidth of the containers that exceed the clientWidth is actually greater so I am only getting the wrong readings when executing my code.

Here is a MRE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #playerInfoContainer {
      position: absolute;
      top: 172px;
      left: 0;
      width: 267px;
      height: 599px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }

    .playerInfo {
      
      width: 200px;
    }

    .playerInfo.winner {
      color: red;
    }

    .playerInfoName {
      font-family: UberEatsFat;
    }

    .playerInfoPercentage {
      font-size: 25px;
      font-family: UberEatsRegular;
    }
</style>
<body>
    <div id="playerInfoContainer">
        <div class="playerInfo winner">
          <div class="playerInfoName">Sané</div>
          <div class="playerInfoPercentage">9 (40,9%)</div>
        </div>
        <div class="playerInfo">
          <div class="playerInfoName">Hamm</div>
          <div class="playerInfoPercentage">8 (36,4%)</div>
        </div>

        <div class="playerInfo">
          <div class="playerInfoName">Gulászci</div>
          <div class="playerInfoPercentage">5 (22,7%)</div>
        </div>
    
</body>
<script>
     const playerInfoContainer = document.getElementById("playerInfoContainer");
     const playerInfoContainerChildren = playerInfoContainer.children;
     Array.from(playerInfoContainerChildren).forEach((child) => {
      console.log("child: ", child);
      adjustFontSize(child);
    });
    function adjustFontSize(textField) {
      let fontSize = 10; // Starting font size
      textField.style.fontSize = fontSize + "px";
      // Increment font size until textField no longer fits
      console.log("textfield: ", textField);
      console.log("scrollWidth: ", textField.scrollWidth);
      console.log("clientWidth: ", textField.clientWidth);
      while (textField.scrollWidth <= textField.clientWidth && fontSize < 30) {
        console.log("scrollWidth: ", textField.scrollWidth);
        console.log("clientWidth: ", textField.clientWidth);
        // console.log(`adjust font size: ${fontSize}`);
        fontSize++;
        textField.style.fontSize = fontSize + "px";
      }
      console.log("scrollWidth: ", textField.scrollWidth);
      console.log("clientWidth: ", textField.clientWidth);
      // Step back one size
      textField.style.fontSize = fontSize - 6 + "px";
    }
</script>
</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured it out. The problem was that the page isn't fully loaded when I try to update the font size. Updating the font size in this event solved the issue entirely:

    window.onload = function () {
  Array.from(playerInfoContainerChildren).forEach((child) => {
    adjustFontSize(child);
  });
};

  2. 0

    I checked your code carefully and found a small logical issue. You updated font size in while loop, but it doesn’t immediately reflect the new values of scrollWidth and clientWidth because the DOM layout hasn’t updated yet.

    To solve the issue, you can use requstAnimationFrame for updates.

    I provide updated code

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #playerInfoContainer {
            position: absolute;
            top: 172px;
            left: 0;
            width: 267px;
            height: 599px;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

        .playerInfo {
            width: 200px;
        }

        .playerInfo.winner {
            color: red;
        }

        .playerInfoName {
            font-family: UberEatsFat;
        }

        .playerInfoPercentage {
            font-size: 25px;
            font-family: UberEatsRegular;
        }
    </style>
</head>
<body>
    <div id="playerInfoContainer">
    <div class="playerInfo winner">
        <div class="playerInfoName">Sané</div>
        <div class="playerInfoPercentage">9 (40,9%)</div>
    </div>
    <div class="playerInfo">
        <div class="playerInfoName">Hamm</div>
        <div class="playerInfoPercentage">8 (36,4%)</div>
    </div>

    <div class="playerInfo">
        <div class="playerInfoName">Gulászci</div>
        <div class="playerInfoPercentage">5 (22,7%)</div>
    </div>
    
    <script>
        const playerInfoContainer = document.getElementById("playerInfoContainer");
        const playerInfoContainerChildren = playerInfoContainer.children;

        Array.from(playerInfoContainerChildren).forEach((child) => {
            console.log("child: ", child);
            adjustFontSize(child);
        });

        function adjustFontSize(textField) {
            let fontSize = 10; // Starting font size
            textField.style.fontSize = fontSize + "px";

            function increaseFontSize() {
                // Here, you will check the scrollWidth and clientWidth after the layout updates
                requestAnimationFrame(() => {
                    console.log("scrollWidth: ", textField.scrollWidth);
                    console.log("clientWidth: ", textField.clientWidth);
                
                    if (textField.scrollWidth <= textField.clientWidth && fontSize < 30) {
                        fontSize++;
                        textField.style.fontSize = fontSize + "px";
                        increaseFontSize();
                    } else {
                        textField.style.fontSize = (fontSize - 1) + "px";
                        console.log("Final fontSize: ", textField.style.fontSize);
                    }
                });
            }
            increaseFontSize();
        }
    </script>
</body>
</html>

    To know about the requestAnimationFrame, please refer the doc here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search