Propriedade CSS bleed

A propriedade CSS bleed especifica até onde o conteúdo imprimível se estende além da borda da caixa de página, na área que é cortada quando a página é aparada ao seu tamanho final. Ela faz parte do módulo CSS Paged Media, portanto só é relevante ao gerar uma página física ou PDF — não tem efeito em uma tela web normal.

@page {
  marks: crop;
  bleed: 5mm;
}

Esta propriedade é uma abreviação: define a quantidade de sangramento nos quatro lados ao mesmo tempo, equivalente a definir bleed-top, bleed-right, bleed-bottom e bleed-left individualmente.

O que "bleed" significa na impressão

Na produção gráfica, bleed é a arte que intencionalmente ultrapassa a borda da página. As máquinas de corte têm uma pequena margem de erro, então os designers estendem cores de fundo e imagens alguns milímetros além da linha de corte. Após a folha ser impressa, ela é aparada ao tamanho final — e como a tinta já chegou além do corte, não há finas faixas brancas nas bordas.

A propriedade bleed indica ao motor de impressão qual deve ser o tamanho dessa margem extra. Ela posiciona a caixa de página em uma folha maior e permite que o conteúdo se estenda para a área de sangramento ao redor, onde as marcas de corte (definidas com a propriedade marks) indicam ao cortador onde aparar.

Sintaxe

bleed: auto | <length>;

A propriedade aceita um de dois tipos de valor:

• auto — o navegador decide. Calcula como 6pt quando marks: crop está em vigor, e como 0 caso contrário.
• <length> — uma distância explícita (por exemplo, 3mm, 0.125in, 9pt) que a área de sangramento se estende para fora em todas as direções além da caixa de página.

A dependência de marks

bleed só tem efeito quando as marcas de corte estão ativadas. Sem marks: crop, a página é aparada ao tamanho declarado e não há lugar para a área de sangramento existir, portanto o valor é calculado como 0.

/* No effect: marks are off, so bleed computes to 0 */
@page {
  bleed: 5mm;
}

/* Works: crop marks define the trim line, bleed extends past it */
@page {
  marks: crop;
  bleed: 5mm;
}

Exemplos

Uma configuração padrão para impressão com sangramento comum de 3 mm:

@page {
  size: A4;
  marks: crop;
  bleed: 3mm;
}

Deixando o navegador escolher o sangramento padrão quando as marcas de corte estão presentes (resolve para 6pt):

@page {
  marks: crop;
  bleed: auto;
}

Para que a arte de fundo preencha a página aparada de borda a borda, o elemento também deve alcançar a área de sangramento, não apenas a caixa de página:

@page {
  size: A4;
  marks: crop;
  bleed: 3mm;
}

body {
  margin: 0;
  background: #1f6feb; /* extends to the page edge so it survives trimming */
}

Valores

Quando usar isso?

Use bleed apenas quando estiver produzindo saída com qualidade de impressão — livros, flyers, cartões de visita ou qualquer PDF que uma gráfica irá aparar. Para layouts web comuns é irrelevante; controle as quebras de página na tela com page-break-before, page-break-after e page-break-inside, e direcione estilos de impressão com media queries.

Suporte a Navegadores

O suporte a propriedades de mídia paginada como bleed é limitado. É implementado principalmente em motores dedicados de impressão/PDF (como Prince, WeasyPrint e Antenna House) e parcialmente no Safari, mas não é amplamente suportado para renderização em tela em navegadores convencionais. Quando o controle preciso de sangramento é importante, gere o documento com um motor focado em impressão em vez de depender do recurso de impressão nativo do navegador.

Prática