« anterior | siguiente »

Home > 2006 > Abril > Martes, 25 de Abril 2006 > Cambiar el tamaño de letra dinámicamente
Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Publicidad

Mar25Abr2006

Cambiar el tamaño de letra dinámicamente

16:14 H (CET)| Temas: Accesibilidad · CSS · Javascript · Tipografía

font-size de Elmundo.es

Leyendo esta entrada sobre el uso de botones para cambiar el tipo de letra de forma dinámica, se nos ha ocurrido contar cómo poder hacerlo.

Se puede hacer de varias formas: incrementando o decrementando el tamaño de letra según se pulse en los botones de aumentar o reducir el tipo de letra, o de forma fija, aumentando el tamaño de la letra y disminuyéndolo, pero solo a unos tamaños prefijados.

Para hacerlo de forma incremental, debemos crearnos un elemento HTML con un id, para poder acceder a él y cambiarle los estilos directamente.

<p class="texto" id="contenido">...</p>

En el estilo creado deberemos indicar el tamaño de la letra usando porcentaje o medidas de tamaño de fuente (em), sobre todo por comodidad, en este caso usaremos porcentaje.

p.texto {
  font-size: 100%;
}

El código necesario para modificar el estilo sería algo así:

function tamano(mas) {
  var signo = (mas)? 1 : -1; // Para sumar o restar el porcentaje
  // Obtenemos el objeto que contiene el texto
  var obj=document.getElementById("contenido");
  // Obtenemos el tamaño de letra y lo modificamos
  var fontsize = obj.style.fontSize;
  fontsize = parseInt(fontsize.replace(/%/g, ''));
  fontsize += signo*10;
  if (fontsize > 0 && fontsize < 0) {
    obj.style.fontSize = fontsize+"%";
  }
}

La otra forma de cambiar el tamaño de letra es teniendo tres hojas de estilo, una para cada tipo de letra (normal, pequeña y grande), y usar una de las distintas hojas de estilos según se desee. Esta solución es la mejor para cuando tenemos distintos tipos de letra y tamaños en toda la página web.

El método que vamos a usar es el que se explica aquí, y el cual vamos a explicar. Como ya hemos dicho tenemos tres hojas de estilos:

<link rel="stylesheet" title="normal" href="normal.css" type="text/css" />
<link rel="alternate stylesheet" title="pequena" href="pequena.css" type="text/css" />
<link rel="alternate stylesheet" title="grande" href="grande.css" type="text/css" />

También necesitaremos una función javascript que habilite la seleccionada y deshabilite la actual.

function activarCSS(title) {
  // Obtengo los elementos link
  var links = document.getElementsByTagName("link");
  // Los recorro todos y el que tenga 
  // el title que queremos lo activamos
  // el resto los desactivamos
  for (var i=0; i<links.length; i++) {
    if (links[i].getAttribute("title") == title) {
      links[i].disabled = false;
    } else {
      links[i].disabled = true;
    }
  }
}

Por último nos tendremos que crear tres botones para modificar el tamaño de la letra, usando la función activarCSS, con parámetros "normal", "pequena", "grande".

Más información

Relacionados

Feedback (9) » Formulario

1. Luciano A. Ferrer ~ Miércoles, 26 Abr 2006 | 01:12H:

Y tu cuál prefieres?
EL código de la 1er opción es compatible con los navegadores más usados?
(IE, Firefox, Safari, Opera)

dudas existenciales... :)

2. Kedume ~ Miércoles, 26 Abr 2006 | 07:28H:

Yo utilizo una mezcla de los dos. Utilizo básicamente el primero, pero el acceso a los elementos no lo hago por "id" sino por tipo de elemento. Así, le digo que cambie el tamaño de los elemento que se encuentran dentro de los tags más comunes p, span, a, etc, sin necesidad de definir ids.

Otro tema importante es como volver (con el primer método) a los valores por defecto, algo muy útil si usamos diferentes tamaños (a mí me pasó). La solución es muy tonta, se trata de no asignarle nada al font-size, haciendo algo así como

obj.style.fontSize = "";

Con ese valor ("") retoma los de la hoja de estilo inicial.

Aprovecho para felicitaros por el blog.

3. Luis ~ Miércoles, 26 Abr 2006 | 08:48H:

Hola Luciano, yo soy más partidario de la segunda opción, no por nada en especial, sino porque yo tampoco le daría la opción al usuario de cambie mil veces de tamaño, si ves la letra normal pequeña pues se la muestras grande, y al revés.

Además que a veces en sitios como algún periódico, solo te modifican el tamaño de la letra del artículo, y si no lees bien las cosas, tampoco leerás los menús, por ejemplo.

Es cierto lo que dice Kedume, es importante poner una opción para volver directamente al estado normal, se me olvidó, ¡ops!. Y la solución que él ofrece no puede ser más sencilla.

Saludos a ambos

4. Ángel ~ Viernes, 29 Sep 2006 | 17:50H:

Lo siento, soy muy torpe. He implementado el ejemplo, el de las tres hojas de estilo, en una página de prueba, pero no logro hacerlo funcionar. Evidentemente el problema está en que debo crear tres imágenes, supongo que valdrán tres palabras (mayor, menor,...) y hacer un vínculo que llame al código javascript que a su vez llame a la hoja de estilo adecuada, pero como no tengo ni idea de js, pues agradecería que alguien me echase una manita. De paso si alguien explica como se hace lo de imprimir, pues mejor que mejor. Gracias por vuestra atención. Un saludo

5. Luis ~ Viernes, 29 Sep 2006 | 18:37H:

Hola Ángel.

Deberías tener tres enlaces de este estilo:
<a href="#" onclick="activarCSS('normal')">normal</a>
<a href="#" onclick="activarCSS('pequena')">pequeña</a>
<a href="#" onclick="activarCSS('grande')">grande</a>

Los tres estilos debería estar incluidos (en la explicación es lo que viene dentro de las etiquetas link)

El código javascript de la función activarCSS debería estar dentro de sus correspondientes etiquetas
<script type="text/javascript"/>
...
</script>

Y para imprimir deberías tener un enlace del siguiente estilo:
<a href="#" onclick="window.print()">imprimir</a>

Espero que te sirva.

Saludos

6. Araceli ~ Lunes, 04 Dic 2006 | 10:49H:

Hola,
yo utilizo el método de ir incrementando y decrementando el tamaño de la letra y me gustaría saber alguna manera para mantener el tamaño 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.

7. Luis ~ Lunes, 04 Dic 2006 | 11:50H:

Hola Araceli.

Una solución que se me ocurre es usar cookies para poder saber en cada página cual es el tamaño de letra que teníamos en la página anterior.

Saludos

8. Martha ~ Miércoles, 30 May 2007 | 19:37H:

No me puede salir la primera opción , alguien me puede decir paso a pasos donde debo pegar cada parte del codigo, en donde llamo al procedimiento del tamaño y que parametro le mando.

Gracias

9. Diego ~ Jueves, 01 May 2008 | 22:11H:

Hacer 3 paginas de css es muy engorrroso, es mas facil hacerlo sólo con javascript. En la siguiente página aparece un ejemplo interesante:
http://www.white-hat-web-design.co.uk/articles/js-fontsize.php

Conversación

Nombre:

Email:

(no aparecerá)

URL:

(opcional)
¿Recordar datos?

↓ Comentarios (XHTML permitido)