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

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.

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

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