Estilos para papel en CSS

Una hoja de impresión es sobre todo borrar, más las URL que un enlace pierde en papel.

@media print {
  nav, footer, .sidebar, .no-print { display: none; }

  body { color: black; background: white; font-size: 11pt; }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.9em;
  }

  figure, tr, .card { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}

@page {
  size: a4 portrait;
  margin: 18mm;
}

Cómo funciona

@page fija el tamaño de la hoja y sus márgenes.
break-inside: avoid evita que una figura o una fila quede en dos páginas.
Imprimir el href después del enlace es lo único que el papel necesita y la pantalla no.

Palabras clave y builtins usados aquí

attr
background
color
content
display
em
media
page
pt

El intento, en números

Líneas: 18
Caracteres a escribir: 323
Tokens: 95
Ritmo de tres estrellas: 90 tpm

Al ritmo de tres estrellas de 90 tokens por minuto, este intento toma unos 63 segundos.

Escribe este fragmento

Paso 1 de 3 en Otros medios; paso 10 de 13 en Dar estilo a componentes.

← Anterior Siguiente →