data-print

Print optimization attributes for controlling how pages look when printed — page modes, element visibility, page breaks, and opt-out.

Overview

VB includes a print optimization layer that automatically makes pages look good when printed. It resets design tokens for black-on-white contrast, hides interactive elements, controls page breaks, expands external links, and linearizes layouts.

The print layer loads automatically via main.css. No extra imports needed.

For most pages, the default behavior is all you need. For pages that are intended to be printed (articles, invoices, reports), use data-print on the <body> to enable enhanced print modes with @page rules.

For a conceptual overview, see the Printing guide.

Page Modes

Set data-print on <body> to activate a named print mode. Each mode maps to a CSS @page rule with optimized margins and page numbering.

Value Effect Use Case
article Wide margins, page numbers (bottom center), no number on first page, section breaks Blog posts, documentation, long-form content
invoice Tight margins, A4 portrait Invoices, receipts, order confirmations
report Left/right page awareness, binding margin, page numbers in outer corners Multi-page reports, booklets
none Hides the entire page from printing Dashboards, app shells, settings pages
<!-- Long-form article --> <body data-print="article"> <!-- Invoice --> <body data-print="invoice"> <!-- Multi-page report --> <body data-print="report"> <!-- Never print this page --> <body data-print="none"> <!-- Default: basic print cleanup, no @page enhancements --> <body>

In article mode, each direct <section> child of [data-print="article"] starts on a new page.

Visibility Attributes

Control what appears on screen vs. paper.

Attribute Effect
data-no-print Hidden when printed, visible on screen
data-screen-only Alias for data-no-print
data-print-only Visible when printed, hidden on screen
data-print-keep Prevents auto-hiding of <nav> or <aside> that would normally be suppressed
data-print-background Forces background colors/images to print (uses print-color-adjust: exact)
<!-- Only visible when printed --> <p data-print-only>Printed from example.com on Feb 24, 2026.</p> <!-- Hidden when printed --> <footer data-no-print> <p>&copy; 2026 Example Site</p> </footer> <!-- Keep this nav in print (normally nav is hidden) --> <nav aria-label="Table of contents" data-print-keep> <ol> <li><a href="#intro">Introduction</a></li> <li><a href="#methods">Methods</a></li> </ol> </nav> <!-- Force background color to print --> <mark data-print-background>Highlighted text</mark>

What Gets Auto-Hidden

These elements are hidden in print automatically (no attributes needed):

  • <nav> (unless data-print-keep is set)
  • <dialog>, <search>
  • Buttons (except type="submit")
  • Range inputs, switches, toolbars
  • VB interactive components: theme-picker, site-search, command-palette, page-toc, tool-tip, toast-msg, short-cuts, settings-panel, drop-down, context-menu, emoji-picker, print-page

Page Break Control

Force or prevent page breaks on specific elements.

Attribute CSS Effect
data-break-before break-before: page
data-break-after break-after: page
data-break-avoid break-inside: avoid
<!-- Start this section on a new page --> <section data-break-before> <h2>Chapter 2: Methods</h2> ... </section> <!-- Keep this figure from splitting across pages --> <figure data-break-avoid> <img src="chart.svg" alt="Results chart"> <figcaption>Figure 1: Quarterly results</figcaption> </figure>

Automatic Break Protection

VB automatically prevents breaks inside these elements (no attribute needed):

table, blockquote, pre, code, figure, li, img, picture, details, fieldset

Headings are kept with their following paragraph — a heading will never appear alone at the bottom of a page.

Opting Out

If you want the page to print exactly as it appears on screen — no token reset, no element hiding, no layout linearization — add data-print-raw to the <html> element.

<html lang="en" data-print-raw>

This disables all VB print optimizations. The @page margin rules still apply (they cannot be scoped to a selector), but everything else is skipped.

The <print-page raw-toggle> component provides this as a user-facing checkbox.

Demos

Each demo includes a <print-page raw-toggle> so you can compare VB-optimized printing vs. raw output. Use Ctrl+P / Cmd+P or the print button inside each demo.

Article

Long-form content with page numbers and section breaks.

Invoice

Tight margins, A4 portrait layout.

Report

Left/right page awareness with binding margin.

What the Print Layer Does

A summary of all automatic print optimizations:

Category What Happens
Colors Design tokens reset to black-on-white. No per-element color hacking — every element using tokens automatically gets print-correct colors.
Shadows box-shadow and text-shadow removed on all elements.
Typography Base font size set to 12pt. <pre> wraps instead of overflowing.
Links External URLs printed after link text: Example (https://example.com). Image links and anchor links suppressed.
Abbreviations Title expanded: CSS (Cascading Style Sheets).
Layout Sidebars linearized. data-layout="sidebar" collapses to single column.
Tables <thead> repeats on every page. Sticky positioning disabled. Horizontal scroll removed.
Details Collapsed <details> content forced visible. Toggle indicators hidden.
Forms Inputs get visible borders. Placeholders hidden.
Text effects Gradient text, shimmer, glitch, reveal, typewriter, scramble, and spoiler effects all disabled — plain text shown.
Images max-width: 100% prevents overflow. Background images stripped by token reset.

Browser Support

The core print reset (Phase 1) works in all browsers. Enhanced @page features degrade gracefully.

Feature Chrome Firefox Safari Edge
@media print All All All All
@page { margin } All All All All
@page :first Yes Yes Yes Yes
@page :left/:right Yes Yes Partial Yes
Named pages 85+ 110+ No 85+
Margin boxes (@bottom-center) 131+ Yes No 131+
break-* properties 50+ 65+ 10+ 79+
print-color-adjust 17+ 97+ 15.4+ 79+

If the browser doesn’t support named pages or margin boxes, printing still works — it just uses default page margins without page numbers.