0

I’ve been struggling with text resizing. I am using Dark Sky’s awesome weather api to return summary text to my display. As the text content can change with the weather, sometimes there are are one or two words, sometimes a few more.

I have a fixed size div on my page, and would like to the api response to always be as big as possible, but wrap across the line space within the div. I’ve seen many examples and plug-ins that do similar but force the text on to one line only.

Code below in snippet

    $(document).ready(function() {
       resize_to_fit();
    });

        function resize_to_fit() {
      var fontsize = $('div#outer div').css('font-size');
      $('div#outer div').css('font-size', parseFloat(fontsize) - 1);

        if ($('div#outer div').height() >= $('div#outer').height()) {
            resize_to_fit();
        }
      }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <div id="outer" style="width:200px; height:200px; border:1px solid red;">
    <div>bad weather</div>

    </div>

Above is a good example, from SO, but does not increase the font size to fill the div when there are only one or two words. Can anyone point me in the direction of enhancing the above code to achieve this? Thanks

  • `$('div#outer div').css('fontSize', parseFloat(fontsize) - 1);` should be: `$('div#outer div').css('font-size', parseFloat(fontsize) - 1);` – Fecosos Apr 10 '18 at 03:34
  • Thanks @Fecosos, i fixed that, it didn’t make any difference to the behaviour of the code however. –  Apr 10 '18 at 03:45
  • Are you dealing with `AJAX`? if so are you calling `resize_to_fit()` at success after text is rendered? I checked the code by making "bad weather" 20 words long and it does make the `font-size` smaller, I don't really understand if I'm getting something wrong or you need to improve the question. – Fecosos Apr 10 '18 at 03:51
  • Quickly looked in to `resize_to_fit()` and no, I’m not calling it, but it doesn’t seem to help when looking at the docs. Yes, if you paste in loads of text the font does become smaller. But how can I ensure when there are fewer words, the text is as big as possible? –  Apr 10 '18 at 04:05
  • You have to call `resize_to_fit()` after the text from the api is rendered. After you finish dealing with the api request then you call your function. You can solve it with `CSS` but eventually you'll need to understand callbacks in javascript. – Fecosos Apr 10 '18 at 04:07
  • Sorry, yes, of course I’m calling it! I thought it was some secret AJAX function that resized the text or something! Late night!! Cheers –  Apr 10 '18 at 05:48

2 Answers2

1

You can try this with font-size:260%

$(document).ready(function() {
       resize_to_fit();
    });

        function resize_to_fit() {
      var fontsize = $('div#outer div').css('font-size');
      $('div#outer div').css('font-size', parseFloat(fontsize) - 1);

        if ($('div#outer div').height() >= $('div#outer').height()) {
            resize_to_fit();
        }
      }
#outer{
font-size:260%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <div id="outer" style="width:200px; height:200px; border:1px solid red;">
    <div>bad weather</div>

    </div>
Khushbu Vaghela
  • 609
  • 2
  • 5
  • 18
  • Thanks, that feels like progress! I made the font size huge though and it eventually spilled out of the div rather than wrapping. Granted, this was once I got down to only one word though so probably isn’t an issue. –  Apr 10 '18 at 04:34
  • Glad to help you :) Thank you for accepting the answer. – Khushbu Vaghela Apr 10 '18 at 05:07
-1

There is a CSS3 method to achieve what you're specifying. You can use viewport units to get the text from your API call to resize with accordance to your fixed div. Lets say you gave your text an id, #resize. The the code would look like this:

#resize {
    font-size: 30px; //fallback
    font-soze: 3.5vw; //adjust till satisfactory.

}

This way, you wouldn't have to worry about using javascript to resize the text.(Save load time!)

Pure CSS to make font-size responsive based on dynamic amount of characters

https://css-tricks.com/viewport-sized-typography/

https://medium.com/@mrsallee/pixel-free-css-66bddb327bb1

Razetime
  • 216
  • 3
  • 19
  • Thanks, i had looked at vw in CSS3, but it didn’t seem suitable as it regularly referenced increasing the font size as the viewport is changed. I have a fixed size div and am changing the text content. Chrome on the Pi doesn’t seem to like vw at all, either! :-( –  Apr 10 '18 at 04:32
  • Since some browser don't like vw, there's a fallback(30px). Sorry that I couldn't help you. – Razetime Apr 10 '18 at 04:34