interliniado del texto

alexander_sp · #1 (**permalink**) 30/01/2008, 13:50

Hola, soy un profano en el tema, y necesito que alguien me explique, a ser posible como a un niño, como se puede modificar el interliniado de un texto que esta en una tabla normal y corriente.Gracias a todos

aloqui · #2 (**permalink**) 30/01/2008, 14:16

Puedes hacerlo con la propiedad line-height
Se la asignas al elemento que quieras (celda td, fila tr, elemento div ...) con el valor deseado.

Ejemplo:

Código:

<html>
<body>
  <table border="1" style="width:100px; ">
    <tr style="vertical-align:top;">
      <td style="line-height:20pt;">
      Prueba de interlineado de un texto cualquiera. Esta celda lleva un interlineado de 20pt
      </td>
      <td style="line-height:32pt;">
      Prueba de interlineado de un texto cualquiera. Esta celda lleva un interlineado de 32pt
      </td>
    </tr>
  </table>
</body>
</html>

Normalmente las propiedades de definen con CSS, pero lo he puesto en el HTML para que lo entiendas mas facilmente.

Raulmmmm · #3 (**permalink**) 30/01/2008, 14:18

¿Manejas código? Muéstranos un poco y explica mejor (es que no me entero bien a veces

)
¿Quieres aumentar o disminuir el espacio entre líneas de un texto? ¿O es otra cosa?

alexander_sp · #4 (**permalink**) 30/01/2008, 16:24

Hola, el codigo es el siguiente:

<td width="850" height="340" valign="top" bgcolor="#FFFFFF"> 
Os damos la bienvenida a Solintelia.com 
pagina web en construcción
disculpad las molestias, en breve estaremos operativos
<img src="S.jpg" width="274" height="214" />
</td>

Supongo que tengo que poner esto:
<td style="line-height:20pt;">

pero no sé donde?

saludos

feral · #5 (**permalink**) 30/01/2008, 18:11

Para los valores de interlineado mejor que se usen medidas relativas em o pixeles, "pt" es una medida absoluta solo recomendada para hojas de estilo utilizadas para la impresion en papel.

<td width="850" height="340" valign="top" bgcolor="#FFFFFF" style="line-height: 1.5em;"></td>

De todas formas usar estilos en linea no tiene mucho sentido ya que muchas de las ventajas de usar estilos quedan suprimidas.
Te recompendaria usar una hoja de estilos externa y eliminar todo el codigo de presentacion

<td>
 
Os damos la bienvenida a Solintelia.com 
pagina web en construcción 
 disculpad las molestias, en breve estaremos operativos 
<img src="S.jpg" alt="texto alternativo" />
</td>

td { line-height: 1.5em; ... }
.estilo3{...}
.estilo2{...}
.estilo4 {...}
img {...}

alexander_sp · #6 (**permalink**) 01/02/2008, 03:17

hola, agradezco la explicacion, pero eso de utilizar hoja externa es muy dificil para mi, yo lo unico que quiero es modificar el interlineado del texto de una tabla, lo he intentado pero no hay manera....
alguien sabe una forma sencilla de hacerlo, os adjunto el codigo de la tabla:

<body>
<table width="850" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr align="center" valign="top" bordercolor="0">
<td width="850" height="340"><table width="850" border="0">
<tr>
<td width="850" height="340" valign="top" bgcolor="#FFFFFF" > 
Os damos la bienvenida a Solintelia.com 
pagina web en construcción
disculpad las molestias, en breve estaremos operativos
 
</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

GRACIAS

feral · #7 (**permalink**) 01/02/2008, 04:41

Ya te hemos puesto un par de veces como se hace de la manera que quieres, se añade el atributo style a la etiqueta donde quieras aplicarlo y se añade la propiedad line-height. Luego añades el valor adecuado.

<td class=".." align=".." style="line-height: 20px" >...</td>

Lo que no entiendo es porque tienes clases aplicadas a etiquetas y por otra parte quieres poner los estilos todos en linea.
Si el resultado final que quieres son simplemente tres frases centradas con cierto interlineado, ese codigo es una barbaridad.

vega22 · #8 (**permalink**) 01/02/2008, 06:03

Cita:

Iniciado por feral

Para los valores de interlineado mejor que se usen medidas relativas em o pixeles, "pt" es una medida absoluta solo recomendada para hojas de estilo utilizadas para la impresion en papel.

