Propiedad CSS bleed
La propiedad CSS bleed define el espacio fuera del límite del cuadro de página al definir el tamaño de una página impresa. Aprende con W3docs.
La propiedad CSS bleed especifica hasta qué punto se extiende el contenido imprimible más allá del borde del cuadro de página, hacia el área que se recorta cuando una página se corta a su tamaño final. Forma parte del módulo CSS Paged Media, por lo que solo tiene relevancia cuando se genera una página física o PDF — no tiene ningún efecto en una pantalla web normal.
@page {
marks: crop;
bleed: 5mm;
}Esta propiedad es una abreviatura: establece la cantidad de sangrado en los cuatro bordes a la vez, equivalente a definir bleed-top, bleed-right, bleed-bottom y bleed-left individualmente.
| Valor inicial | auto |
|---|---|
| Se aplica a | Reglas @page |
| Heredado | No |
| Animatable | No |
| Versión | CSS Paged Media Module Level 3 |
| Sintaxis DOM | N/A |
Qué significa "bleed" en impresión
En producción impresa, bleed es el material gráfico que intencionalmente sobrepasa el borde de la página. Las máquinas de corte tienen un pequeño margen de error, por lo que los diseñadores extienden los colores de fondo y las imágenes unos milímetros más allá de la línea de corte. Después de imprimir la hoja, se recorta al tamaño final — y como la tinta ya llegó más allá del corte, no quedan franjas blancas delgadas en los bordes.
La propiedad bleed indica al motor de impresión qué tan grande debe ser ese margen adicional. Coloca el cuadro de página en una hoja más grande y permite que el contenido se derrame hacia el área de sangrado circundante, donde las marcas de corte (definidas con la propiedad marks) indican a la cuchilla dónde recortar.
Sintaxis
bleed: auto | <length>;La propiedad acepta uno de dos tipos de valores:
auto— el navegador decide. Se calcula como6ptcuandomarks: cropestá activo, y como0en caso contrario.<length>— una distancia explícita (por ejemplo3mm,0.125in,9pt) que determina hasta dónde se extiende el área de sangrado hacia afuera en cada dirección más allá del cuadro de página.
bleed solo afecta a la salida impresa y paginada. No tiene efecto en medios de pantalla, por lo que no verás ningún resultado simplemente previsualizándolo en una ventana del navegador — comprueba la vista previa de impresión (o el PDF generado) en su lugar.
La dependencia de marks
bleed solo tiene efecto cuando las marcas de corte están activadas. Sin marks: crop, la página se recorta a su tamaño declarado y no hay espacio para que exista el área de sangrado, por lo que el valor se calcula 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;
}Ejemplos
Una configuración estándar lista para impresión con un sangrado común de 3 mm:
@page {
size: A4;
marks: crop;
bleed: 3mm;
}Dejar que el navegador elija el sangrado predeterminado una vez que las marcas de corte están presentes (se resuelve a 6pt):
@page {
marks: crop;
bleed: auto;
}Para que el arte de fondo llene la página recortada de borde a borde, el elemento también debe llegar al área de sangrado, no solo al cuadro 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
| Valor | Descripción |
|---|---|
auto | Se calcula como 6pt cuando marks es crop; de lo contrario se calcula como 0. |
<length> | Hasta qué punto, en cada dirección, el área de sangrado se extiende más allá del cuadro de página (p. ej. 3mm, 0.25in). |
¿Cuándo usaría esto?
Recurre a bleed solo cuando estés generando salida de calidad de impresión — libros, folletos, tarjetas de visita o cualquier PDF que una imprenta vaya a recortar. Para el diseño web cotidiano es irrelevante; controla los saltos de página en pantalla con page-break-before, page-break-after y page-break-inside en su lugar, y dirige los estilos de impresión con media queries.
Compatibilidad con navegadores
La compatibilidad con propiedades de medios paginados como bleed es limitada. Está implementada principalmente en motores dedicados de impresión/PDF (como Prince, WeasyPrint y Antenna House) y parcialmente en Safari, pero no está ampliamente soportada para la representación en pantalla en los navegadores principales. Cuando el control preciso del sangrado es importante, genera el documento con un motor orientado a la impresión en lugar de depender de la impresión integrada del navegador.