Responsive text by JavaScript

Question

I'm working on a JavaScript plugin that makes font-sizes flexible (for a responsive layout). The code works well so far, but I'm sure that it's capable of improvement (especially if you look at the global variable).

(function () {
    var extend = function (obj, ext) {
        for (var key in ext) {
            if (ext.hasOwnProperty(key)) {
                obj[key] = ext[key];
            }
        }
        return obj;
    };

    window.txt = function (el, k, c) {
        var s = extend({
            n: Number.NEGATIVE_INFINITY,
            x: Number.POSITIVE_INFINITY
        }, c);

        var fit = function () {
            var a = k;

            var i = function () {
                el.style.fontSize = Math.max(Math.min(el.clientWidth / a, parseFloat(s.x)), parseFloat(s.n)) + "px";
            };
            i();
            window.addEventListener("resize", i);
            window.addEventListener("orientationchange", i);
        };

        if (el.length) {
            for (var i = 0; i < el.length; i++) {
                fit(el[i]);
            }
        } else {
            fit(el);
        }

        return el;
    };
})();

DEMO

Meaning of the used variables:

• n = minFontSize
• x = maxFontSize
• s = settings
• c = config
• el = element
• i → running the function
• a or k = fontRatio/compressor

window.txt(document.getElementById("title"), 10);

↑ executes the JavaScript Plugin on an element.

Answer 1

Thoughts:

1. Variable names: I hate typing unnecessary text as much as the next dev, but variable names are not a good place to skimp. It's one thing when using i as an index variable, for example, but for others, please, please, please use meaningful names. If you have to provide a key after the fact, this should be a good clue that you've not adequately done so.

2. Don't pollute the global space. If the caller needs access to the function, return it instead. Or use modules (module.exports or the like).

3. minFontSize less than zero doesn't make much sense. I'd cap it at zero rather than –∞.

4. maxFontSize being capped at +∞ probably doesn't make sense either.

5. Your code will re-parse the minimum and maximum font sizes each time the handler is called. Cache these instead.

6. var a = k: Why? In this case, just use k instead.

7. i() does not do what you think it will: if el is an array, el.style is going to be undefined, and el.style.fontSize will error.

8. When iterating arrays using for (;;;), cache the length, like so:

   for (let i=0, l=arr.length;i<l;i++) { ... } // for ES5 use "var"
   

9. If k = 0, what happens? Division by zero...

This is a very quick rendition of your code (in ES6), with meaningful variable names, and implementing caching and such, but it might be useful:

function fitText(el, ratio, {minFontSize, maxFontSize}) {
  el.style.fontSize = Math.max(Math.min(el.clientWidth / ratio, maxFontSize), minFontSize) + "px";
}

function attachListeners(el, ratio, {minFontSize, maxFontSize} = {}) {
  const boundFitText = fitText.bind(undefined, el, ratio, {minFontSize, maxFontSize}),
        addEventListener = window.addEventListener;
  addEventListener("resize", boundFitText, false);
  addEventListener("orientationchange", boundFitText, false);
}

export function adjustTextSize(el = [], ratio = 1, 
  { 
    minFontSize=0, 
    maxFontSize=Number.POSITIVE_INFINITY 
  } = {}) 
{
  if (ratio === 0) {
    return el; // prevent division by zero later; throwing an exception might be better here, though
  }

  const parsedOptions = {
    minFontSize: parseFloat(minFontSize),
    maxFontSize: parseFloat(maxFontSize)
  }

  const els = (el instanceof Array) ? el : [el];
  for (let i=0, l=els.length; i<l; i++) {
    let actualEl = els[i];
    fitText(actualEl, ratio, parsedOptions);
    attachListeners(actualEl, ratio, parsedOptions);
  }
  return el;
};

Answer 2

something that I would definitely do on the next iteration, before this code gets too big, is to make the variables meaningful. I can't take a quick look at this and tell you that I know what it is doing or how to plug into it.

JavaScript is an older browser language that, for a long time, required using as little code as possible to achieve it's goal, this is not the case anymore.

in a huge JavaScript file you can use minify to make your code more compact and take out all the extra spaces. But please don't skimp on the variable names, it makes it hard for others to see exactly what your code is doing.