Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

CSS3 IX

Textos

Novedades en textos CSS3

Si estás siguiendo este manual ya habras visto en páginas anteriores algunas nuevas propiedades de CSS3 para el tratamiento de textos. Vimos cómo poner sombra a un texto en la página 3.6 Sombras; y también hemos visto cómo poner el texto en columnas: 3.8 Múltiples columnas. Además de estas propiedades, CSS3 incorpora otras nuevas y modifica algunas ya existentes.

La mayoría de estas nuevas propiedades no funcionan todavía en todos los navegadores, o funcionan de forma experimental. No obstante los diseñadores deberán conocerlas pues en un futuro serán compatibles con todos los navegadores.

Palabras demasiado largas

Los navegadores colocan el texto en líneas, cortando para empezar la siguiente línea al final de una palabra, es decir aprovechando los espacios en blanco entre palabras. pero ¿Qué pasa cuando una palabra (o expresión) es demasiado larga y no cabe en la línea? La solución normal de los navegadores es o mostrar la palabra por fuera de la caja, o ensanchar el contenedor para que ésta quepa.

Cualquiera de estas soluciones nos distorsiona el diseño inicial de la página. Para que esto no ocurra en CSS3 hay disponible una nueva propiedad: word-wrap; sus posibles valores son las palabras clave normal, que deja el texto tal y como está o break-word, que parte la palabra para continuarla en la siguiente línea: Como ejemplo veamos una caja (id="caja1) que lleva el siguiente código CSS:

#caja1 { width: 10em; border: 1px solid black;
         word-wrap: normal; }

En la página al aplicarlo a una palabra demasiado larga lo veremos así:


abcdefghijklmnñopqrstuvwxyzABCDEFGJHIJKLMNÑOPQRSTUVWXYZ.

Sin embargo si cambiamos el valor de word-wrap por:

word-wrap: break-word;

Lo veremos así:


abcdefghijklmnñopqrstuvwxyzABCDEFGJHIJKLMNÑOPQRSTUVWXYZ.

La propiedad word-wrap funciona en todos los navegadores, incluido también Internet Explorer, ya que en principio fue una propiedad de Internet Explorer que luego ha adoptado el estándar de la W3C.

Guiones

La propiedad anterior divide el texto sólo cuando es excesivamente largo y no cabe en la línea, pero no pone guiones, y el punto de división se produce al azar. Sin embargo dividir las palabras con guiones al final de la línea, es algo más complicado, ya que el navegador debe reconocer el idioma y además tener instalado un diccionario que le indique por qué puntos se pueden partir las palabras.

La propiedad hyphens.

Podemos dividir las palabras a final de línea con guiones mediante la propiedad hyphens, la cual tiene los siguientes valores:

hyphens: none | manual | auto

Para la división manual, en el texto en HTML debemos poner el caracter especial &syh; donde queremos que se produzca la ruptura, por ejemplo si a final de linea tenemos la palabra extraordinario, y queremos que se parta con guión, escribiremos: extra&syh;ordinario. La palabra se partirá con el guión siempre que las líneas queden dentro de unos ciertos márgenes.

Navegadores

La propiedad funciona parcialmente en todos los navegadores incluido Internet Explorer, es decir funciona de forma manual siempre que señalemos mediante el caracter especial &syh; los puntos de ruptura para cada línea: veamos un ejemplo: tenemos el siguiente código HTML en el cual hemos marcado ya los puntos de ruptura para los guiones:

<div id="capa1">
<p>En un lugar de la Mancha, de cuyo nombre no quie&shy;ro acordarme, 
no ha mucho tiempo que vivía un hi&shy;dalgo de los de lanza en astillero, 
adarga antigua, ro&shy;cín flaco y galgo corredor. Una olla de algo más va&shy;ca 
que carnero, salpicón las más noches, duelos y quebrantos los sábados, 
lantejas los viernes, algún palomino de añadidura los domingos, consumían 
las tres partes de su hacienda.</p>
</div>

Ahora le aplicamos el siguiente código CSS:

#capa1 { width: 400px; height: 200px; border: 1px solid black; }
#capa1 p { text-align: justify; padding: 8px 41px; font: normal 16px "times new roman";
           hyphens: manual; }				 

Hemos destacado en distinto color el código necesario para poner los guiones en el texto. Ponemos todas las medidas en píxeles para que se vea igual (o en la misma proporción) en todos los navegadores y en todas las resoluciones de pantalla. El resultado es el siguiente:


En un lugar de la Mancha, de cuyo nombre no quie­ro acordarme, no ha mucho tiempo que vivía un hi­dalgo de los de lanza en astillero, adarga antigua, ro­cín flaco y galgo corredor. Una olla de algo más va­ca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún pa­lomino de añadidura los domingos, consumían las tres partes de su hacienda.

En este código tenemos que marcar los puntos de ruptura mediante &syh;; sin embargo en CSS3 está previsto que si el navegador reconoce el idioma, no haya que marcar los puntos de ruptura si utilizamos el valor hyphens: auto; Hasta ahora (octubre 2011) sólo Safari (en español) reconoce el idioma español, y puede poner los guiones automáticamente. Esto lo hace de forma experimental, de manera que debemos poner el prefijo -webkit- delante de la propiedad:

-webkit-hyphens: auto;

Este código hace que en Safari al final de las líneas de texto las palabras se partan con guíones. Los demás navegadores no tienen de momento esta característica para el idioma español, pero algunos de ellos si lo tienen en inglés de forma experimental (para ello tienes que tener el navegador en su versión en inglés).

En el siguiente enlace se muestra una página en la que aparece el mismo texto dos veces con la propiedad hyphens, la primera con el valor auto y sin marcar los guiones, y la segunda en manual y con los guiones marcados. Si abres la página con Safari verás que el primer texto tiene guiones, cosa que no ocurre con el resto de navegadores:

Textos con guíones

Otras propiedade para guiones:

Hay otras propiedades relacionadas con los guiones, pero todavía no están disponibles en los navegadores, estas son:

La propiedad text-decoration

Esta propiedad, que ya existe en CSS2, sufre unas ligeras variaciones en CSS3, la propiedad se convierte en una propiedad tipo "shorthand" que incluye varias propiedades individuales:

De momento sólo el navegador Firefox ha adoptado estas propiedades de forma experimental, es decir, con el prefijo -moz- delante. En el siguiente enlace puedes ver una página de ejemplo con estas propiedades (solo visibles en Firefox):

Propiedades text-decoration





Hay algunas propiedades más relacionadas con el texto en CSS3, sin embargo ninguna de ellas está incluida en ningún navegador, es por eso que no las hemos incluido aquí.




En la siguiente página veremos cómo poner un tipo de letra sin que ésta dependa de que el usuario la tenga en su ordenador.

Tipos de letras



Manual CSS3

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo