CSS Paged Media - regra @page

A mídia paginada difere da mídia contínua porque o conteúdo do documento é dividido em uma ou mais páginas distintas. A mídia paginada inclui papel, transparências, páginas que são exibidas nas telas do computador, etc.

O padrão CSS2 apresenta alguns recursos básicos de controle de paginação que permitem que os autores ajudem o navegador a descobrir a melhor forma de imprimir seus documentos.

O modelo de página CSS2 especifica como um documento é formatado em uma área retangular - a caixa da página - que tem largura e altura finitas. Esses recursos se enquadram em dois grupos -

  • Recursos CSS2 que definem um layout de página específico.
  • Recursos CSS2 que controlam a paginação de um documento.

Definindo páginas: a regra @page

O CSS2 define uma "caixa de página", uma caixa de dimensões finitas na qual o conteúdo é renderizado. A caixa da página é uma região retangular que contém duas áreas -

  • The page area- A área da página inclui as caixas dispostas nessa página. As bordas da área da página atuam como o bloco inicial de conteúdo para o layout que ocorre entre as quebras de página.

  • The margin area - Envolve a área da página.

Você pode especificar as dimensões, orientação, margens, etc., de uma caixa de página dentro de uma regra @page. As dimensões da caixa da página são definidas com a propriedade 'size'. As dimensões da área da página são as dimensões da caixa da página menos a área da margem.

Por exemplo, a seguinte regra @page define o tamanho da caixa da página para 8,5 × 11 polegadas e cria uma margem de '2 cm' em todos os lados entre a borda da caixa da página e a área da página -

<style type = "text/css">
   <!--
      @page { size:8.5in 11in; margin: 2cm }
   -->
</style>

Você pode usar as propriedades margin, margin-top, margin-bottom, margin-left e margin-right dentro da regra @page para definir as margens de sua página.

Por fim, a propriedade marks é usada na regra @page para criar marcas de corte e registro fora da caixa da página na folha de destino. Por padrão, nenhuma marca é impressa. Você pode usar uma ou ambas as palavras-chave de corte e cruzada para criar marcas de corte e marcas de registro, respectivamente, na página de impressão de destino.

Configurando o tamanho da página

A propriedade size especifica o tamanho e a orientação de uma caixa de página. Existem quatro valores que podem ser usados ​​para o tamanho da página -

  • auto - A caixa da página será definida para o tamanho e orientação da folha de destino.

  • landscape- Substitui a orientação do alvo. A caixa da página tem o mesmo tamanho que o destino e os lados mais longos são horizontais.

  • portrait- Substitui a orientação do alvo. A caixa da página tem o mesmo tamanho que o destino e os lados mais curtos são horizontais.

  • length- Os valores de comprimento para a propriedade 'size' criam uma caixa de página absoluta. Se apenas um valor de comprimento for especificado, ele define a largura e a altura da caixa da página. Valores percentuais não são permitidos para a propriedade 'size'.

No exemplo a seguir, as bordas externas da caixa da página serão alinhadas com o destino. O valor percentual na propriedade 'margem' é relativo ao tamanho do alvo, portanto, se as dimensões da folha alvo são 21,0 cm × 29,7 cm (ou seja, A4), as margens são 2,10 cm e 2,97 cm.

<style type = "text/css">
   <!--
      @page {
         size: auto;   /* auto is the initial value */
         margin: 10%;
      }
   -->
</style>

O exemplo a seguir define a largura da caixa da página como 8,5 polegadas e a altura como 11 polegadas. A caixa da página neste exemplo requer um tamanho de folha de destino de 8,5 "× 11" ou maior.

<style type = "text/css">
   <!--
      @page {
         size: 8.5in 11in;  /* width height */
      }
   -->
</style>

Depois de criar um layout de página nomeado, você pode usá-lo em seu documento, adicionando a propriedade de página a um estilo que é posteriormente aplicado a um elemento em seu documento. Por exemplo, este estilo renderiza todas as tabelas do seu documento em páginas de paisagem -

<style type = "text/css">
   <!--
      @page { size : portrait }
      @page rotated { size : landscape }
      table { page : rotated }
   -->
</style>

Devido à regra acima, durante a impressão, se o navegador encontrar um elemento <table> em seu documento e o layout da página atual for o layout retrato padrão, ele inicia uma nova página e imprime a tabela em uma página paisagem.

Esquerda, direita e primeiras páginas

Ao imprimir documentos em frente e verso, as caixas de página nas páginas esquerda e direita devem ser diferentes. Pode ser expresso por meio de duas pseudo classes CSS da seguinte maneira -

<style type = "text/css">
   <!--
      @page :left {
         margin-left: 4cm;
         margin-right: 3cm;
      }

      @page :right {
         margin-left: 3cm;
         margin-right: 4cm;
      }
   -->
</style>

Você pode especificar o estilo da primeira página de um documento com: primeira pseudoclasse -

<style type = "text/css">
   <!--
      @page { margin: 2cm } /* All margins set to 2cm */

      @page :first {
         margin-top: 10cm    /* Top margin on first page 10cm */
      }
   -->
</style>

Controlando a Paginação

A menos que você especifique o contrário, as quebras de página ocorrem apenas quando o formato da página muda ou quando o conteúdo ultrapassa a caixa da página atual. Para forçar ou suprimir as quebras de página, use as propriedades de quebra de página antes, quebra de página depois e quebra de página dentro .

Tanto a quebra de página antes quanto a quebra de página depois aceitam as palavras-chave auto, always, Avoid, left e right .

A palavra - chave auto é o padrão e permite que o navegador gere quebras de página conforme necessário. A palavra-chave sempre força uma quebra de página antes ou depois do elemento, enquanto evitar suprime uma quebra de página imediatamente antes ou depois do elemento. As palavras-chave esquerda e direita forçam uma ou duas quebras de página, para que o elemento seja renderizado em uma página à esquerda ou à direita.

Usar as propriedades de paginação é bastante simples. Suponha que seu documento tenha cabeçalhos de nível 1 para iniciar novos capítulos com cabeçalhos de nível 2 para denotar seções. Você gostaria que cada capítulo iniciasse em uma nova página à direita, mas não quer que os cabeçalhos das seções sejam divididos em uma quebra de página a partir do conteúdo subsequente. Você pode conseguir isso usando a seguinte regra -

<style type = "text/css">
   <!--
      h1 { page-break-before : right }
      h2 { page-break-after : avoid }
   -->
</style>

Use apenas os valores auto e evite com a propriedade page-break-inside . Se você preferir que suas tabelas não sejam quebradas entre as páginas, se possível, você deve escrever a regra -

<style type = "text/css">
   <!--
      table { page-break-inside : avoid }
   -->
</style>

Controle de viúvas e órfãos

No jargão tipográfico, órfãos são as linhas de um parágrafo encalhadas na parte inferior de uma página devido a uma quebra de página, enquanto as viúvas são as linhas restantes na parte superior de uma página após uma quebra de página. Geralmente, as páginas impressas não parecem atraentes com linhas únicas de texto retidas na parte superior ou inferior. A maioria das impressoras tenta deixar pelo menos duas ou mais linhas de texto na parte superior ou inferior de cada página.

  • o orphans propriedade especifica o número mínimo de linhas de um parágrafo que deve ser deixado na parte inferior de uma página.

  • o widows propriedade especifica o número mínimo de linhas de um parágrafo que deve ser deixado no topo de uma página.

Aqui está o exemplo para criar 4 linhas na parte inferior e 3 linhas no topo de cada página -

<style type = "text/css">
   <!--
      @page{orphans:4; widows:2;}
   -->
</style>