Blocks (bloco) do XSL-FO

A saída do XSL-FO está localizada na área de bloco.

Página, fluxo e bloco do XSL-FO

O conteúdo 'bloco' flui para 'página' e então é outputado para o meio.

O saída do XSL-FO geralmente é aninhada no elemento <fo:block>, o <fo:block> está aninhado no elemento <fo:flow>, e o <fo:flow> está aninhado no elemento <fo:page-sequence>:

<fo:page-sequence>
  <fo:flow flow-name="xsl-region-body">
    <fo:block>
      <!-- Output goes here -->
    </fo:block>
  </fo:flow>
</fo:page-sequence>

propriedades da área do bloco

O bloco é uma sequência de saída localizada dentro de uma caixa retangular:

<fo:block border-width="1mm">
Há uma borda de um milímetro ao redor deste bloco de saída.
</fo:block>

Devido à área do bloco ser uma caixa retangular, ela pode compartilhar muitas propriedades de área comuns:

  • espaço antes e espaço após
  • margem
  • borda
  • padding
  • espaço antes

representação gráfica:

espaço antes e espaço após é a área vazia que separa os blocos um do outro.

margem é a área vazia ao redor do bloco externo.

borda é o retângulo externo da margem da área. Cada um dos seus quatro lados pode ter diferentes larguras. Também pode ser preenchido com diferentes cores e imagens de fundo.

padding é a área localizada entre a área de conteúdo e a borda.

conteúdoa área da região pode conter conteúdo real, como texto, imagens, gráficos etc.

margem de bloco

  • margem
  • margem superior
  • margem inferior
  • margem esquerda
  • margem direita

borda de bloco

propriedade de estilo da borda:

  • estilo de borda
  • estilo de borda antes
  • estilo de borda após
  • estilo de borda esquerda
  • estilo de borda direita
  • estilo de borda superior ((equivalente a border-before)
  • estilo de borda inferior (equivalente a border-after)
  • estilo de borda esquerda (equivalente a border-start)
  • estilo de borda direita (equivalente a border-end)

propriedade de cor da borda:

  • cor de borda
  • cor de borda antes
  • cor de borda após
  • cor de borda esquerda
  • cor de borda direita
  • cor de borda superior (equivalente a border-before)
  • cor de borda inferior (equivalente a border-after)
  • border-left-color (igual a border-start)
  • border-right-color (igual a border-end)

propriedades de largura da borda:

  • border-width
  • border-before-width
  • border-after-width
  • border-start-width
  • border-end-width
  • border-top-width (igual a border-before)
  • border-bottom-width (igual a border-after)
  • border-left-width (igual a border-start)
  • border-right-width (igual a border-end)

preenchimento do bloco

  • padding
  • padding-before
  • padding-after
  • padding-start
  • padding-end
  • padding-top (igual a padding-before)
  • padding-bottom (igual a padding-after)
  • padding-left (igual a padding-start)
  • padding-right (igual a padding-end)

fundo do bloco

  • background-color
  • background-image
  • background-repeat
  • background-attachment (scroll ou fixed)

propriedades de estilo do bloco:

Bloco é uma sequência de saída que pode ser estilizada isoladamente:

<fo:block
  font-size="12pt"
  font-family="sans-serif">
Este bloco de saída será escrito em uma fonte sans-serif de 12pt.
</fo:block>

propriedades de fonte:

  • font-family
  • font-weight
  • font-style
  • font-size
  • font-variant

propriedades de texto:

  • text-align
  • text-align-last
  • text-indent
  • start-indent
  • end-indent
  • wrap-option (definição de quebra automática de linha, quebra de palavras)
  • break-before (definição de quebra de página, quebras de página)
  • break-after (define o símbolo de quebra de página, quebras de página)
  • reference-orientation (define a rotação do texto dentro de 90")

Exemplo

<fo:block
    font-size="14pt" font-family="verdana" color="red"
    space-before="5mm" space-after="5mm">
W3School
</fo:block>
<fo:block
    text-indent="5mm"
    font-family="verdana" font-size="12pt"
    space-before="5mm" space-after="5mm">
No CodeW3C.com você encontrará todos os tutoriais de construção da Web que você
precisa, desde HTML e XHTML básicos até XML, XSL, Multimídia avançada
e WAP.
</fo:block>

Resultados:

Veja o exemplo acima, para gerar um documento com muitos títulos e parágrafos, será necessário muito código.

Normalmente, documentos XSL-FO não combinam informações de formatação e conteúdo como fizemos anteriormente.

Com alguma ajuda do XSLT, podemos inserir informações de formatação em modelos e escrever conteúdo mais puro.

Você aprenderá como usar modelos XSLT para combinar XSL-FO em capítulos posteriores deste tutorial.