soy Kseso y esto EsCSS

CSS Text Level 3: Novedades

CSS Text Level 3: Novedades

·Por Kseso ✎ 4

Imagen ilustrativa artículo 'Novedades Css Text level 3'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:

  1. text-transform
  2. Espacios en blanco
    • text-space-collapse
    • tab-size
    • white-space
  3. Salto y cortes: línea y palabras
    • line-break
    • word-break
  4. Hyphenation: separando sílabas
  5. Text Wrapping: ajustes del texto
    • Text-wrap
    • Overflow-wrap
  6. Alineación y justificación
    • text-align-last
    • text-justify
  7. Separaciones
    • letter-spacing
    • Word-spacing
  8. Control en extremos de línea:
    • text-indent
    • hanging-punctuation
  9. 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 LinesSpaces and TabsText Wrapping
normalCollapseCollapseWrap
prePreservePreserveNo wrap
nowrapCollapseCollapseNo wrap
pre-wrapPreservePreserveWrap
pre-linePreserveCollapseWrap

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"

avatar del Editor del blog

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 Don Kseso Kseso