javascript - Non-jQuery alternative to FitText.js?

Question

I'm working on a small project at the moment and one of the last things I need to do is create a nice responsive heading.

I found FitText.js which seems something I like a lot and exactly what I need. The only problem is that this plugin uses jQuery and I haven't used jQuery in the project at all and don't want to just to use one small plugin. Have you ever heard of or used a similar plugin to FitText.js except it does not require jQuery?

score 15 · Accepted Answer

Jeremy Keith (@adactio) is maintaining a non-jQuery alternative to FitText:

https://github.com/adactio/FitText.js

score 6 · Accepted Answer

Something like this should get you going, test thoroughly first. Essentially you scale the size of the text based on the offsetwidth of the element. You may want to set min and max font sizes, but I don't see the point.

The resize function can be about two lines of code.

<style type="text/css">
  div {
    border: 1px solid blue;
    white-space: nowrap;
    text-align: center;
  }
</style>

<script>

function resize(el, factor) {

  // Get element width
  var width = el.offsetWidth;

  // set default for factor
  if (typeof factor == 'undefined') {
    factor = 5;
  }

  // Set fontsize to new size
  el.style.fontSize = (width / factor | 0) + 'px';
}

window.onload = function() {
  function doResize() {resize(document.getElementById('d0'), 6);}
  window.onresize = doResize;
  doResize();
}

</script>

<div id="d0">Some text</div>

score 3 · Accepted Answer

OP,

jQuery compressed ~ 94 KB. Zepto compressed ~ 9.7 KB.

In short, if you include Zepto instead, and change the reference to jQuery on the last line of the plugin to Zepto — it just works. See this Fiddle

(function ($) {
    $.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', resizer);
        });
    };
})(Zepto);

According to the docs:

Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API.

So, in the case of someone who wants to use a jQuery plugin* without having to include the whole jQuery library, Zepto seems like a reasonable workaround.

*While 100% jQuery coverage is not a design goal, the APIs provided match their jQuery counterparts.

Hope that helps.

score 2 · Accepted Answer

I guess this problem has been solved by now, however I was looking for a similar solution a while back. I ended up making my own Fittext plugin since I needed to be able to have to switch it on only above a specific minimum screen width. So if anyone runs into the same problem, here's the solution I came up with:

https://github.com/dinealbrecht/fittext

javascript - Non-jQuery alternative to FitText.js?

4 回答 4

Related

Reference