domingo, 3 de junio de 2012

Como ajustar texto dinámico en div

Programando en javascript me he visto en la obligación de ajustar un texto que se generaba dinámicamente dentro de un div de tamaño fijo. El problema de hacer esto es que si generas el texto directamente dentro del div (una vez que el javascript de la página ha cargado) éste puede llegar a sobresalir o ser mucho más pequeño que el div según la propiedad font-size de css que le demos al texto, ya que el texto se ha cargado después de cargar el div contendor.

Mi solución es llamar a una función en javascript cuando se cargue el texto dinámico donde, al introducir el texto y el tamaño del div, la propiedad font-size dependa del tamaño de dicho div.

Para ello se crea una capa, la cual no ha de ser visible al usuario, con propiedades absolute, top: -500px; left:-500px; la razón por la cual se crea con esas propiedades es porque, como he dicho antes, no puede ser visible pero sí que debe estar visible para el documento ya que habrá que leer sus propiedades, si en vez de hacerlo así creáramos una capa en display: none; no se podría leer su tamaño debido a que está oculta.
Nótese que se trabaja con jquery el cual habrá que incluir en la página.

En el código se entiende mejor:


function sizetext (texto,w,h) {
//la capa #pretext la hacemos visible
$("#pretext").css("display", "block");
//le damos el ancho que queramos que ocupe el texto
$("#pretext").css("width", w);
//generamos nuestro texto dentro de la capa
$("#pretext").html(texto);
//hacemos un for desde tamaño de letra 30 ya que, en mi caso
//el div no será tan grande y el texto tan pequeño para
//tener una letra más grande que 30px
for (i=30;i>0;i--) {
//añadimos en la propiedad font-size el tamaño de la variable "i"
$("#pretext").css("font-size", i);
//sacamos ancho y alto del nuevo div generado
pw = $("#pretext").width();
ph = $("#pretext").height();
//como en la quinta línea ya le dimos el ancho al cual
//se tendría que ajustar, solo queda comprobar el alto
if (ph <= h) {
//yo hago un alert pero bien podría ser un return i;
//para devolver el tamaño de la letra
    alert(i);
//salimos del bucle for
    break;
}
}
//para evitar posibles errores en css ocultamos la capa
//ya que solo nos sirve para determinar el tamaño
$("#pretext").css("display", "none");
}
//llamamos a la función...
sizetext(texto, tamaño_div_ancho, tamaño_div_alto);

Ahora solo queda incluir dentro del body el div:

<div id="pretext" style="position:absolute; z-index:0; top: -500px; height: -500px; display: none;"></div>


Cualquier duda o sugerencia será bien recibida en los comentarios.

1 comentario: