Cambiando el tamaño de las fuentes

Este script que puede encontrarse en White Hat puede ser un complemento al truco que muestra Gem@ y que nos da la posibilidad de  cambiar el color del blog con un solo click, utilizando hojas de estilos diferentes, una técnica similar a la que se emplea en Blogger con ancho variable.

Lo que este nos permite es aumentar o disminuir el tamaño de las fuentes de los textos del blog lo que puede ser de utilidad para lectores con problemas visuales si es que utilizamos fuentes pequeñas.

Hasta aquí suena interesante pero tiene algunas limitaciones, por ejemplo, cambia las fuentes de los textos siempre que estén incluidos dentro de la etiqueta P pero, si usamos DIVs, deberemos modificar el código:

getElementsByTagName('p');

por:

getElementsByTagName('div');

La segunda limitación importante es que las fuentes deben estar definidas en pixeles (px) y no como unidades ralativas (em) aunque esto también puede modificarse.

Para usarlo, lo incluimos antes de script en la plantilla, antes de </head> y luego, agregamos dos simples enlaces:

<a href="javascript:decreaseFontSize();">-</a>
<a href="javascript:increaseFontSize();">+</a>

<script v type="text/javascript">
var min=8;
var max=18;

function increaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i&lt;p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=max) {
s += 1;
}
p[i].style.fontSize = s+"px"
}
}

function decreaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i&lt;p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=min) {
s -= 1;
}
p[i].style.fontSize = s+"px"
}   
}
</script>

Mucho más flexible es el script que se encuentra en DynamicDrive ya que podemos definir las etiquetas que serán afectas y además, funciona con etiquetas depreciadas cono FONT.

El script lo descargamos de la página y luego lo agregamos a la plantilla, también antes de </head>:

<script type="text/javascript">
var tgs=new Array('div','td');
var szs=new Array('xx-small','x-small','small','medium','large','x-large','xx-large');
var startSz=2;
function ts(trgt,inc) {
if (!document.getElementById) return
var d=document,
cEl=null,sz=startSz,i,j,cTags;
sz += inc;
if (sz &lt; 0) sz=0;
if (sz &gt; 6) sz=6;
startSz=sz;
if ( !(cEl=d.getElementById(trgt))) cEl=d.getElementsByTagName(trgt)[0];
cEl.style.fontSize=szs[sz];
for (i=0 ; i &lt; tgs.length; i++) {
cTags=cEl.getElementsByTagName(tgs[i]);
for (j=0; j &lt; cTags.length ; j++) cTags[j].style.fontSize=szs[sz];
}
}
</script>

o lo subimos y alojamos en un servidor propio:

<script type="text/javascript" src="URL_textsizer.js"></script>

Modificando la primera instrucción del script, podemos agregar o quitar las etiquetas que serán afectadas:

var tgs=new Array('div','td','tr');

var tgs=new Array('div','p','td');

y luego, ponemos los enlaces donde nos guste:

<a href="javascript:ts('body',1)"> AUMENTAR </a>
<a href="javascript:ts('body',-1)"> DISMINUIR </a>

Alli también podemos hacer algunos cambios.

En el ejemplo anterior utilizamos body es decir, le indicamos que cambie TODA la página pero, podríamos indicarle que sólo lo haga con una parte o con un sector específico, indicando el ID correspondiente:

cambiarFuente('nombre',1)