Introdução
A Web é uma plataforma extremamente poderosa para texto, uma área em que a Adobe tem muita experiência e conhecimento. Quando a Adobe estava procurando maneiras de ajudar a avançar a Web, o avanço das capacidades de texto da Web parecia um lugar óbvio para começar. A Web geralmente assume uma única coluna, orientação vertical para o texto. Embora seja possível fluir o texto ao redor de gráficos e até mesmo formatar o texto em várias colunas com CSS, ainda é muito difícil conseguir um layout semelhante ao de uma revista na Web. Com as regiões de CSS e as exclusões de CSS, a Adobe está liderando o esforço para trazer o poder da edição de desktop para os navegadores modernos. Por exemplo, na captura de tela abaixo, as exclusões de CSS estão sendo usadas para fluir o texto ao longo do contorno da montanha:
O documento na captura de tela abaixo também usa exclusões de CSS para permitir que o texto contorne as formas nas imagens, bem como regiões de CSS para formatar o texto em colunas e em torno de uma citação:
Regiões do CSS
Antes de entrar em detalhes sobre as regiões do CSS, gostaria de explicar como as regiões podem ser ativadas no Google Chrome. Depois de ativar as regiões do CSS, você pode testar algumas das amostras mencionadas neste artigo e criar as suas.
Como ativar as regiões CSS no Google Chrome
A partir da versão 20 do Chrome (versão 20.0.1132.57, para ser exato), as regiões CSS são ativadas pela interface chrome://flags. Para ativar as regiões do CSS, siga estas etapas:
- Abra uma nova guia ou janela no Chrome.
- Digite
chrome://flagsna barra de local. - Use a opção Encontrar na página (controle/comando + F) e procure a seção "Recursos experimentais da plataforma da Web".
- Clique no link Ativar.
- Clique no botão Relaunch Now na parte de baixo.
Para mais informações sobre as flags do Chrome, consulte minha postagem no blog Tudo sobre as flags do Chrome.
Depois de reiniciar o navegador, você pode começar a experimentar as regiões do CSS.
Visão geral das regiões de CSS
As regiões CSS permitem que um bloco de texto marcado semanticamente flua automaticamente para "caixas" (atualmente elementos). O diagrama abaixo demonstra a separação do texto (o fluxo) e das caixas (as regiões para onde o texto flui):
Vamos conferir um caso de uso real de regiões CSS. Além de ser desenvolvedor na Adobe, também sou escritor de ficção científica. Publico meu trabalho on-line com frequência sob uma licença Creative Commons. Para que ele funcione no maior número possível de dispositivos e navegadores, uso um formato extremamente simples, como este:
Com as regiões CSS, consegui criar uma experiência mais interessante visualmente e muito mais funcional, já que é mais fácil de navegar e mais confortável de ler:
Para fins de demonstração, adicionei a capacidade de revelar regiões CSS neste protótipo. A captura de tela abaixo mostra como as regiões são organizadas para dar a impressão de serem colunas que envolvem um gráfico e um extrato no centro:
Teste esse protótipo (e confira o código-fonte) aqui. Use as teclas de seta para navegar e pressione Esc para revelar as regiões. Os protótipos anteriores também estão disponíveis aqui.
Como criar um fluxo nomeado
O CSS necessário para fazer com que um bloco de texto flua por regiões é extremamente simples. O snippet abaixo atribui um fluxo chamado "article" a um div com o ID "content" e atribui o mesmo fluxo "article" a qualquer elemento com a classe "region". O resultado é que o texto contido no elemento "content" flui automaticamente por qualquer elemento com a classe "region".
<!DOCTYPE html>
<html>
<head>
<style>
#content {
{ % mixin flow-into: article; % }
}
.region {
{ % mixin flow-from: article; % }
box-sizing: border-box;
position: absolute;
width: 200px;
height: 200px;
padding: 10px;
}
#box-a {
border: 1px solid red;
top: 10px;
left: 10px;
}
#box-b {
border: 1px solid green;
top: 210px;
left: 210px;
}
#box-c {
border: 1px solid blue;
top: 410px;
left: 410px;
}
</style>
</head>
<body>
<div id="box-a" class="region"></div>
<div id="box-b" class="region"></div>
<div id="box-c" class="region"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eleifend dapibus felis, a consectetur nisl aliquam at. Aliquam quam augue, molestie a scelerisque nec, accumsan non metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin cursus euismod nisi, a egestas sem rhoncus eget. Mauris non tortor arcu. Pellentesque in odio at leo volutpat consequat....
</div>
</body>
</html>
O resultado será este:
O texto dentro do div "content" não tem conhecimento da apresentação. Em outras palavras, ele pode permanecer semanticamente intacto, mesmo fluindo por várias regiões. Além disso, como as regiões são apenas elementos, elas são posicionadas e dimensionadas usando CSS, assim como qualquer outro elemento, e, portanto, são perfeitamente compatíveis com os princípios de design responsivo. Designar elementos como parte de um fluxo nomeado significa que o texto especificado flui automaticamente por eles.
O modelo de objetos do CSS
O CSS Object Model, ou CSSOM, define APIs JavaScript para trabalhar com CSS. Confira abaixo uma lista das novas APIs relacionadas às regiões do CSS:
document.webkitGetNamedFlows(): uma função que retorna a coleção de fluxos nomeados disponíveis no documento.document.webkitGetNamedFlows().namedItem("article"): uma função que retorna uma referência a um fluxo nomeado específico. O argumento corresponde ao nome especificado como o valor das propriedades CSSflow-intoefrom-from. Para receber uma referência ao fluxo nomeado especificado no snippet de código acima, transmita a string "article".WebKitNamedFlow: uma representação de objeto de um floe nomeado com as seguintes propriedades e funções:firstEmptyRegionIndex: um valor inteiro que aponta para o índice da primeira região vazia associada ao fluxo nomeado. ConsultegetRegions()abaixo para saber como receber a coleção de regiões.name: um valor de string com o nome do fluxo.overset: uma propriedade booleana que é:falsequando o conteúdo do fluxo nomeado se encaixa nas regiões associadastruequando o conteúdo não cabe e mais regiões são necessárias para conter todo o conteúdo.
getContent(): uma função que retorna uma coleção com referências aos nós que fluem para o fluxo nomeado.getRegions(): uma função que retorna uma coleção com referências a regiões que contêm o conteúdo do fluxo nomeado.getRegionsByContentNode(node): uma função que retorna uma referência à região que contém o nó especificado. Isso é muito útil para encontrar regiões que contêm elementos como âncoras nomeadas.
webkitregionoversetchange. Esse evento é acionado em umWebkitNamedFlowsempre que o layout do conteúdo associado muda por qualquer motivo (o conteúdo é adicionado ou removido, o tamanho da fonte muda, a forma da região muda etc.) e faz com que a propriedadewebkitRegionOversetde uma região mude. Esse evento é útil para detectar mudanças grosseiras no layout. É um indicador de que algo importante aconteceu e o layout pode precisar de atenção, como: mais regiões são necessárias, algumas regiões podem estar vazias etc.webkitregionfragmentchange. Não implementado no momento desta edição. Esse evento é acionado em umWebkitNamedFlowsempre que o layout do conteúdo associado muda por qualquer motivo, semelhante aowebkitregionoversetchange, mas independentemente de qualquer mudança nas propriedadeswebkitRegionOverset. Esse evento é útil para detectar mudanças de layout detalhadas que não afetam necessariamente todo o layout do fluxo nomeado. Por exemplo: o conteúdo é movido de uma região para outra, mas o conteúdo geral ainda se encaixa em todas as regiões.Element.webkitRegionOverset: os elementos se tornam regiões quando têm a propriedade CSSflow-fromatribuída. Esses elementos têm uma propriedadewebkitRegionOversetque, se fizerem parte de um fluxo nomeado, indica se o conteúdo de um fluxo está transbordando a região ou não. Os valores possíveis de webkitRegionOverset são:- "overflow" se houver mais conteúdo do que a região pode conter
- "fit" se o conteúdo parar antes do fim da região
- "vazio" se o conteúdo não tiver chegado à região
Um dos principais usos do CSSOM é detectar eventos webkitregionoversetchange e adicionar ou remover regiões dinamicamente para acomodar diferentes quantidades de texto. Por exemplo, se a quantidade de texto a ser formatado for imprevisível (talvez gerada pelo usuário), se a janela do navegador for redimensionada ou se o tamanho da fonte mudar, pode ser necessário adicionar ou remover regiões para acomodar a mudança no fluxo. Além disso, se você quiser organizar seu conteúdo em páginas, vai precisar de um mecanismo para modificar dinamicamente o DOM e suas regiões.
O snippet de código JavaScript a seguir demonstra o uso do CSSOM para adicionar regiões dinamicamente conforme necessário. Para simplificar, ele não remove regiões nem define o tamanho e as posições delas. Ele serve apenas para fins de demonstração.
var flow = document.webkitGetNamedFlows().namedItem("article")
flow.addEventListener("webkitregionoversetchange", onLayoutUpdate);
function onLayoutUpdate(event) {
var flow = event.target;
// The content does not fit
if (flow.overset === true) {
addRegion();
} else {
regionLayoutComplete();
}
}
function addRegion() {
var region = document.createElement("div");
region.style = "flow-from: article";
document.body.appendChild(region);
}
function regionLayoutComplete() {
// Finish up your layout.
}
Mais demonstrações estão disponíveis na página de amostras de regiões do CSS.
Modelos de página CSS
Aproveitar o CSSOM é provavelmente a maneira mais poderosa e flexível de implementar recursos como paginação e layout responsivo, mas a Adobe trabalha com ferramentas de texto e de publicação de desktop há tempo suficiente para saber que designers e desenvolvedores também vão querer uma maneira mais fácil de acessar recursos de paginação relativamente genéricos. Por isso, estamos trabalhando em uma proposta chamada "Modelos de página CSS", que permite que o comportamento de paginação seja definido de forma totalmente declarativa.
Vamos conferir um caso de uso comum para modelos de página CSS. O snippet de código abaixo mostra o uso do CSS para criar dois fluxos nomeados: "fluxo-de-artigo" e "fluxo-de-linha do tempo". Além disso, ele define um terceiro seletor chamado "combined-articles", no qual os dois fluxos serão contidos. A inclusão simples da propriedade overflow-style no seletor "combined-articles" indica que o conteúdo precisa ser paginado automaticamente ao longo do eixo x ou horizontalmente:
<style>
#article {
{ % mixin flow-into: article-flow; % }
}
#timeline {
{ % mixin flow-into: timeline-flow; % }
}
#combined-articles {
overflow-style: paged-x;
}
</style>
Agora que os fluxos foram definidos e o comportamento de overflow desejado foi especificado, podemos criar o modelo de página:
@template {
@slot left {
width: 35%;
float: left;
{ % mixin flow-from: article-flow; % }
}
@slot time {
width: 25%;
float: left;
{ % mixin flow-from: timeline-flow; % }
}
@slot right {
width: 35%;
float: left;
{ % mixin flow-from: article-flow; % }
}
}
Os modelos de página são definidos usando a nova sintaxe "at". No snippet de código acima, definimos três slots, cada um correspondendo a uma coluna. O texto do "fluxo de artigos" vai fluir pelas colunas à esquerda e à direita, e o texto do "fluxo de linha do tempo" vai preencher a coluna no meio. O resultado pode ficar assim:
O texto do artigo (nas colunas esquerda e direita) está em inglês, e a linha do tempo no centro está em alemão. Além disso, as páginas do documento são exibidas horizontalmente sem a necessidade de código JavaScript. Tudo foi feito de forma declarativa no CSS.
Os modelos de página CSS ainda são uma proposta, mas temos um protótipo que usa um "shim" JavaScript (também conhecido como polyfill) para que você possa testá-los agora.
Para saber mais sobre as regiões do CSS em geral, acesse a página de regiões do CSS em html.adobe.com.
Exclusão de CSS
Para criar um layout semelhante ao de uma revista, não basta distribuir o texto pelas regiões. Um elemento essencial da editoração eletrônica de alta qualidade e visualmente interessante é a capacidade de fazer o texto fluir ao redor ou dentro de gráficos e formas irregulares. As exclusões do CSS estão trazendo esse nível de qualidade de produção para a Web.
A captura de tela abaixo é de um protótipo de exclusões do CSS e mostra o texto fluindo dinamicamente ao redor de um caminho que corresponde ao contorno de uma grande formação rochosa:
O inverso é ilustrado na próxima captura de tela: o texto flui dentro de polígonos de forma irregular:
A primeira etapa para fluir o texto ao redor ou dentro de formas arbitrárias é desenvolver e otimizar os algoritmos necessários. A Adobe está trabalhando em implementações que serão enviadas diretamente ao WebKit. Depois que esses algoritmos forem otimizados, eles vão se tornar a base sobre a qual o restante das exclusões de CSS será criado.
Para mais informações sobre as exclusões de CSS, consulte a página de exclusões de CSS em html.adobe.com. Para uma análise mais detalhada do trabalho da Adobe na tecnologia subjacente para exclusões de CSS, consulte a postagem do blog de Hans Muller intitulada Caixa horizontal: interseção de polígono para exclusões de CSS.
O estado atual das regiões e exclusões do CSS
A primeira vez que falei sobre regiões e exclusões do CSS foi no Adobe Developer Pod no Google I/O 2011. Na época, eu estava mostrando demonstrações no nosso navegador de protótipo personalizado. A recepção foi extremamente entusiástica, mas houve uma sensação palpável de decepção quando os espectadores descobriram que nenhuma das funcionalidades que eu estava mostrando estava disponível em nenhum dos principais navegadores.
Este ano (2012) eu estive no Google I/O de novo, mas dessa vez como palestrante, junto com meu colega Vincent Hardy e Alex Danilo do Google. Você pode assistir à apresentação aqui. Apenas um ano depois, cerca de 80% da especificação de regiões do CSS foi implementada no WebKit e já está na versão mais recente do Google Chrome. Atualmente, as regiões do CSS precisam ser ativadas pelo chrome://flags. O suporte preliminar para regiões do CSS já foi lançado no Chrome para Android:
Além disso, as regiões e exclusões do CSS são implementadas na prévia do Internet Explorer 10 e estão no cronograma de 2012 da Mozilla para o Firefox. A próxima versão principal do Safari deve oferecer suporte à maioria das especificações de regiões do CSS, e as atualizações subsequentes devem incluir o restante.
Confira abaixo um cronograma detalhado do progresso que fizemos com as regiões e exclusões do CSS desde nossa proposta inicial para o W3C, em abril de 2011:
Conclusão
A Adobe tem uma enorme experiência com texto, fontes e publicação de desktop em geral com ferramentas como o InDesign. Embora a Web já seja uma plataforma muito eficiente para textos, queremos usar nosso conhecimento e experiência para melhorar ainda mais a apresentação de textos. As regiões e exclusões do CSS permitem que o conteúdo permaneça estruturado semanticamente, além de possibilitar um layout semelhante a uma revista e, por fim, uma Web muito mais expressiva.