CSS Text Level 3: Novedades 26.4.12
CSS Text Level 3: Novedades
Varias son las novedades que introduce el nuevo documento del W3c relativo al control del texto CSS Text Level 3
, algunas en riesgo de no continuar, relacionadas principalmente con:
- text-transform
- Espacios en blanco
- text-space-collapse
- tab-size
- white-space
- Salto y cortes: línea y palabras
- line-break
- word-break
- Hyphenation: separando sílabas
- Text Wrapping: ajustes del texto
- Text-wrap
- Overflow-wrap
- Alineación y justificación
- text-align-last
- text-justify
- Separaciones
- letter-spacing
- Word-spacing
- Control en extremos de línea:
- text-indent
- hanging-punctuation
- Decoración de textos:
- text-decoration
- text-emphasis
Text-transform
2 son las novedades en esta propiedad:
full-width: Hace que todos los caracteres ocupen su ancho completamente.
full-size-kana: Sólo te afectará si utilizas caracteres Kana.
Control de espacios en blanco: White Space
La propiedad text-space-collapse
Esta propiedad declara si y cómo colapsan los espacios en blanco dentro del elemento. Tiene los siguientes valores:
- collapse
- Este valor cierra las secuencias de espacios en blanco entre caracteres.
- preserve
- Las secuencias de espacios en blanco se respetan, incluso si hay salto de línea.
- preserve-breaks
- Colapsa los espacios en blanco consecutivos, pero fuerza un salto de línea.
La propiedad tab-size
Esta propiedad determina la medida del carácter de tabulación (U +0009) cuando se renderiza. Valores expresados en números enteros (negativos no permitidos) o en unidades de longitud.
La propiedad white-space
Es la forma acortada para declarar "tab-size" y "text-space-collapse". Los valores posibles son: normal | pre | nowrap | pre-wrap | pre-line
La siguiente tabla resume el comportamiento de los distintos valores de "white-space":
| New Lines | Spaces and Tabs | Text Wrapping | |
|---|---|---|---|
| normal | Collapse | Collapse | Wrap |
| pre | Preserve | Preserve | No wrap |
| nowrap | Collapse | Collapse | No wrap |
| pre-wrap | Preserve | Preserve | Wrap |
| pre-line | Preserve | Collapse | Wrap |
Salto y cortes en línea y palabras
line-break
Esta propiedad controla la forma en que se producen los retornos de carro o saltos de línea. Los valores posibles son:
- auto
- Es el agente de usuario el que determina cómo y cuando realizar los saltos de línea.
- loose
- Igual que el anterior, pero utilizando la forma menos restricitiva de las posibles.
- normal
- Utiliza el sistema más común de las reglas de saltos de línea.
- strict
- Aplica el juego de reglas más estrictas para el salto de línea.
CSS distingue entre tres niveles de rigurosidad en las normas de los saltos de línea implícita. El conjunto de normas precisas en vigor para cada nivel depende de la UA y deberá seguir las convenciones del lenguaje. Más info.
La propiedad word-break
Cómo romper palabras entre líneas de ser necesaria su ruptura. Los valores que admite esta propiedad son:
- normal
- Las rompe líneas de acuerdo a las normas habituales
- keep-all
- Las líneas se puede romper entre dos letras dentro de las palabras, excepto cuando se prohibida por la propiedad 'line-break'.
- break-all
- Las líneas se puede romper sólo en los separadores de palabras y otras oportunidades de quiebra explícitas
La propiedad Hyphens: control de sílabas
Esta propiedad controla si se permite la partición de palabras para crear más oportunidades de quiebre dentro de una línea de texto. Los valores tienen los siguientes significados:
- none
- Las palabras no se pueden romper, aunque tengas marcas de ruptura.
- manual
- Las palabras sólo se rompe en los saltos de línea en los que hay caracteres dentro de la palabra que sugieran oportunidades de salto de línea. Los caracteres pueden ser explícitos o condicionales.
- auto
- Las palabras se pueden dividir en los puntos de corte de apropiadas o bien según lo determinado por caracteres de separación de sílabas dentro de la palabra o, como se haya determinado automáticamente mediante un recurso de partición de palabras del idioma correspondiente. Los caracteres condicionales de separación de sílabas dentro de una palabra, si está presente, tienen prioridad sobre los recursos automáticos para determinar los puntos de separación de sílabas.
Las propiedades text-wrap and overflow-wrap
text-wrap
esta propiedad especifica el modo de ajuste de texto. Valores posibles:
- normal
- Las líneas se pueden ajustar en los puntos de quiebra permitidos.
- none
- Las líneas no se deben ajustar. El texto que no cabe en el contenedor del bloque se desborda.
- avoid
- El ajuste de línea se suprime en el elemento: la UA sólo puede ajustarlo en un punto de ruptura dentro del elemento, si no hay otros puntos de interrupción válidos en la línea. Si se rompe el texto, los saltos de línea son tratados como para "normal".
Un ejemplo para una mejor comprensión. Tengamos los siguientes códigos:
<footer>
<venue>27th Internationalization and Unicode Conference</venue>
• <date>April 7, 2005</date> •
<place>Berlin, Germany</place>
</footer>
footer {
text-wrap: avoid;
/*heredado por todos los descendientes */
}
Podría ser mostrado recortando las líneas como:
En pantallas anchas: 27th Internationalization and Unicode Conference •
April 7, 2005 • Berlin, Germany
O en otras más estrechas como:
27th Internationalization and Unicode
Conference • April 7, 2005 •
Berlin, Germany
Pero no así: 27th Internationalization and Unicode Conference • April
7, 2005 • Berlin, Germany
La propiedad overflow-wrap
Esta propiedad especifica si la UA puede romper una palabra para evitar el desbordamiento cuando una cadena demasiado larga para caber dentro de la caja de línea. Sólo tiene efecto cuando "text-wrap" es "normal" o "avoid". Valores posibles:
- normal
- Las líneas se pueden romper sólo en puntos de ruptura permitidos. Sin embargo, las restricciones introducidas por "word-break: keep-all 'puede suavizarse para que coincida con"word-break: normal' si no hay puntos de quiebra aceptables en la línea.
- break-word
- Una "palabra" irrompible se puede romper en un punto arbitrario si no hay puntos de quiebra aceptables en la línea. No se generan guiones de corte.
Alineación y justificación de textos
Para controlar estas características introduce valores nuevos en propiedades existentes y alguna propiedad nueva.
text-align
A los valores existentes | left | right | center | justify | se suman | match-parent | start end | y la posibilidad de hacerlo con los valores anteriores pero centrado en un carácter de texto: ‘
match-parent: Se comporta como "inherit", excepto que la herencia para los valores "star" o "end" se calculan contrarios al valor de la propiedad "direction" de su padre.
start end: "star" indica la alineación de la primera línea y de cualquiera otra tras un salto de línea forzado. "end" la del resto de líneas.
Alinear por cadena de texto: La "cadena" debe ser un solo carácter, en caso contrario la declaración se anula. Se utiliza en conjunto con cualquier otro valor de los anteriores.
Mejor con un ejemplo: tomemos una serie de datos numéricos con decimales variables presentados en una tabla. Declaramos la alineación en torno al punto decimal (. en notación inglesa) y centrada así para obtener la disposición de la derecha:
TD { text-align: "." center }
+---------------------+ | Long distance calls | +---------------------+ | $11.30 | | $22.50 | | $0.80 | | $200567.01 | | $85. | | N/A | | $.05 | | $.06 | +---------------------+
La propiedad text-justify
Esta propiedad permite un mayor control en el texto justificado.
none: anula el justificado heredado.
auto: El UA determina el algoritmo de justificación a seguir, basado en un equilibrio entre rendimiento y calidad de presentación.
inter-wordLa justificación fundamentalmente se realiza en los separadores de palabra. Este valor se suele utilizar para las lenguas que separar las palabras con espacios.
distribute: La justificación fundamentalmente modifica tanto el espacio entre los separadores de palabras y entre caracteres de la escritura (excepto en aquellas que utilizan ligaduras y en las cursivas).
El resto de valores (|inter-ideograph|inter-cluster|kashida|) pensados para escrituras que emplean caracteres distintos a los latinos.
Separación entre letras y palabras
La propiedad word-spacing
Para controlar el espaciado entre palabras. Se pueden utilizar los valores |normal| en unidades de longitud|porcentajes| .
normal: la separación entre palabras la define las características de la fuente o el UA
Unidades de Longitud: Se suma al espaciado "normal". Permitidos, con reservas, valores negativos.
Porcentajes: se calculan tomando como base el espaciado "normal" de la tipo. Valores negativos no permitidos.
La novedad radica en que se pueden declarar hasta tres valores, que se corresponden con el espaciado óptimo, mínimo y máximo. Por ese orden.
Si sólo hay dos, el primero define el óptimo y mínimo y el segundo el máximo.
Propiedad letter-spacing
No hay novedades significativas. Como curiosidad, el carácter y su espacio de separación son tratados como un todo.
Control de los extremos de línea
text-indent
La novedad está en que junto al valor para indentar la primera línea se puede añadir (separado por un espacio en blanco) uno de los dos valores siguientes:
each-line: La separación del borde afecta a la primera línea de cada bloque de texto y a cada una de las que siguen a un salto de línea forzado, pero no a las resultantes del "text wrap break".
hanging Lo contrario al anterior (each-line).
La propiedad hanging-punctuation
Esta propiedad determina si un signo puntuación, si lo hay, puede ser colocado fuera de la caja de línea al comienzo o al final de una línea de texto.
none: no se pueden pasar a la siguiente línea.
first: añade un carácter de apertura (paréntesis, corchete...) o de cita al inicio de la primera línea formateada.
first: lo mismo pero al final.
force-end: Idem un punto o una coma al final de la última línea generada.
force-end: Lo mismo que el anterior pero antes de hacer la justificación.
Decoración de textos
Las propiedades text-decoration y text-emphasis por las novedades introducidas quedan para un próximo artículo.
Junto a una propiedad "fantasma": text-overflow
Documento base de este artículo: CSS Text Level 3. Status: Editor's Draft. 24 Abril 2012
Quizás te interese complementar la lectura con el artículo "Guiones - y puntos suspensivos... automáticos con Css en los cortes de palabras"
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Este blog completo es una maravilla, cada vez que busco algo de CSS lo encuentro aquí, es excelente!
ResponderEliminarGracias stramin.
ResponderEliminarQué bueno que encuentres algo útil en el blog.
Un saludo.
Buenas, yo estoy intentando conseguir que 2 palabras no se partan y no lo consigo. Utilizo hyphens: none pero no hace nada. Yo quiere evitar que se partan enlaces como Mi área personal o Nuevo Usuario y no lo consigo. No me gustaria poner _ en lugar de espacio pero no encuentro otra solución. les agradeceria que me dijesen como puede hacerlo.
ResponderEliminarhyphens controla si una palabra se corta o no y en caso de corte de la palabra colocar unas sílabas en una línea y las restantes en la siguiente, añadiendo un guión medio (-) al finalizar la primera línea.
ResponderEliminarPero por lo que dice lo que pretende es que un elemento como un enlace (que puede estar formado por varias palabras) se separe en dos líneas o no.
Le ha faltado una información vital e imprescindible en su exposición.
Olvidó el marcado html y los estilos Sin ella sólo se pueden hacer cábalas o esperar por el adivino.
¿Donde están esos enlaces? ¿Una lista? ¿Un párrafo?...
Algo se podrá hacer pero no por la vía del control del texto sino de los elementos.
Le sugiero que construya una demo de su caso particular y la ponga en línea en su dominio o en en algún sitio como codepen o jsfiddle o y facilite el enlace.
Un saludo