Propriété CSS bleed

La propriété CSS bleed indique jusqu'où le contenu imprimable s'étend au-delà du bord de la boîte de page, dans la zone découpée lors de la découpe finale. Elle fait partie du module CSS Paged Media et n'a donc d'utilité que lors de la génération d'une page physique ou PDF — elle n'a aucun effet sur un écran web ordinaire.

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

Cette propriété est un raccourci : elle définit la valeur de débord sur les quatre côtés à la fois, équivalant à définir bleed-top, bleed-right, bleed-bottom et bleed-left individuellement.

Ce que signifie « bleed » en impression

En production d'impression, le fond perdu (bleed) désigne les éléments graphiques qui débordent intentionnellement sur les bords de la page. Les machines de découpe ayant une petite marge d'erreur, les designers étendent les couleurs de fond et les images de quelques millimètres au-delà du trait de coupe. Après impression, la feuille est découpée à sa taille finale — et comme l'encre dépassait déjà le trait de coupe, il ne reste aucune fine bande blanche sur les bords.

La propriété bleed indique au moteur d'impression quelle doit être la taille de cette marge supplémentaire. Elle positionne la boîte de page sur une feuille plus grande et laisse le contenu déborder dans la zone de débord environnante, où les marques de coupe (définies avec la propriété marks) indiquent à la découpeuse où couper.

Syntaxe

bleed: auto | <length>;

La propriété accepte l'un des deux types de valeurs suivants :

• auto — le navigateur décide. La valeur est calculée à 6pt lorsque marks: crop est actif, et à 0 dans le cas contraire.
• <length> — une distance explicite (par exemple 3mm, 0.125in, 9pt) dont la zone de débord s'étend vers l'extérieur dans chaque direction au-delà de la boîte de page.

La dépendance envers marks

bleed ne prend effet que lorsque les marques de coupe sont activées. Sans marks: crop, la page est découpée à sa taille déclarée et il n'y a nulle part où placer la zone de débord, donc la valeur est calculée à 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;
}

Exemples

Une configuration prête à l'impression standard avec un débord courant de 3 mm :

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

Laisser le navigateur choisir le débord par défaut une fois les marques de coupe présentes (se résout à 6pt) :

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

Pour que les graphismes de fond remplissent la page découpée bord à bord, l'élément doit également atteindre la zone de débord, et pas seulement la boîte de page :

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

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

Valeurs

Quand utiliser cette propriété ?

Utilisez bleed uniquement lorsque vous produisez une sortie de qualité impression — livres, flyers, cartes de visite, ou tout PDF qu'une imprimerie devra découper. Pour la mise en page web ordinaire, cette propriété est sans intérêt ; contrôlez plutôt les sauts de page à l'écran avec page-break-before, page-break-after et page-break-inside, et ciblez les styles d'impression avec les media queries.

Compatibilité des navigateurs

La prise en charge des propriétés de médias paginés comme bleed est limitée. Elle est principalement implémentée dans les moteurs d'impression/PDF dédiés (tels que Prince, WeasyPrint et Antenna House) et partiellement dans Safari, mais elle n'est pas largement prise en charge pour le rendu à l'écran dans les navigateurs grand public. Lorsqu'un contrôle précis du débord est nécessaire, générez le document avec un moteur orienté impression plutôt que de vous fier à l'impression intégrée d'un navigateur.

Pratique