Muy bien apuntado...Se ha extendido mucho el uso de "pt" por el tema de que los IE y el resto de navegadores reescalan mejor los textos, y es así un modo de generar accesibilidad en la web muy fácil. Pero lo suyo es trabajar con porcentajes y ems, bastante más complicado pero más efectivo y elegante también. Por otro lado, el pixel, estrictamente hablando, no es una medida relativa, aunque en muchos lugares la veo denominar así. Es absoluta y sólo se hace relativa porque un pixel tiene un tamaño que varía según el monitor, sencillamente. Digamos que es absoluta en sí misma, pero relativa físicamente. Los ems son relativos en sí mismos y también con respecto al monitor. Los pt deberían ser absolutos en todo sentido, pero a la hora de la verdad también son relativos a la pantalla.

Una pregunta sobre el alto de línea ¿cómo lo configuráis? ¿en píxeles o en ems? Si declaramos en el body un alto de línea en ems, al heredarse va cambiando su valor según el tamaño de letra que tengan los bloques que se van anidando, y queda horrendo a mi gusto. Sin embargo, por ahí hay muchas recomendaciones de hacerlo así...Con píxeles la medida "absoluta" se mantiene.

feral · #9 (**permalink**) 01/02/2008, 06:56

Cita:

Iniciado por vega22

Una pregunta sobre el alto de línea ¿cómo lo configuráis? ¿en píxeles o en ems? Si declaramos en el body un alto de línea en ems, al heredarse va cambiando su valor según el tamaño de letra que tengan los bloques que se van anidando, y queda horrendo a mi gusto. Sin embargo, por ahí hay muchas recomendaciones de hacerlo así...Con píxeles la medida "absoluta" se mantiene.

Supongamos que al body le damos 1em de interlineado y su tamaño de texto es 1 em tambien, por lo tanto la mayoria de navegadores usara 16px de tamaño que es el que tienen por defecto (mediano).

Mas tarde queremos poner un parrafo grande con tamaño de texto 2em (ese parrafo hereda 16px de font-size, por lo tanto 2em equivaldria a 32px), para que el interlineado no se vaya de parranda hay que ajustarlo a esa nueva medida; si queremos un interlineado de 16px por ejemplo, tendriamos que ajustar el interlineado de ese parrafo a 0.5em, ya que 1 em equivale al tamaño de letra, en este caso 32px por lo tanto 0.5em seria la mitad 16px.

La ley de oro para usar los em es;

Solamente el font -size se calcula con respecto a su padre, todas las otras propiedades (margin, padding, line-height...) se calculan con respecto al font-size de ese elemento.

vega22 · #10 (**permalink**) 01/02/2008, 07:09

Sí, esa es la manera más precisa y controlada de hacerlo. Si cada vez que cambias el font-size también aplicas el cambio a todos los demás elementos adyacentes, como el line-height. Pero en la práctica, eso supone meter mucho código, cuando en realidad si no especificas el line-height nunca este se mantiene proporcionado y equilibrado a lo largo de todas las font-sizes. Luego, si el navegador reescala el texto, que es para lo que hacemos todo esto, también reescala por sí solo proporcionalmente el line-height, y se ve como se tiene que ver. Con los margins y paddings la cosa no es así, pero a mi personalmente me importa bastante poco reescalar esos valores. Los doy en píxeles y ya está.
Es decir, obtenemos un buen resultado si declaramos ajustado el alto de línea cada vez que damos una nueva font-size, pero obtenemos también prácticamente lo mismo si no lo declaramos nunca, y ahorramos código.
¿Qué opinas?

alexander_sp · #11 (**permalink**) 01/02/2008, 14:46

ok...gracias

feral · #12 (**permalink**) 04/02/2008, 06:11

Cita:

Iniciado por vega22

Sí, esa es la manera más precisa y controlada de hacerlo. Si cada vez que cambias el font-size también aplicas el cambio a todos los demás elementos adyacentes, como el line-height. Pero en la práctica, eso supone meter mucho código, cuando en realidad si no especificas el line-height nunca este se mantiene proporcionado y equilibrado a lo largo de todas las font-sizes. Luego, si el navegador reescala el texto, que es para lo que hacemos todo esto, también reescala por sí solo proporcionalmente el line-height, y se ve como se tiene que ver. Con los margins y paddings la cosa no es así, pero a mi personalmente me importa bastante poco reescalar esos valores. Los doy en píxeles y ya está.
Es decir, obtenemos un buen resultado si declaramos ajustado el alto de línea cada vez que damos una nueva font-size, pero obtenemos también prácticamente lo mismo si no lo declaramos nunca, y ahorramos código.
¿Qué opinas?

