Proprietà CSS bleed

La proprietà CSS bleed specifica di quanto il contenuto stampabile si estende oltre il bordo del box di pagina, nell'area che viene ritagliata quando la pagina viene tagliata alle sue dimensioni finali. Fa parte del modulo CSS Paged Media, quindi è rilevante solo quando si genera una pagina fisica o PDF — non ha alcun effetto su un normale schermo web.

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

Questa proprietà è una scorciatoia: imposta la quantità di bleed su tutti e quattro i bordi contemporaneamente, equivalente a impostare bleed-top, bleed-right, bleed-bottom e bleed-left singolarmente.

Cosa significa "bleed" nella stampa

Nella produzione a stampa, il bleed è il materiale grafico che si estende intenzionalmente oltre il bordo della pagina. Le macchine da taglio hanno un piccolo margine di errore, quindi i designer estendono colori di sfondo e immagini di qualche millimetro oltre la linea di taglio. Dopo che il foglio è stampato, viene ritagliato alle dimensioni finali — e poiché l'inchiostro ha già superato il taglio, non rimangono sottili strisce bianche lungo i bordi.

La proprietà bleed indica al motore di stampa quanto deve essere grande quel margine extra. Posiziona il box di pagina su un foglio più grande e permette al contenuto di fuoriuscire nell'area di bleed circostante, dove i segni di taglio (impostati con la proprietà marks) indicano alla taglierina dove eseguire il taglio.

Sintassi

bleed: auto | <length>;

La proprietà accetta uno di due tipi di valore:

• auto — il browser decide. Viene calcolato come 6pt quando marks: crop è attivo, e come 0 altrimenti.
• <length> — una distanza esplicita (ad esempio 3mm, 0.125in, 9pt) di quanto l'area di bleed si estende verso l'esterno in ogni direzione oltre il box di pagina.

La dipendenza da marks

bleed ha effetto solo quando i segni di taglio sono attivati. Senza marks: crop, la pagina viene ritagliata alle sue dimensioni dichiarate e non c'è spazio per l'area di bleed, quindi il valore viene calcolato come 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;
}

Esempi

Un setup standard pronto per la stampa con un bleed comune di 3 mm:

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

Lasciare che il browser scelga il bleed predefinito una volta presenti i segni di taglio (si risolve in 6pt):

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

Per far sì che il colore di sfondo copra la pagina ritagliata da bordo a bordo, l'elemento deve raggiungere anche l'area di bleed, non solo il box di pagina:

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

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

Valori

Quando usare questa proprietà?

Usa bleed solo quando stai producendo output di qualità tipografica — libri, volantini, biglietti da visita o qualsiasi PDF che una tipografia dovrà ritagliare. Per il layout web quotidiano è irrilevante; controlla i salti di pagina a schermo con page-break-before, page-break-after e page-break-inside, e indirizza gli stili di stampa con le media query.

Supporto browser

Il supporto per le proprietà paged-media come bleed è limitato. È implementato principalmente nei motori dedicati alla stampa/PDF (come Prince, WeasyPrint e Antenna House) e parzialmente in Safari, ma non è ampiamente supportato per il rendering a schermo nei browser principali. Quando il controllo preciso del bleed è importante, genera il documento con un motore orientato alla stampa anziché affidarsi alla stampa integrata del browser.

Esercizio