jFontSize: Manejar el tamaño de los textos

Hay muchos scripts que hacen lo mismo que jFontSize pero este es bastante simple ya que usa la librería jQuery.

En general, no creo que sea algo demasiado útil ya que hacer zoom es algo que cualquier navegador admite de modo nativo pero, aún así, muchos sitios lo utilizan así que no hay nada de malo en tenerlo como opción. La idea es facilitar la generación de botones que permitan aumentar o disminuir el tamaño de las fuentes de los textos.

El script es muy pequeño y puede descargarse desde la web del desarrollador aunque lo que ahí nos ofrecen no admiten las opciones que posee el plugin (es raro pero es así) entonces, lo mejor, es descargar el zip con los scripts y los ejemplos. Allí, en la carpeta JS, veremos el archivo que necesitamos: jquery.jfontsize-1.0.js

Una vez agregado a nuestro sitio, antes de </head> deberíamos establecer las reglas de estilo de esos botones. En este caso, puse lo siguiente pero, puede ser cualquier otra cosa:

<style>
  .jfontsize-button {
    background-color: #EEE;
    border-radius: 4px;
    box-shadow: 0 0 0.2em #888 inset;
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-family: Arial;
    font-size: 13px;
    font-weight: bold;
    margin: 0 1px;
    opacity: 0.8;
    padding: 0.3em 0;
    text-align: center;
    text-decoration: none;
    width: 2em;
  }
  .jfontsize-button:hover {
    opacity: 1;
  }
  .jfontsize-disabled, .jfontsize-disabled:hover {
    opacity: .5;
    pointer-events: none;
  }
<style>

Y de manera genérica, lo ejecutamos de este modo:

$(document).ready(function() {
  $('#nombreID').jfontsize();
  // o bien esto otro si queremos hacer referencia a la clase
  $('.nombreCLASE').jfontsize();
})

Donde nombreID o nombreCLASE deben indicar la etiqueta sobre la que funcionará, teneindo en cuenta que esa etiqueta debe tener una regla de estilo con un tamaño de fuente ya sea específico o heredada de su contenedor. Por ejemplo, si quisiéramos aplicarlo a todas las entradas de este blog, debería usar algo así:

$('.post-body').jfontsize();

ya que los textos se encuentran en un DIV con esa clase sin embargo, si dentro de esa etiqueta, hay otras que especifican un tamaño, estas no se verán afectadas; veamos un ejemplo concreto:

<div id="demojfontsize">
  <div style="text-align:right;">
    <a id="jf1-b1" class="jfontsize-button" href="#">A-</a>
    <a id="jf1-b2" class="jfontsize-button" href="#">A</a>
    <a id="jf1-b3" class="jfontsize-button" href="#">A+</a>
  </div>
  ... un texto cualquiera ...
  <span style="color:#FF0; font-family:cursive; font-size:20px;">otra fuente y otro tamaño</span>
  ... un texto cualquiera ...
</div>

si el script lo ejecutamos así:

$('#demojfontsize').jfontsize({
  btnMinusClasseId: '#jf1-b1',
  btnDefaultClasseId: '#jf1-b2',
  btnPlusClasseId: '#jf1-b3'
});

veríamos algo como esto:

A-AA+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce pulvinar mauris ac purus lobortis et dapibus libero facilisis. Praesent consectetur odio et massa congue mollis nec non turpis. Morbi in leo in est congue lobortis sed et enim.
otra fuente y otro tamaño
Praesent hendrerit risus vel velit eleifend ornare. Ut eu metus elit. Nullam sollicitudin, quam at dictum tristique, odio nunc vestibulum nibh, vel molestie erat eros eu metus. Fusce leo purus, venenatis ut adipiscing ut, placerat rutrum ligula. Maecenas pellentesque posuere arcu nec sagittis? Pellentesque feugiat dignissim risus, id laoreet lectus pulvinar id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In tincidunt mi in erat lobortis egestas. Integer lacus odio, tincidunt quis ullamcorper non, adipiscing aliquam nibh. Sed bibendum turpis aliquet purus dignissim fringilla.

Los botones A- y A+ aumentarán o disminuirán el tamaño del texto y el botón A central restaurará el tamaño a su valor original pero, nada de eso afectaría el span de color amarillo ya que en la etiqueta, el tamaño del texto es explícito porque se encuentra en un atributo style o está definido en alguna otra regla.

La cantidad de clicks sobre los botones es infinita así que llegará un momento en que el tamaño sea gigantesco o no se vea nada. Eso es algo que podemos controlar con las opciones:

btnMinusMaxHits es un valor (por defecto 10) que establece la cantidad de veces que puede decrementarse el tamaño
btnPlusMaxHits es un valor (por defecto 10) que establece la cantidad de veces que puede incrementarse el tamaño
sizeChange es un valor que establece cuanto aumenta o disminuye y por defecto es 1y está expresado en pixeles

Si el script dijera esto:

$('#demojfontsize2').jfontsize({
  btnMinusClasseId: '#jf2-b1',
  btnDefaultClasseId: '#jf2-b2',
  btnPlusClasseId: '#jf2-b3',
  btnMinusMaxHits: 5,
  btnPlusMaxHits: 5,
  sizeChange: 1
});

Habría un máximo de cinco clicks disponibles y al llegar a ese límite, el botón se deshabilitaría.

A-AA+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce pulvinar mauris ac purus lobortis et dapibus libero facilisis. Praesent consectetur odio et massa congue mollis nec non turpis. Morbi in leo in est congue lobortis sed et enim.
otra fuente y otro tamaño
Praesent hendrerit risus vel velit eleifend ornare. Ut eu metus elit. Nullam sollicitudin, quam at dictum tristique, odio nunc vestibulum nibh, vel molestie erat eros eu metus. Fusce leo purus, venenatis ut adipiscing ut, placerat rutrum ligula. Maecenas pellentesque posuere arcu nec sagittis? Pellentesque feugiat dignissim risus, id laoreet lectus pulvinar id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In tincidunt mi in erat lobortis egestas. Integer lacus odio, tincidunt quis ullamcorper non, adipiscing aliquam nibh. Sed bibendum turpis aliquet purus dignissim fringilla.

Para usarlo en distintas etiquetas de la misma página, debemos indicar al script, el ID o la clase de los botones que es lo que hacemos con estas opciones:

btnMinusClasseId es el ID o clase del botón decrementar
btnDeafultClasseId es el ID o clase del botón incrementar
btnPlusClasseId es el ID o clase del botón restaurar