Resize font and fit in div with Javascript

Question

So I have been looking around SO for a long time and while I found a few similar solutions, non of them are actually working for my purpose.

Here's my problem: I'm trying to make a limited amount of fonts fit in a div and move the image in the div accordingly. Basically, I'm trying to replicate the following:

https://brelok.de/#konfigurator

If you Select Nummernschild and you Select Deutschland and fill in the boxes and select the two other options, you will see what I mean exactly.

Now I can get my text in a div and the image in the div as well, just find with the on change function. My issue is with resizing the font and moving the image inside the div accordingly.

Can anyone please suggest an idea on how to go about this? I'm completely lost here.

Thanks

Edit: Please find the image of what I'm trying to achieve. Basically, it's a div and when I type in the 3 text boxes, I can show the text just fine in the div. However, I'm struggling to resize the text so that they fit in properly and do not affect the little middle pictures.

Could you share a snippet of how you are trying to move the image, and also what exactly you mean by you want to move the image accordingly. — Kumar Aman, Feb 25 '19 at 04:52
@KumarAman Please find the edited post with the image. If you type in the text boxes `www` for example, see how the little images at the center move, the font resizes to fit and so on. I can easily show the images and show the text, but the auto resizing part and adjustment is what's bothering me. — nTuply, Feb 25 '19 at 04:59
@nTuply, in the example site provided, i do not see the image being resized, but if you want to resize the image, you can have multiple classes with different widths specified, and use those classes whenever there is an onchange. The movement part of the image will automatically be taken care of in case of font change. — Kumar Aman, Feb 25 '19 at 05:09
@KumarAman Yes the image is not resized, it's the font that resizes. That's my problem, how do I resize the font(change size of font) automatically to fit in the space? — nTuply, Feb 25 '19 at 05:16
Assuming text-only, here's [a good SO thread](https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container) on scaling fonts according to div width. If you intend on a mixture of characters and image objects, like the example website, you'll have to expand on the font scaling function to account for image objects. — Kalnode, Feb 25 '19 at 05:19
@nTuply You can do it in the similar way the example site does. It has different classes with different font-sizes specified and is using javascript to add or remove those classes. In the onchange event you can check for the string length and based on the length you can add or remove the font-size classes as and when required. Hope this will clear the confusion. — Kumar Aman, Feb 25 '19 at 05:25
@KumarAman Excellent idea. This is what I think will work here. It's a longer process but will do the job — nTuply, Feb 25 '19 at 05:27

score 0 · Answer 1 · answered Feb 25 '19 at 05:42

You can use transition at CSS and keyup event to adjust font-size if <input> .value .length is greater than N, for example, set to 5 with maxlength set to 8

<!DOCTYPE html>
<html>
  <head>
    <style>
      input {
        width:320px;
        height:60px;
        font-family: sans;
        font-size:48px;
        text-align: center;
        transition: font-size 1s ease-in;
      }
    </style>
    <script>
      function setFontSize(el) {
        el.style.fontSize = el.value.length > 5 ? "38px" : "48px";
      }
    </script>
  </head>
  <body>
    <input maxlength="8" 
           pattern="[A-Z]+" 
           placeholder="ABCDEFGH"
           oninvalid="this.value=''" 
           oninput="this.checkValidity()"
           onkeyup="setFontSize(this)">
  </body>
</html>

Resize font and fit in div with Javascript

1 Answers1