Ajustar el tamaño de texto según su contenedor

En mi último proyecto necesito ajustar el tamaño de texto según el tamaño de su contenedor. Inicialmente opte por usar el plugin FitText.js, que aunque funciona muy bien no era lo que necesitaba, ya que yo desconozco el tamaño de la cadena de texto, y con fitText  necesitas saberlo para proceder a ajustarlo.

Por eso, y gracias a mi compañera Nereavoy a usar esta función, que encaja mejor con lo que busco:

ACTUALIZACIÓN (Nov-13): La función que usaba tenía serios problemas de rendimiento, y la he actualizado mejorando bastante su comportamiento y funcionalidad. A parte de mejorar el rendimiento, tambien he añadido 2 parametros. El primero “set_max_size” es para decirle al plugin si quieres limitar el redimensionado a un tamaño máximo (el dado por el tamaño del texto en el CSS) y si quieres un tamaño mínimo “min_size”

adjustTextSize

 

$.fn.adjustTextSize = function (set_max_size, min_size) {
    min_size = min_size || 12; // if no value then set a default one
    var string, width, line, initFontSize, returnFontSize, ratio;

    return this.each(function() {
        // Store the object
        var $this = $(this);

        var resizer = function () {
            string = $this;
            string.html('<span style="white-space: nowrap;">' + string.html() + '</span>');

            width = string.width();
            line = $(string.children('span'));
            initFontSize = parseInt(string.css('font-size'));
            ratio = width/line.width();

            returnFontSize = initFontSize*ratio;

            if (set_max_size && returnFontSize > set_max_size) {
                returnFontSize = set_max_size;
            }

            if (min_size && returnFontSize < min_size) {
                returnFontSize = min_size;
            }

            string.css('font-size',returnFontSize);
            while (line.width() >= width) {
                if (min_size && returnFontSize <= min_size) {
                    string.html(line.html());
                    return false;
                }
                string.css('font-size', --returnFontSize);
            }
            string.html(line.html());
        }

        // Call once to set.
        resizer();

        // Call on resize. Opera debounces their resize by default.
        $(window).on('resize orientationchange', resizer);
    });
};
$('.js-adjust-text').adjustTextSize(false, 12);
$('.js-adjust-text-limit').adjustTextSize(true, 30);

 

2 comentarios

  1. Howdy dice:

    Thanks for this code. Works great. But it does have a mistake when setting the maximum font size. The font size decreases correctly when minimizing the screen. But then it wouldn’t increase when maximizing the screen after that. So…

    Change This:

    if (set_max_size && returnFontSize > initFontSize) {
    returnFontSize = initFontSize;
    }

    TO This:

    if (set_max_size && returnFontSize > set_max_size) {
    returnFontSize = set_max_size;
    }

    http://www.vissit.com/ajustar-el-tamano-de-texto-segun-su-contenedor

  2. Gracias por el aporte, ¡Sabrías como hacerlo en drupal 7? con CKeditor por ejemplo.

    Muchas gracias

Escribe una comentario