Responsive font size using CSS/jQuery

Question

I want to create a responsive text inside a div.

I tried jquery-textfill and FlowType, but they are not working for me at all.

FlowType does not use all the available space, only a part of it (demo), while textfill does not respect the height (demo).

Am I using them incorrecly or what I want is too hard to achieve?

My HTML:

<body>
    <div class="external">
        <div class="internal">Example</div>
    </div>    
</body>

My CSS:

.internal{width:100%;height:100%}
.external{width:400px;height:50px;}

PS. Viewports are not supported enough for now.

Can you describe what you mean by "responsive text"? How is it supposed to respond exactly? — flowstoneknight
– flowstoneknight, Commented Sep 9, 2014 at 12:02

flowstoneknight · Accepted Answer · 2014-09-10 08:42:55Z

5

EDIT: Updated with resize event listener. Updated fiddle.

As I understand it, you want the text to be as large as possible while still fitting inside the containing <div>, correct? My solution is to put a <span> around the text, which conforms to the text's normal size. Then calculate the ratios between the container's dimensions and the <span>'s dimensions. Whichever is the smaller ratio (either width or height), use that ratio to enlarge the text.

HTML:

<div class="container">
    <span class="text-fitter">
        text here
    </span>
</div>

JS (jQuery):

textfit();
$(window).on('resize', textfit);

function textfit() {
    $('.text-fitter').css('font-size', 'medium');
    var w1 = $('.container').width()-10;
    var w2 = $('.text-fitter').width();
    var wRatio = Math.round(w1 / w2 * 10) / 10;

    var h1 = $('.container').height()-10;
    var h2 = $('.text-fitter').height();
    var hRatio = Math.round(h1 / h2 * 10) / 10;

    var constraint = Math.min(wRatio, hRatio);

    $('.text-fitter').css('font-size', constraint + 'em');
}

Here's a fiddle. Adjust the .container dimensions in the CSS to see it in action.

edited Sep 10, 2014 at 8:42

answered Sep 9, 2014 at 12:19

flowstoneknight

1,2361 gold badge7 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

dev9 Over a year ago

Yes, that's what I wanted. Although, I think we should also add some JS listener in order to react to resizing browser window.

flowstoneknight Over a year ago

@dev9 Again, you'll need to be a little more specific. What changes when the window is resized? In your question, .external has a set width (400px), so it wouldn't change on resize, so the text size wouldn't change either. Please actually describe what you want. "React to resizing" is too vague.

dev9 Over a year ago

I want what you've posted. The tricky thing is I do not control the .external div - so it should work if its size is set to specific value OR if its size is set to auto or x %

flowstoneknight Over a year ago

@dev9 Updated answer. In the future, please be clear about your specifications, as that affects what kinds of answers will help you.

dev9 Over a year ago

Thank you, but your updated fiddle does not cover entire text, only a part of it.

|

Hamix · Accepted Answer · 2014-09-09 11:21:32Z

1

CSS

.internal{width:100%;height:100%}
.external{width:auto;height:auto;background-color:yellow}

JQuery

$(".external").fitText(0.5);

DEMO 1

Update 1:

CSS

.internal{width:auto;height:auto;position:absolute;}
.external{width:400px;height:50px;background-color:yellow;position:relative;}

JQuery

$(".external").fitText();

DEMO 2

Update 2:

JQuery

var ex=$(".external");
var h=ex.height();
var w=ex.width();
ex.fitText(Math.min(h,w)/Math.max(h,w) );

DEMO 3

Update 4:

Bigtext is a jQuery text plugin that automatically enlarge the font size of your text to fill its parent container, without overflowing the container Div. jQuery Bigtext Plugin

edited Sep 9, 2014 at 11:21

answered Sep 9, 2014 at 10:42

Hamix

1,3357 silver badges19 bronze badges

7 Comments

dev9 Over a year ago

I don't want to make it AUTO. It is going to be a widget for 3rd party users. Some of them will probably assign some constant value to HEIGHT or WIDTH.

Hamix Over a year ago

See Update 1 in my answer.

Hamix Over a year ago

You must increase the height and width together.

Hamix Over a year ago

in your fiddle $(".external").fitText(0.5);

dev9 Over a year ago

But that's my whole point. I want to adjust the font even if width and height does not corelate. EDIT: no, adding 0.5 does not make it work

|

Josh Bradley · Accepted Answer · 2018-01-31 04:37:59Z

For anyone who stumbles upon this old post, I have found a solution I consider perfect.

You take this beautiful plugin written by Dave Rupert, configure the settings to your liking, and I added a wrapper for it that allows you to define the elements you want to resize. It also stores the original font size so when you scale back up, the text is limited by it's original size, otherwise it scales without limit.

Here's a snippet and a jsfiddle. JSFiddle

NOTE: the snippet only runs on resize in JSFiddle so be sure to resize your screen. In production it runs on load.

var headings = [$('h1'), $('h2'), $('h3')]

  $.each(headings, function(index, heading) {

    var fontsize = heading.css('font-size');
    $(window).on('load resize', function() {
      if (heading.parent()[0] &&
        heading.parent()[0].scrollWidth > $('.container').innerWidth()) {
        heading.fitText(1, {
          minFontSize: '10px',
          maxFontSize: fontsize
        });
      }
    });
  });


  /*global jQuery */
  /*!
   * FitText.js 1.2
   *
   * Copyright 2011, Dave Rupert http://daverupert.com
   * Released under the WTFPL license
   * http://sam.zoy.org/wtfpl/
   *
   * Date: Thu May 05 14:23:00 2011 -0600
   */

  $.fn.fitText = function(kompressor, options) {
    // Setup options
    var compressor = kompressor || 1,
      settings = $.extend({
        'minFontSize': Number.NEGATIVE_INFINITY,
        'maxFontSize': Number.POSITIVE_INFINITY
      }, options);
    return this.each(function() {
      // Store the object
      var $this = $(this);
      // Resizer() resizes items based on the object width divided by the compressor * 10
      var resizer = function() {
        $this.css('font-size', Math.max(Math.min($this.width() / (compressor * 10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
      };
      // Call once to set.
      resizer();
      // Call on resize. Opera debounces their resize by default.
      $(window).on('resize.fittext orientationchange.fittext', resizer);
    });
  };

.container {
  width: 80vw;
  background: yellow;
}

h1 {
  font-size: 5rem;
}

h2 {
  font-size: 4rem;
}

h3 {
  font-size: 3rem;
}

h4 {
  font-size: 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1>GIGANTICFONT</h1>
</div>
<div class="container">
  <h2>LargishFont</h2>
</div>
<div class="container">
  <h3>Mediumfont</h3>
</div>
<div class="container">
  <h4>smallfont</h4>
</div>

Collectives™ on Stack Overflow

Responsive font size using CSS/jQuery

3 Answers 3

8 Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related