Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Nuevo CSS3

Nuevas tendencias en el estilo y diseño de páginas con CSS3.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 47

Visitas el mes pasado: 68

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual de CSS 3 : desarrollo web
Desarrollo Web
CSS avanzado: Libros Web.
Javier Eguíluz Pérez
Lista de nuevas propiedades CSS3
www.css3.info
Documentación CSS
mozilla: centro de documentación.
CSS Backgrounds and Borders Module Level 3
W3C Candidate Recommendation 15 February 2011
CSS Text Level 3
W3C Working Draft 1 September 2011
CSS Multi-column Layout Module
W3C Candidate Recommendation 12 April 2011
Flexible Box Layout Module
W3C Working Draft, 23 July 2009
CSS Reference
W3Schools Home
Filtros en Internet Explorer
Visual Filters and Transitions Reference. Microsoft.com
Usando CSS para poner guiones
Roberto Baca: /dd>

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




CSS3 (IX)

Textos

imagen css3

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 nom&shy;bre no quiero acordarme, 
no ha mucho tiempo que vivía un hidalgo de los de lanza en astille&shy;ro, 
adarga antigua, rocín flaco y galgo corre&shy;dor. Una olla de algo más vaca 
que carnero, salpicón las más noches, duelos y quebrantos los sábados, 
lantejas los viernes, algún palo&shy;mino 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 nom­bre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astille­ro, adarga antigua, rocín flaco y galgo corre­dor. Una olla de algo más vaca que carnero, sal­picón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palo­mino 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 (agosto 2014) los navegadores que reconocen este valor son Firefox, Safari y Internet Explorer 10. Esto lo hacen sólo de forma experimental, de manera que debemos poner el prefijo -webkit- para Safari; -moz- para Firefox; y -ms- para I.E 10 delante de la propiedad:

-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto;

Este código hace que en Safari, Firefox, y I.E. 10, 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. Según el navegador con que abras la página verás que el primer texto tiene o no tiene guiones.

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 de CSS3

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com