Chrome no soportará CSS regions

Es una mala noticia para la literatura digital y digitalizada. Google ha anunciado que su navegador Chrome no soportará CSS Regions de Adobe, debido a complejidades técnicas de programación pero también a guerras comerciales entre firmas (lo cierto es que Adobe está en el punto de mira de muchos competidores), y sin estar claro cómo sustituirá las funciones que Regions prometía.

Para la literatura, el poder diseñar cómo aparecerá el texto en pantalla, definir límites arbitrarios para él o poder realizar caligramas, es importante. Y hacer estas filigranas con HTML5 y CSS3 es bastante complicado, especialmente si uno es escritor y no programador. Es aquí donde Adobe pretendía dar un paso adelante, desarrollando la librería CSS Regions para poder formatear el texto libremente de modo que pudieran crearse maquetaciones en pantalla y en web similares a las que son posibles en papel. Tampoco crean que era una panacea porque, de todos modos, había que saber programar.

CSS Regions permite definir introducir texto en una zona de geometría variable, bien sean cajas dentro de una página o la misma página completa. Asimismo, permite hacer fluir el texto de una zona a otra, de un contenedor a otro, sin cortes. De hecho, es esta su característica más notable ya que puede formatearse un largo texto para que fluya de manera natural entre diversas zonas independientemente del tamaño de la fuente o sus características, independientemente de la geometría.   CSS Regions es, en definitiva, un sistema relativamente sencillo de programar maquetaciones complejas como las que aparecen en las revistas impresas, asegurando que el contenido- el texto- fluya de manera automática de una zona a la siguiente independientemente de cómo se posicionen esas zonas.

  

Regions estaba aún en fase experimental. La decisión de Google de no incluirlo en la próxima versión de Chrome será sin duda un duro golpe para que el desarrollo se complete y, sobre todo, se popularice y pueda programarse con esa CSS confiando en que los navegadores luego podrán interpretarla.

Supone, además, un cambio de criterio ya que Google había implementado esta funcionalidad en su Webkit y funcionaba en beta, tanto en Chrome como en Safari. La razón de esta vuelta atrás parece residir en que Google ya no usa Webkit sino que ha creado su propio motor, llamado Blink. Incorporar CSS Regions a Blink supone un esfuerzo de desarrollo y mantenimiento futuro que Google no está dispuesto a realizar. No le falta razón en parte a Google ya que el código de Regions es excesivamente largo (de más de diez mil líneas) y está desperdigado por más de cien ficheros lo que lo hace difícil de entender, adaptar y mantener.

También, Google busca optimizar su Blink para dispositivos móviles de pantalla pequeña por lo que un código reducido, sencillo y rápido es interesante. Pero, claro, es que leer una novela en un teléfono móvil sigue siendo una aberración en mi opinión. ¿Cuándo vamos a tener una plataforma estándar de programación de texto en pantallas "humanas"?

Sin duda, acabará existiendo una CSS estándar que permita un formateo fácil y completo del texto pero la cuestión es cuánto habrá que esperar. Mientras, la edición digital seguirá siendo complicada.

Queda por ver qué hará Microsoft. De momento, la versión 10 de Internet Explorer parece soportar el prototipo de Adobe. Posiblemente, Apple no lo hará.

CSS Regions

Supongamos que deseamos diseñar el siguiente lay out y queremos que el texto fluya de la zona 1 (la superior) a la 2 intermedia y de esta a la 3 inferior.

 

Lo primero, obviamente, es definir el texto que debe hacerse fluir. Por ejemplo, lo introducimos en un contenedor que llamamos “text”, pero podría ser en cualquier otro elemento como un párrafo siempre que le demos un nombre de clase que será la que nos sirva de referencia. Así:

 

< div class="texto">  Pero, bien porque no se hubiera fijado en aquella maniobra o porque no quisiera someterse a ella, ya se había terminado el rezo y el «novato» aún seguía con la gorra sobre las rodillas. Era uno de esos tocados de orden compuesto, en el que se encuentran reunidos los elementos de la gorra de granadero, del chapska(1), del sombrero redondo, de la gorra de nutria y del gorro de dormir; en fin, una de esas pobres cosas cuya muda fealdad tiene profundidades de expresión como el rostro de un imbécil. < /div>

 

Definimos los tres contenedores que delimitan las zonas (en este caso, para simplificar, los hacemos iguales pero podrían hacerse distintos definiéndoles con CSS)

< div class="zona"> < /div>
< div class="zona"> < /div>
< div class="zona"> < /div>  

CSS Regions<(/i>  permite unir estos contenedores con dos instrucciones incluidas en Webkit, llamadas flow-into y flow-from.  Llamémoslas:

.texto {
   -webkit-flow-into: texto-flow;
   padding: 0;
   margin: 0;
   color: #000000;
   font-family: arial;
   font-size: 8px;
   line-height: 11px;
}
  
-webkit-flow-into: texto-flow es una propiedad que acepta un identificador como valor. Puede ser usada tanto con texto como con imágenes, listas o cualquier elemento entendible por HTML.

.zona{
   -webkit-flow-from: texto-flow;
   background: #CCCC00;
   padding: 5px;
   margin-top: 120px;
   width: 320px;
   height: 320px;
   float: left;
   margin-right: 20px;
}

-webkit-flow-from: texto-flow  es la propiedad que especifica a qué elemento se aplica un desplazamiento determinado, es decir de dónde viene el texto. El valor es el nombre que se especificó en la propiedad flow-into. Cualquier estilo que se haya definido para el texto (tamaño de letra, color, alienación, etc. ) se mantendrá a lo largo del desplazamiento por los diversos contenedores.

 

Ahora, el texto pasaría del contenedor inicial al siguiente. Si variamos la posición de estos contenedores en la pantalla, el texto seguiría pasando de uno a otro de manera correcta. Puede imaginarse uno, la flexibilidad y libertad de acción que otorga esta funcionalidad al escritor/programador porque puede independizar el texto del diseño de página sin que el texto “no sepa qué hacer”.