Exportando Markdown para PDF a partir do navegador

Há duas maneiras de um navegador produzir um PDF a partir de uma página web, e elas não são igualmente boas.

A primeira é renderizar a página como imagem e embrulhar a imagem em um PDF. Bibliotecas que fazem isso são fáceis de acrescentar, e o resultado é um arquivo em que o texto não é mais texto: você não consegue selecioná-lo, pesquisá-lo nem copiar uma linha, e o arquivo fica várias vezes maior do que precisaria.

A segunda é imprimir a página e escolher “Salvar como PDF” como destino. O navegador diagrama o documento para papel, respeita a folha de estilo de impressão e escreve texto vetorial de verdade. Custa um clique a mais e produz um arquivo genuinamente melhor, então é isso que acontece aqui quando você aperta Salvar como PDF.

Os quatro ajustes que importam

Tudo abaixo está na janela de impressão, não na página, porque nenhuma folha de estilo consegue defini-los.

Destino: Salvar como PDF. Não uma impressora física.

Gráficos de fundo: ligado. Fica em Mais configurações e é o que as pessoas esquecem. Com ele desligado o navegador descarta todo preenchimento de fundo: blocos de código perdem o sombreado, cabeçalhos de tabela ficam brancos, e um PDF de tema escuro sai como papel branco com texto branco em cima, o que parece uma exportação quebrada e não um ajuste.

Cabeçalhos e rodapés: desligado. Essa opção é o navegador acrescentando o URL da página e a data por conta própria. Se você definiu seu próprio cabeçalho ou rodapé, os dois se chocam. Desligue o do navegador e fique com o seu — ou faça o contrário se quiser números de página, o que é tratado adiante.

Escala: 100% ou Padrão. “Ajustar à página” redimensiona a tipografia e desarruma as margens, e são as margens que definem o espaço do cabeçalho e do rodapé.

Por que o controle de Escala às vezes some

Se um documento declara um tamanho de papel fixo, o Chrome considera o papel já decidido pelo autor e esconde o controle de Escala por completo. Isso não é um defeito do navegador nem da página: é a consequência de o documento ter se comprometido.

Então o papel é uma escolha: A4, Carta ou Padrão da impressora. As duas primeiras pedem um tamanho e você perde a Escala. A terceira não pede nada e a Escala volta. As margens são definidas pelo documento nos três casos, então um cabeçalho ou rodapé mantém seu espaço de qualquer jeito.

Cabeçalhos e rodapés repetidos

Um cabeçalho repetido aparece em todas as páginas. Em um navegador isso é feito com um elemento de posição fixa, que a especificação diz repetir-se em cada folha de mídia paginada.

A sutileza é reservar espaço para ele. A abordagem óbvia — preenchimento no topo do corpo do documento — reserva espaço uma vez só, porque o corpo é uma caixa só, por quantas páginas ele se estenda na impressão. Funciona na página um e, da dois em diante, o cabeçalho senta em cima do texto.

A solução é reservar o espaço na margem do @page, que se aplica por página, e posicionar a barra dentro dessa margem com um deslocamento negativo. É isso que a zona de carimbo faz, e ela alarga a margem só na borda que de fato carrega uma barra.

Cada um dos quatro campos — cabeçalho esquerdo, cabeçalho direito, rodapé esquerdo, rodapé direito — aceita o texto que você quiser, mais marcadores preenchidos na hora de imprimir:

• {title} — o primeiro título ou a primeira linha do documento
• {date}, {time}, {datetime} — quando o PDF foi feito

Sem números de página, e por quê

Deliberadamente não existe um marcador {page}. Contar páginas dentro de um elemento repetido não é algo que um navegador consiga fazer: counter(page) só se resolve dentro das caixas de margem do @page, e nenhum navegador importante as implementa. Um marcador que imprimisse nada silenciosamente seria pior do que não existir.

Se você precisa de números de página, a própria opção de cabeçalhos e rodapés do navegador os acrescenta. Use isso em vez de um carimbo, ou aceite os dois e deixe-os em bordas opostas.

PDFs escuros

A opção escura inverte a página — papel preto, tinta branca — e deixa as outras cores em paz. Uma exceção deliberada: a cor dos links é clareada, porque o azul do tema claro fica em cerca de 2,5:1 contra o preto e é ilegível. Ele mantém o matiz e ganha contraste.

Lembre dos gráficos de fundo. Um PDF escuro impresso sem eles é uma página em branco.