NibCSS

Print styles

Make documents, invoices and articles print well: a small print stylesheet plus nib page-break rules.

1 min readv1

Breakpoint modifiers describe width ranges, so there is no print: modifier. Put print rules in a small global stylesheet, and use nib for the page-break properties:

CSS
@media print {
  .no-print { display: none !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .8em; }
}
HTML
<nav class="no-print">…</nav>
<article nib="bki=avoid; cl=#000">…</article>
<h2 nib="bkb=page">Chapter 2</h2>

bkb, bka and bki (break-before, break-after, break-inside) control page breaks; oln and wdw (orphans, widows) keep paragraphs together.

Next steps#