CSS3: formato de texto similar a InDesign con exclusiones y regiones

Es Adobe de nuevo. Hicieron dos propuestas para un estándar venidero, lo que daría lugar a la posibilidad de formatear y presentar textos en sitios web tal como ya lo conocemos con software DTP como InDesign. Con Exclusiones podremos permitir que el texto fluya en cualquier forma y forma, mientras que Regions nos permitirá dividir textos entre dos o más elementos HTML.

Adobe y HTML: ¿Equipo de ensueño?

Dale forma a tus textos con exclusiones de CSS

Los textos en HTML se limitan a una forma base rectangular. En el diseño de impresión, estamos acostumbrados desde hace mucho tiempo a la posibilidad de dejar que los textos fluyan a lo largo de formas aleatorias o incluso hacer que los textos tomen formas. Existen soluciones de JavaScript para imitar este comportamiento, pero hasta ahora nunca ha existido la posibilidad de lograr tales efectos usando CSS y HTML puros. Exclusiones de CSS es el nombre de dos nuevas propiedades de CSS que permiten precisamente eso. Además de rectángulos redondeados formados por textos, también podemos crear textos que formen círculos, elipses y polígonos:

p {
  shape-inside: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

Con shape-inside creamos el formulario que contendrá el texto. La propiedad shape-outside, es posible que ya lo hayas adivinado, se preocupará por lo contrario, haciendo que un texto fluya alrededor de una forma. En nuestro ejemplo, polygon se utiliza para definir las coordenadas de la forma. Cada par de valores porcentuales representa una coordenada X e Y.

Dividir textos en muchos bloques usando regiones CSS

Con Regions, Adobe creó una función que le permite dividir textos en dos o más elementos HTML, una tarea perfectamente común en el diseño de impresión. Allí usamos un número aleatorio de marcos de texto que interconectamos para que los textos fluyan libremente de uno a otro. De esa manera, puede dividir su texto, aunque no esté realmente dividido físicamente en una multitud de tramos, en cualquier cantidad de secciones y colocar estos fragmentos donde vea que encajan en su diseño. Para trabajar con Regiones, comenzamos con un elemento HTML que contiene el texto completo. Asignamos una altura fija a ese elemento que no es suficiente para que el texto se muestre como un todo. Entonces necesitamos al menos un elemento más para tener un destino hacia donde fluirá nuestro texto. Finalmente definimos la dirección del flujo de texto usando CSS:

#text1 {
  flow-into: textflow;
  width: 200px;
  height: 300px;
}

#text2 {
  flow-from: textflow;
  width: 200px;
  height: 200px;
}

En nuestro ejemplo el elemento con el ID text1 contiene todo el texto. usando la propiedad flow-into asignamos un nombre aleatorio para poder volver a identificar el flujo de texto (aquí textflow, genial ¿no?). El elemento con el ID text2 obtiene el mismo nombre para el flujo de texto que text2con la diferencia de que la propiedad se denomina flow-form aquí. De esa manera definimos el texto de text1 estar flotando más lejos text2.

Compatibilidad con navegador

Las regiones y exclusiones de CSS son borradores en desarrollo activo. Ningún navegador moderno tiene soporte para ellos en esta etapa. Si desea tenerlo en sus manos lo antes posible, querrá instalar Chrome Canary, la versión para desarrolladores de Google. Canary ya apoya las propuestas de Adobe.

enlaces relacionados

• Adobe y HTML

(dpe)