Bloques de XSL-FO (Blocks)

El output de XSL-FO se encuentra en la región de bloques.

Página, flujo y bloque de XSL-FO

El contenido "bloque" fluirá hacia la "página" y luego se exportará al medio.

El output de XSL-FO generalmente se anida en el elemento <fo:block>, que se anida dentro del elemento <fo:flow>, que a su vez se anida dentro del 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>

Atributos del área del bloque

El bloque es una secuencia de salida ubicada dentro de un cuadro rectangular:

<fo:block border-width="1mm">
Hay una línea de borde de un milímetro alrededor de este bloque de salida.
</fo:block>

Dado que el área del bloque es un cuadro rectangular, puede compartir muchas propiedades de área comunes:

  • espacio antes y espacio después
  • margen
  • borde
  • padding
  • espacio antes

Ilustración:

espacio antes y espacio después es el área de espacio en blanco que actúa como separador entre bloques.

margen es el área de espacio en blanco exterior del bloque.

borde es el rectángulo exterior del área del borde. Sus cuatro lados pueden tener diferentes anchos. También se puede rellenar con diferentes colores e imágenes de fondo.

padding es el área que se encuentra entre el área de contenido y el borde.

contenidoEl área puede contener contenido real, como texto, imágenes, gráficos, etc.

margen de bloque

  • margen
  • margen superior
  • margen inferior
  • margen izquierdo
  • margen derecho

borde de bloque

Atributo de estilo de borde:

  • estilo de borde
  • estilo de borde antes
  • estilo de borde después
  • estilo de borde izquierdo
  • estilo de borde derecho
  • estilo de borde superior ((equivalente a border-before)
  • estilo de borde inferior (equivalente a border-after)
  • estilo de borde izquierdo (equivalente a border-start)
  • estilo de borde derecho (equivalente a border-end)

Atributo de color de borde:

  • color de borde
  • color de borde antes
  • color de borde después
  • color de borde izquierdo
  • color de borde derecho
  • color de borde superior (equivalente a border-before)
  • color de borde inferior (equivalente a border-after)
  • border-left-color (igual que border-start)
  • border-right-color (igual que border-end)

propiedades de anchura del borde:

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

relleno del bloque

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

fondo del bloque

  • background-color
  • background-image
  • background-repeat
  • background-attachment (desplazamiento o fijo)

propiedades de estilo del bloque:

Un bloque es una secuencia de salida que puede ser estilizada de manera independiente:

<fo:block
  font-size="12pt"
  font-family="sans-serif">
Este bloque de salida se escribirá en una fuente sans-serif de 12pt.
</fo:block>

propiedades de la fuente:

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

propiedades de texto:

  • text-align
  • text-align-last
  • text-indent
  • start-indent
  • end-indent
  • wrap-option (definición de ajuste automático de línea, ajuste de palabra)
  • break-before (definición de símbolo de salto de página, saltos de página)
  • break-after (definición de símbolo de nueva página, saltos de página)
  • reference-orientation (definición de rotación de texto de 90" dentro)

Ejemplo

<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">
En CodeW3C.com encontrará todos los tutoriales de construcción web que
necesita, desde HTML y XHTML básicos hasta XML, XSL, Multimedio avanzado
y WAP.
</fo:block>

Resultado:

Vea el ejemplo anterior, si se desea generar un documento con muchos títulos y párrafos, se necesitará mucho código.

Por lo general, los documentos de XSL-FO no combinan información de formato y contenido como lo hicimos recién.

Con un poco de ayuda de XSLT, podemos insertar información de formato en las plantillas y luego escribir contenido más puro.

Aprenderá cómo usar plantillas de XSLT para combinar XSL-FO en los capítulos posteriores de este tutorial.