Si no se declara nunca el line height, se estara usando el line height especificado por la hoja de estilo del navegador, lo cual significa que estas trabajando con un arma menos a la hora de diseñar y perdiendo flexibilidad.
Para sacar lo maximo de usar medidas em, todas las medidas de tu hoja de estilos tienen que ser em o porcentajes, aunque esto tiene tambien sus partes negativas ya que elementos que intrinsecamente tienen una medida no modificable; imagenes, flash etc.. pueden afear o descolocar el diseño si el usuario realiza cambios de tamaño de letra radicales.
Por otra parte las hojas de estilo no pesan mucho, ni aunque sean muy extensas y completas, ademas se pueden optimizar bastante con todas las posbilidades que hay y conociendo bien como funciona la herencia. Hay que tener en cuenta que una hoja de estilo externa se descarga una vez y ya esta, no habra nuevas descargas ya que queda en el cache asi que esa carga unica te sirve para visualizar todas y cada una de las paginas que esten enlazadas con esa hoja de estilo.
Para paginas sencillas lo mejor es usar em para todo, si es una pagina recargada o con unos cuantos graficos o elementos situados en posiciones estrategicas em para letras, margenes , padding.. y px para calibrar medidas de divs, aunque tambien se podria hacer todo con em, yo en principio hago todo con em, si veo que con diferentes tamaños de letra algo no queda como deberia de quedar paso a px.
Las letras como minimo que esten en em es fundamental, ya que explorer no puede siquiera aumentar o reducir su tamaño si estan declaradas en pixeles, y el tamaño de las letras es actualmente uno de los pilares de la accesibilidad, y segun pasen los años mas lo sera aun, ya que las generaciones que han conocido la web, en general de edad joven o media se iran haciendo viejos con la perdida de agudeza visual que esto trae.

vega22 · #13 (**permalink**) 04/02/2008, 07:52

Sí, fue una pregunta mía retórica, o tonta, directamente...Si queda bien en tu diseño el line-height asignado por el navegador, ahórrate declararlo. Pero si te apetece otra cosa, pues tienes que ir declarándolo en cada hijo adecuadamente. Yo para las letras uso declaración en el body de píxeles para los no IE y con un condicional a estos les meto la declaracion en body en porcentaje, y luego voy declarando ems para todos, IE y resto, en los hijos que van saliendo en el diseño. Es la mejor técnica, mientras desaparecen del mercado los viejos IE. Por cierto, y siendo políticamente incorrecto, lo cual es a veces muy necesario, el estándar IE de ampliación de textos me parece mucho más sensato que el que usa por ejemplo FF. Es una arrogancia del navegador reescalar todo lo que le de la gana, sin tener en cuenta la sentencia del diseñador. Si yo doy tamaños en ems y porcentajes, reescala. Pero si te digo píxeles, no me toques ni uno. Tal y como tengo los estilos ahora mismo, el IE hace un trabajo excelente con los textos y el FF me estropea el diseño en algunos puntos (mínimos, claro) cuando aumenta mucho. Claro que diseñando esos puntos de otra manera no habría problema. Pero a estar pendiente del navegador y menos de la creatividad ya nos obliga el IE con el css. Si los demás también...

vega22 · #14 (**permalink**) 04/02/2008, 07:59

Hay que procurar por supuesto tener todo lo común en las hojas de estilo, así se carga una vez y vale para mucho. Pero cuando tienes varias plantillas diferentes en la misma web, y páginas con estilos diferentes dentro de cada plantilla, no te puedes ahorrar necesitar 10 o 12 hojas de estilo y además, declarar estilos en el cuerpo individual de algunas páginas, que sólo valen para esa en particular y otra no. Es un jaleo esto. Tienes que tener en cuenta si ahorras algo al tener ciertos estilos declarados en una hoja aparte o pierdes precisamente por tener el navegador que hacer dos llamadas al servidor en lugar de una para cargar página y hoja de estilos. Cada cual tendrá que sopesar esto, pero tan sencillo como plantearse una hoja de estilos para toda la web y ya está no es. Yo procuro que cada hoja lleve los estilos que necesita una clase de diseño, ni uno más. Podría tener una hoja enorme común para todos, que tardara un rato en cargarse pero luego ya está ahí para toda la web. Prefiero varias, que tarden menos, aunque navegando por mi web haya que ir cargando otras hojas después.

(Esto debía ser un edit pero lo colé como respuesta aparte. Perdón)