Este es un sencillo taller de Javascript para hacer unos botones que permiten aumentar y disminuir el tamaño del texto, mediante la interacción del usuario. Esta es una utilidad especialmente interesante para conseguir un sitio accesible, que permita a los visitantes hacer que el tamaño de la fuente se ajuste a sus preferencias.

El ejercicio es muy sencillo, dado que se trata simplemente de cambiar unas clases CSS para que el tamaño de los textos se altere en la página. Esas clases las tenemos que cambiar a medida que se pulsan los botones, por lo que tendremos que definir unos simples manejadores de eventos. Sin embargo, hay algunas cosas que necesitamos tener en cuenta para que este ejercicio funcione correctamente. Vamos a empezar por ellas.

Tamaños de fuentes CSS con unidades relativas

El punto más importante para que todo funcione es definir los tamaños de los textos con CSS y unidades relativas a lo largo de todos los elementos de la página cuyo tamaño debe cambiar.

Si definimos relativos los tamaños de todos los elementos, solamente tendremos que cambiar el tamaño del texto del elemento principal de la página, la etiqueta HTML. Por ello, lo ideal es usar tamaños con unidades "em" o "rem".

El CSS para los elementos de la página sería entonces como este, siempre con unidades relativas.

body {
  font-size: 1rem;
}
h1 {
  font-size: 1.5rem;
}
li {
  font-size: 0.9rem;
}

Objeto classList de Javascript

El otro conocimiento importante que necesitas aplicar es el Javascript necesario para cambiar las clases CSS que tienen los elementos de la página. En Javascript los elementos del DOM tienen un objeto classList mediante el cual podemos hacer cosas como quitar o poner nombres de clases.

Por ejemplo, classList.remove('nombre_de_la_clase') permite quitar la clase llamada "nombre_de_la_clase" del elemento sobre el que lo invoquemos. El otro método que necesitarás usar es classList.add('nombre_de_la_clase'), para añadir una clase dada.

Por ejemplo, este código me sirve para añadir una clase al elemento HTML del documento.

htmlElement.classList.add('f3);

Explicando los controles para el cambio del tamaño del texto

Con este conocimiento básico podemos ya pasar a ver nuestro ejemplo. Por supuesto, necesitas saber lo básico de Javascript, como por ejemplo entender los arrays, saber asociar eventos a elementos de la página y cosas así. Todo esto lo aprendes en el Manual de Javascript.

El CSS con las clases de los distintos tamaños de letra

Para nuestro ejemplo vamos a crear varias clases CSS, con distintos tamaños de texto. Estas clases las vamos a

.f0 {
  font-size: 0.8rem;
}
.f1 {
  font-size: 0.9rem;
}
.f2 {
  font-size: 1rem;
}
.f3 {
  font-size: 1.1rem;
}
.f4 {
  font-size: 1.2rem;
}

Puedes tener tantas clases de tamaños de texto como desees, ya que hemos hecho el ejercicio para que sea muy sencillo poner más o menos tamaños.

Los botones HTML para cambiar los tamaños del texto

Ahora vamos a ver un par de botones HTML que nos servirán para que se cambien los tamaños del texto.

<p>
  <button id="aumentar">Aumentar</button>
  <button id="disminuir">Disminuir</button>
</p>

Fíjate que les hemos puesto identificadores, para luego referirnos a ellos con Javascript y poder asociarlos con los correspondientes manejadores de eventos.

El código Javascript

Nuestra idea para hacer este ejercicio de manera sencilla consiste en crear un array con todos los nombres de las clases CSS que contienen los tamaños del texto.

A lo largo del ejercicio vamos a tener una variable con el índice de la clase actual que tenemos como tamaño de fuente. Con los botones simplemente incrementaremos o decrementaremos ese índice y lo usaremos para colocar el siguiente tamaño de fuente, o el anterior, que hay en el array.

Este es el array con el índice:

var classes = ["f0", "f1", "f2", "f3", "f4"];
var classIndex = 2;

Fíjate que en el array tenemos los nombres exactos de las clases del CSS. El índice comienza en 2, porque es el tamaño del medio, que será el tamaño inicial al abrirse la página.

Ahora podemos ver los manejadores de eventos que se encargan de asociar las funcionalidades a los botones.

document.getElementById('aumentar').addEventListener('click', function() {
  let previousClass = classIndex;
  classIndex++;
  classIndex = (classIndex == classes.length) ? classes.length - 1 : classIndex;
  changeClass(previousClass, classIndex);
});
document.getElementById('disminuir').addEventListener('click', function () {
  let previousClass = classIndex;
  classIndex--;
  classIndex = (classIndex < 0) ? 0 : classIndex;
  changeClass(previousClass, classIndex);
});

Como puedes ver, usamos los identificadores de los botones para asociar eventos "click". Luego hacemos lo que habíamos comentado, aumentamos o disminuimos el índice. En la siguiente línea tenemos un código que nos permite tener el cuidado de que el índice no se pase de los límites del array por arriba o por abajo.

Luego invocamos al la función changeClass() pasándole la clase anterior y la clase siguiente. Esta función tiene la siguiente forma.

function changeClass(previous, next) {
  if(previous != next) {
    var htmlElement = document.querySelector('html')
    htmlElement.classList.remove(classes[previous]);
    htmlElement.classList.add(classes[next]);
  }
}

Como puedes ver, lo primero que hacemos es verificar que realmente el nombre de la clase haya cambiado.

En ese caso accedemos al elemento <html> de la página para luego quitarle la clase anterior y ponerle la clase CSS siguiente.

El código del ejemplo entero en funcionamiento y el enlace al demo los puedes ver en esta página de GitHub.

Cambiar también elementos como imágenes o tamaños de bloques

Podría parecer que este ejemplo solamente sirve para cambiar el tamaño de los textos, pero también puede servir para que cambie también el tamaño de elementos como imágenes o bloques en general (espacio que ocupen las columnas y otros elementos).

Para ello valdría colocar los tamaños de imágenes y de los bloques que quieres que se redimensionen usando unidades rem, de modo que sean relativos al tamaño del texto del elemento HTML de la página.

Aunque pueda ser un poco laborioso tener todos los tamaños con rem, te permitirá conseguir que todos los elementos cambien con esta técnica que hemos utilizado.

Cambiar de unidades px a rem

Si necesitas transformar tamaños que tengas en píxeles a tamaños en unidades rem, lo consigues con una simple regla del tres.

Para este cálculo hay que tener en cuenta que generalmente el tamaño del elemento HTML son 16px. Entonces, si 16 píxeles equivale a 1 rem, x píxeles equivalen a x/16 rem.

Por tanto, pasar píxeles a rem consiste simplemente en dividir por 16. Por ejemplo, 16px equivale a 1 rem, 160px equivale a 10rem. 8px equivale a 0.5rem.