Publicado em: 30 de outubro de 2024
A partir do Chrome 131, é possível usar CSS para adicionar conteúdo às margens das páginas quando elas são impressas. Esta postagem explica o modelo de página para mídia paginada e como usar esse recurso para melhorar a saída de impressão das suas páginas da Web.
O CSS inclui especificações que lidam com mídia paginada, o Módulo de mídia paginada do CSS e o Conteúdo gerado pelo CSS para mídia paginada. Eles definem recursos que são usados apenas quando uma página é impressa (inclusive em PDF). Há user-agents que suportam esse CSS e permitem gerar livros e outros materiais impressos em HTML e CSS. No entanto, essa funcionalidade nunca foi bem compatível com navegadores da Web, apesar de precisarmos imprimir ou criar PDFs com frequência em aplicativos.
O Chrome e o Firefox são compatíveis com a regra at @page. Essa regra permite definir o tamanho da página em que você está imprimindo e o tamanho das margens ao redor do conteúdo. No Chrome 131, também é possível usar conteúdo gerado
para adicionar conteúdo às margens, segmentando a regra at-margin relevante.
O modelo de página
O modelo de página usado na mídia paginada define uma caixa de página, que é a folha de papel. Dentro da caixa de página, há uma margem, uma borda, um padding e, por fim, a área da página, onde o conteúdo é exibido. Quando o conteúdo é impresso, ele é fragmentado em quantas páginas forem necessárias para conter tudo.
A margem da página é dividida em 16 caixas, cada uma com uma regra-at correspondente.
@top-left-corner@top-left@top-center@top-right@top-right-corner@left-top@left-middle@left-bottom@right-top@right-middle@right-bottom@bottom-left-corner@bottom-left@bottom-center@bottom-right@bottom-right-corner
Dimensionamento da caixa de margem
A altura das caixas superior e inferior e a largura das caixas laterais esquerda e direita são definidas pelo tamanho da margem definida usando @page. Portanto, as caixas de canto têm um tamanho fixo criado pela interseção dessas margens. As três caixas entre cada canto são flexíveis. Elas se comportam de maneira semelhante às caixas em um layout flexível usando flex: auto. Portanto, elas se estendem para preencher o espaço, mas, se você colocar uma string de texto longa em uma e nada nas outras, a caixa com o texto vai aumentar em vez de quebrar o texto.
Adicionar conteúdo às caixas de margem
Para adicionar conteúdo às caixas de margem, use conteúdo gerado por CSS, assim como faria com os pseudoelementos ::before e ::after. Nesse caso, use a regra-at
relacionada à caixa que você quer segmentar. O CSS a seguir adiciona o texto "Meu livro" à caixa de margem inferior esquerda ou às páginas à direita. Ele também estiliza esse texto.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
Além de strings de texto, você pode adicionar contadores de página às margens. O contador page predefinido contém a página atual. O CSS a seguir adiciona o número
na parte inferior direita das páginas à direita e na parte inferior esquerda das páginas à esquerda.
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
Há também um contador pages que sempre contém o número total de páginas.
Observações ao usar margens de página
Se você estiver imprimindo de um navegador, ele vai adicionar automaticamente algum conteúdo de margem da página se houver espaço para isso. Isso vai acontecer mesmo que você tenha adicionado conteúdo. Esses cabeçalhos e rodapés gerados automaticamente podem ser desativados na caixa de diálogo de impressão.
Se você definir as margens de uma página como 0 ou um valor tão pequeno que não haja espaço para os cabeçalhos e rodapés do navegador, eles não serão exibidos.
Devido ao conceito de um layout de página padrão no Chromium, se a primeira página do documento impresso não tiver espaço para o conteúdo automático, isso vai impedir que o conteúdo do navegador seja exibido nas páginas posteriores, mesmo que elas tenham espaço.
Possibilidades futuras para mídia paginada
As especificações de mídia paginada incluem vários outros recursos, descritos no artigo Como criar para impressão com CSS. Se você tiver um caso de uso para qualquer um dos recursos a seguir, adicione-o aos bugs vinculados.
Definir strings
Os livros costumam imprimir o título do capítulo atual nas margens. Esse título não pode ser codificado no CSS, porque muda conforme você avança no livro. A propriedade
string-set permite definir um valor do seu HTML para usar no
conteúdo gerado. O CSS a seguir pressupõe que os títulos dos capítulos estejam marcados
como um <h1>. Ele usa o conteúdo de cada <h1> na margem superior direita das páginas à direita. Quando chega ao próximo <h1>, o valor é atualizado para margens depois desse ponto.
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
Bug do Chromium para string-set e string().
Referências cruzadas
Depois que um documento é impresso, as referências a outras páginas geralmente são indicadas usando o número da página em que a referência pode ser encontrada. Essas referências cruzadas podem ser criadas usando target-counter. Quando aplicado a um link, ele funciona para
ir para a referência na Web. Ao imprimir, o número da página é mostrado.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
Bug do Chromium para referências cruzadas.
Notas de rodapé
As notas de rodapé também são um recurso das especificações de mídia paginada. Em HTML, use uma classe para identificar o texto que deve ser uma nota de rodapé, por exemplo:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
Em seguida, use o valor footnote de float para transformar esse texto em notas de rodapé. Ele
será removido do parágrafo quando o documento for impresso e mostrado como uma
nota de rodapé.
.fn {
float: footnote;
}