Selector de tamaño de fuente

¿Has visto en algún sitio las tres A (“AAA”) que nos permiten controlar el tamaño del texto de la página? Son útiles principalmente en sitios que piensan en la usabilidad y la accesibilidad para usuarios. Alguno podrá decir que para qué complicarnos si presionando Ctrl + Rueda del mouse podemos hacer lo mismo a nivel de navegador, sin embargo, hay que pensar una cosa… ¿Cuántos usuarios saben de ésta combinación de teclas?… sin saber de números me arriesgo a decir que el usuario medio no lo sabe.

Hace un par de meses un cliente solicitó esta funcionalidad, entonces comencé a evaluar cómo implementarla. La primera opción fue mediante código de servidor, pero la descarté rápidamente ya que es carga de procesamiento injustificada ya que se puede realizar sin ninguna dificultad en el cliente mediante javascript.

Una vez decidida la forma de implementación… manos a la obra!

El javascript realiza el cambio de fuente mediante el cambio de clase (la etiqueta class) del body y almacena en una cookie los datos para persistir el cambio en el resto te las páginas y en las visitas futuras.

// Area de configuracion ---------------------------------------------------->
var fontSizeCookieName       = "mySiteFontSize"; //El nombre de la cookie
var fontSizeDefaultSize      = 2; // Id del tamaño por defecto
var fontSizeActiveClassName  = "active"; // Class css para el  activo
var fontSizeIdText           = "fontSize"; // Texto previo al id de la fuente
var fontSizeBodyClass        = "fontSize"; // Texto previo al id de la fuente para el class del Css class de
var fontSizeBodyDefaultClass = ""; //  class cuando está activada la fuente por defecto
var fontSizeCookieDuration   = 31; // Tiempo de duración de la cookie, en dias (si se quiere solo para la sesion actual, utilizar 0)
// <----------------------------------------------------------------------

var fontSize;
function getFontSizeCookieValue() {
    var results = document.cookie.match('(^|;) ?' + fontSizeCookieName + '=([^;]*)(;|$)');

    if (results)
        return (unescape(results[2]));
    else
        return null;
}
function deleteFontSizeCookie() {
    var cookie_date = new Date();
    cookie_date.setTime(cookie_date.getTime() - 1);
    document.cookie = fontSizeCookieName += "=; expires=" + cookie_date.toGMTString();
}
function setFontSizeCookie(size) {
    if (fontSizeCookieDuration != 0) {
        var current_date = new Date;
        var cookie_year = current_date.getFullYear();
        var cookie_month = current_date.getMonth();
        var cookie_day = current_date.getDate() + fontSizeCookieDuration;

        var cookie_string = fontSizeCookieName + "=" + escape(size);

        if (cookie_year) {
            var expires = new Date(cookie_year, cookie_month, cookie_day);
            cookie_string += "; expires=" + expires.toGMTString();
        }
    }

    cookie_string += "; path=/";

    document.cookie = cookie_string;
}
function setFontSize(size) {
    if (size != fontSizeDefaultSize) {
        document.body.className = fontSizeBodyClass + size;
    } else {
        document.body.className = fontSizeBodyDefaultClass;
    }
    fontSize = size;
}
// Cambia el tamaño, setea el link activo y actualiza la cookie
function changeFontSize(sizeAnchor) {
    if (sizeAnchor.id) {
        var size = sizeAnchor.id;
        size = size.substring(8);
        document.getElementById(fontSizeIdText + fontSize).className = "";
        setFontSize(size);
        setFontSizeCookie(size);
        sizeAnchor.className = fontSizeActiveClassName;
    }
}
// Funcion inicializadora
function fontSizeInit() {
    // Obtiene la cookie, si no existe, la crea
    if (!getFontSizeCookieValue()) {
        setFontSizeCookie(fontSizeDefaultSize);
        fontSize = fontSizeDefaultSize;
    }
    else {
        fontSize = getFontSizeCookieValue();
    }

    changeFontSize(document.getElementById(fontSizeIdText + fontSize));
}
// Colocar la funcion inicializadora en el onLoad porque el elemento  no está disponible hasta que la página carge y daría error
window.onload = fontSizeInit;

Los enlaces “A” deben de llamar a changeFontSize(this) y deben de tener como id “fontSizeX” donde X es el id del class por la cual se cambiará el del body.