Flexibilizando El Tamaño De Letra
Ricardo Aroca | 04 de noviembre de 2005 | 
26 comentarios
Brindar textos en un tamaño adecuado a las capacidades visuales del usuario es una principio básico de usabilidad. En este artículo se muestra como modificar el tamaño del texto en zonas específicas de una página a través de controles ubicados en la misma página.
La técnica consiste en fijar tamaños de texto que sean relativos a un elemento base y luego con JavaScript cambiar el tamaño de letra del elemento base.
Fijando tamaño de letra base
A través de una hoja de estilos especificamos el tamaño de texto por defecto al elemento body.
body{
font-size:12px;
}
Debido a la característica de herencia de los selectores CSS , todos los elementos internos al body tomarán como base éste tamaño de texto.
Ahora, se deben especificar tamaños de texto al resto de los elementos. Estos tamaños deben ser especificados en porcentaje o em, dado que necesitamos que los tamaños sean relativos.
p { font-size:100%; }
h1 { font-size:160%; }
h2 { font-size:140%; }
Preparando nuestra página
Para que nuestro script sólo cambie el tamaño de texto en una zona específica de la página (por ejemplo el cuerpo de una noticia), debemos identificar un elemento contenedor al texto que queremos cambiar. Para este ejemplo estableceremos el id de un div de la siguiente manera.
texto que queremos cambiar de tamaño
Además debemos establecer los controles que permitirán cambiar el tamaño del texto. En nuestro ejemplo crearemos 3 links para las acciones de Aumentar, Disminuir y Reestablecer tamaño del texto.
<a href="#" onClick="zoomText('aumentar','Contenido')">Aumentar</a><br />
<a href="#" onClick="zoomText('disminuir','Contenido')">Disminuir</a><br />
<a href="#" onClick="zoomText('reestablecer','Contenido')">Reestablecer</a>
En el código se llama a la función ZoomText cada vez que se hace clic en alguno de los links, para que esta función realice el cambio en el tamaño de las letras.
La función ZoomText
La Función ZoomText recibe 2 parámetros:
- Acción: indica la acción a realizar y puede tomar los valores aumentar, disminuir y reestablecer.
- Elemento: el nombre del identificador del elemento contenedor del texto a ser modificado.
El código de esta función es el siguiente.
ACTUALIZACIÓN: Se ha agregado código para limitar el tamaño máximo y mínimo de letra.
function zoomText(Accion,Elemento){
//inicializacion de variables y parámetros
var obj=document.getElementById(Elemento);
var max = 200 //tamaño máximo del fontSize
var min = 70 //tamaño mínimo del fontSize
if (obj.style.fontSize==""){
obj.style.fontSize="100%";
}
actual=parseInt(obj.style.fontSize); //valor actual del tamaño del texto
incremento=10;// el valor del incremento o decremento en el tamaño
//accion sobre el texto
if( Accion=="reestablecer" ){
obj.style.fontSize="100%"
}
if( Accion=="aumentar" && ((actual+incremento) <= max )){
valor=actual+incremento;
obj.style.fontSize=valor+"%"
}
if( Accion=="disminuir" && ((actual+incremento) >= min )){
valor=actual-incremento;
obj.style.fontSize=valor+"%"
}
}
Lo que hace el script es obtener el tamaño actual del texto en el elemento contenedor del texto. Luego dependiendo de la acción tomada cambia el valor de la propiedad fontSize de este elemento. Al cambiar el tamaño de texto en el elemento contenedor, automáticamente cambia el tamaño en los elementos internos, debido a que su tamaño ha sido especificado en forma relativa.
Para ver esta técnica en funcionamiento, sólo debes usar las opciones provistas para ello en el menú derecho de esta misma página.
Comentarios
Me gustaria saber como crear la opcion de version imprimible, existe algun codigo en php que pueda "filtrar solo contenido en HTML, no imagenes, banners, etc??? Gracias por su respuesta
Ojo, que hay un error de paréntesis en: ...a href="#" onClick="ZoomText('reestablecer'),'Contenido'"... debe ser: ...a href="#" onClick="ZoomText('reestablecer','Contenido')"...
toda la razon estimado. Problema resuelto.
Otra cosilla, el nombre de la función zoomText en la llamada y la declaración varía en una letra, la \"z\" en minúscula en la declaración y mayúzcula en la llamada. Y no funciona por eso, una tontería pero ahí queda.
estimados amigos quisiera saber si alguien me puede mandar un ejemplo concreto por que no he podido hacer andar el codigo.. graicas
ups ... error de tipografía ... gracias por el aviso.
quisiera saber si me pueden mandar un ejemplo ya que he porbado de distintas formas y no me anda
Gracias
Exequiel, te envié un email. Puedes ocupar el código fuente de este sitio.
Ocupa el mismo sistema que se describe en el ejemplo.
Hola, me llamo Hilda de argentina intento aplicar la funcion en este sencillo ejemplo, no funciona, donde esta el error, gracias
<html>
<head>
<title>Documento sin título</title>
<link href="Estilo_prueba_Tamaño.css" rel="stylesheet" type="text/css">
<script language="javascript">
function zoomText(tipo){
//inicializaciones
obj=document.getElementById("Lectura");
if (obj.style.fontSize==""){
obj.style.fontSize="100%";
}
actual=parseInt(obj.style.fontSize);
incremento=10;
//operacion
if(tipo=="normal"){
obj.style.fontSize="100%"
}
if(tipo=="aumentar"){
valor=actual+incremento;
obj.style.fontSize=valor+"%"
}
if(tipo=="disminuir"){
valor=actual-incremento;
obj.style.fontSize=valor+"%"
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<input type="button" class="boton_IrA" onclick="zoomText('aumentar')">
<input type="button" class="boton_IrD" onclick="zoomText('disminuir')">
<input type="button" class="boton_IrD" onclick="zoomText('reestablecer')">
</td>
</tr>
<tr>
<DIV id="Lectura"> <p>Probaremos la funcion tamaño</p> </DIV>
</tr>
</table>
</body>
</html>
Hola,
me gustaría saber alguna manera para mantener el tamaño de la letra de la página principal a las subpáginas del sitio web. Ya que en la principal me funciona pero en cuanto paso a otra página pierdo el tamaño de la letra..
Gracias.
Yo tengo casi la misma funcion que aparece aca, pero existe un problema, que cuando tienes texto donde se incluyen tablas, esta funcion no hace lo que deberia hacer..., alguien sabe como solucionar este problema??...
Saludos alguien comento acerca de poner en la etiqueta # para hacer qeu aparezca una liga pero no vaya a ningu lado, en otra palabras habilitar un link, bueno eso es un poco erroneo a pesar que funciona ya que no es lo mismo # que javascript:void() que sería lo más correcto a llenar en un link, es decir <a href="#">link</a> esto lo que realmente esta haciendo es devolver o buscar el ancla en la página html y como no exite ningún <a name="#"> o ancla en el documento simplemente no va a ninguna parte, pero ojo algunos exploradores al picarlo te llevan hasta la parte superior del documento lo qeu no ocurre con javascript:void() la cual al regresar nada en la funci[on javascript no manda a ningún lado, saludos es un pequeño comentario
Hola, algien podría mandarme los códigos de una página que ya halla implementado en el ejemplo anterior o el autor podria hacerme ese gran favor. gracias
Yuli, El código es usado en esta misma página.
Nahum, para solucionar eso, hay que agregar
return false;
al final de la función zoomText
Muchas gracias, se que el código está en esta misma página pero lo que preguntaba es que si alguien lo tenía mas concreto. de todas formas muchisimas gracias por su respuesta.
me funciono de las mil maravillas el codigo.. solo una duda ahi alguna manera de ponerle limite al ampliar y reducir la tipografia.. es decir unos 3 clic y que salga un mensaje como "no puedes agrandar mas la letra" gracias
Osvaldo. Acabo de publicar el código necesario para limitar el tamaño máximo y mínimo de letra.
Holap me sirvió mucho tu código tenía solo un error en la siguiente linea, para que lo cambies.
Dice: INCREMEMENTO en ves de INCREMENTO
if( Accion=="aumentar" && ((actual+incrememento)
Gracias Kurai, por la acotación. Acabo de corregir el error.
Hola,
Hay alguna manera de mantener el tamaño de la letra de la página principal a las páginas interiores de la web. En la principal funciona correctamente pero en cuando pasamos a otra página se pierde el tamaño de la letra.
Muchas gracias
Joan, para mantener la configuración del usuario tienes que usar una cookie.
HILDA : Sólo debes cambiar la palabra "reestablecer" por "normal" o viceversa y LISTO. Y adicionar a Aumentar lo mismo en los otros osea Disminuir.
lo que m pasa es que en el msn
la letra mia me qda en 16 pero las de los otros se ve en 8 y no se como cambiarla me ayudan??
mandame un mail
porfazz
Excelente código, busque y prové varios, la ventaja de este es que al trabajar con hojas de estilo funciona en casi todos los navegadores, gracias. Lo usaré en mi sitio. Hilda no se pero me parece que el error está en que el script necesita un objeto, probá esto:
Una pregunta!! la funcion puede ocacionar conflico con los estilos??
e probado la funcion en un HTML vacio y funciona perfectamente... pero lo introdusco dentro de la web y no funciona... alomejor ace conflico con los estilos no? o que podria ser??
Comentar
Los campos con asterisco * son obligatorios.
