O uso de estilos na definição de documentos estruturados é bastante difundido na literatura.
Várias linguagens de definição de folhas de estilos têm sido criadas nos últimos anos [CSS1, XSL, Marden98 e DSSSL].
Folhas de estilo são usadas para definir o formato de apresentação de um documento. Elas são definidas separadamente da estrutura de documentos e determinam diversas propriedades de apresentação como os tipos de fonte, cores e bordas a serem utilizados.
Adicionalmente, folhas de estilo podem definir o formato espacial de apresentação dos componentes de um documento. O W3C tem desenvolvido nos últimos anos algumas linguagens de definição de estilos para documentos XML [XML] (em especial, HTML [HTML4]). Uma delas, Cascading Style Sheets (CSS), é definida atualmente em três versões, CSS nível 1 (CSS1) [CSS1], CSS nível 2 (CSS2) [CSS2] e CSS nível 3 (CSS3) [CSS3], que é uma versão modularizada da linguagem que ainda se encontra em desenvolvimento. XSL (eXtensible Style Sheets) [XSL] é outra linguagem desenvolvida pelo W3C. Ela á baseada na linguagem DSSL (Document Style Semantics and Specification Language) [DSSSL].
Tanto CSS como XSL definem estilos para documentos XML. Além disso, ambas as linguagens possuem modelos para a definição da estrutura de apresentação dos objetos de documentos.
XSL utiliza um modelo de áreas (area model) para a definição da apresentação do conteúdo de documentos XML. São usadas áreas retangulares, que podem ser do tipo bloco ou inline.
O modelo permite uma definição hierárquica de áreas (organizada através de uma árvore de áreas), possibilitando que áreas possuam “áreas filhas”. Cada área retangular é subdivida em três retângulos menores, como ilustra a Figura 2.15: um retângulo de conteúdo, onde pode ser apresentado algum conteúdo e/ou definidas outras áreas (filhas); e retângulos de preenchimento e de borda que regulam a justaposição de áreas em um mesmo nível (“irmãs”).
Figura 2.15 – Modelo de áreas usado por XSL.
As áreas definidas em uma folha de estilo XSL podem ser empilhadas. Esse empilhamento é feito através da definição de restrições de empilhamento. A Figura 2.16 apresenta um exemplo de empilhamento de blocos. É definido um bloco P, com dois blocos filhos, A e B. B,
Retângulo de borda Retângulo de preenchimento
Retângulo de conteúdo
por sua vez, possui, também, um bloco filho, C. Por simplicidade, considera-se que todas as áreas não possuem preenchimento ou borda (ver Figura 2.15). São definidas três restrições que especificam espaços entre os blocos. A primeira delas define que o bloco A deve ter um espaço de 3 pontos após a sua área. Antes do bloco B também é definida uma restrição que determina um espaço de 1 ponto. A última das restrições é definida entre o bloco C e bloco que o contém, B; é definido um espaço de 2 pontos antes de B.
Figura 2.16 – Empilhamento de áreas do tipo bloco.
A Figura 2.17 apresenta os possíveis espaçamentos que podem ser usados na definição de restrições de empilhamento. Essa figura apresenta os retângulos que compõem uma área retangular (já ilustrados na Figura 2.15) e um novo retângulo, determinado pelos espaçamentos aplicados à área original.
Figura 2.17 – Espaçamento utilizado por áreas.
Deve-se observar que as restrições de empilhamento podem ser definidas tanto entre áreas irmãs como entre uma área e sua área mãe.
O modelo usado por CSS define caixas, semelhantes às áreas, para a apresentação, através de um modelo de caixas (box model). Uma caixa possui uma estrutura de retângulos semelhante a definida pelo modelo de áreas (ver Figura 2.18).
2 pt 1 pt 3 pt P A
B C
space-before
space-after
space-end space-start
Figura 2.18 – Retângulos de uma caixa.
CSS também define um modelo de formatação visual [CSS2] para as caixas de uma estrutura de apresentação. Esse modelo considera a existência de um viewport, que é uma janela ou algum recurso usado para a apresentação de um documento. Ele determina que a apresentação deve se adaptar quando as dimensões do viewport usado forem alteradas.
Alternativamente, o modelo permite que esquemas de rolagem sejam usados quando a apresentação se estender às dimensões do viewport utilizado.
O modelo de formatação define três esquemas de posicionamento para as caixas de uma estrutura. São eles:
• fluxo normal (normal flow) onde as caixas podem ser definidas como do tipo bloco ou inline. As caixas são espaçadas umas das outras através de suas margens, como acontece com as restrições de empilhamento do modelo de áreas de XSL.
Nesse esquema, caixas podem ser posicionadas relativamente à caixa que as contém através das propriedades bottom, left, top, right, e que definem defasagens com relação à
“caixa mãe”, de forma semelhante à definição de regiões feita em SMIL (ver Seção 2.1).
• flutuante, onde uma caixa pode ser apresentada fora da estrutura de caixas da apresentação, flutuando sobre elas. Da mesma forma que uma caixa comum, uma caixa flutuante respeita as definições de margem especificadas.
• posicionamento absoluto. Uma caixa pode ser posicionada de forma absoluta com relação à caixa que a contém. Quando isso acontece, ela é excluída do fluxo normal da caixa mãe.
Isso dá uma liberdade maior na definição de caixas em uma estrutura, não necessitando que elas sejam empilhadas, como acontece no fluxo normal.
Naturalmente, caixas podem ser posicionadas de tal forma que sejam gerados conflitos na sua apresentação. O modelo prevê um atributo, de nome z-index, que controla a prioridade
margem (transparente) borda preenchimento
conteúdo
de apresentação de caixas irmãs. Quanto maior o valor desse atributo, maior a prioridade de apresentação do objeto.
[Caloini96] apresenta outra aplicação de estilos na apresentação de documentos hipermídia. É apresentado um ambiente de autoria de documentos hipermídia, com um modelo de documentos que permite a composição de objetos de mídia para formar cenas de apresentação. São usados dois tipos básicos de estilo na apresentação de um documento, slots e templates. Slots definem o estilo de apresentação de objetos de mídia. Templates definem estilos de apresentação para cenas completas. Obviamente, quando templates forem utilizadas para a definição do estilo de apresentação de uma cena, o usuário deve indicar quais objetos devem ser associados a quais slots. Esse é um esquema bastante parecido com a construção de estruturas de apresentação.