From f5f75d4db6126a9806b7104a4fdf4c1495638959 Mon Sep 17 00:00:00 2001 From: Bartosz-Do Date: Mon, 17 Aug 2026 18:45:17 +0200 Subject: [PATCH] Fix print styles for navbar, dark mode, cards and tables; document printing (#2897) --- .changeset/add-printing-docs.md | 5 ++ .changeset/fix-print-styles.md | 5 ++ core/scss/layout/_dark.scss | 11 +++ core/scss/layout/_navbar.scss | 11 +++ core/scss/ui/_cards.scss | 1 + core/scss/ui/_tables.scss | 10 +++ docs/content/ui/utilities/printing.mdx | 102 +++++++++++++++++++++++++ shared/data/docs.json | 4 + 8 files changed, 149 insertions(+) create mode 100644 .changeset/add-printing-docs.md create mode 100644 .changeset/fix-print-styles.md create mode 100644 docs/content/ui/utilities/printing.mdx diff --git a/.changeset/add-printing-docs.md b/.changeset/add-printing-docs.md new file mode 100644 index 000000000..003630cf6 --- /dev/null +++ b/.changeset/add-printing-docs.md @@ -0,0 +1,5 @@ +--- +"@tabler/docs": minor +--- + +Added a Printing docs page covering `d-print-*` utilities and the `media-print` mixin. diff --git a/.changeset/fix-print-styles.md b/.changeset/fix-print-styles.md new file mode 100644 index 000000000..9a0ee1911 --- /dev/null +++ b/.changeset/fix-print-styles.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed print styles: hidden navbar/sidebar, forced light `color-scheme`, and avoided breaking `.card`/table rows. diff --git a/core/scss/layout/_dark.scss b/core/scss/layout/_dark.scss index 3b59491a3..90325bd59 100644 --- a/core/scss/layout/_dark.scss +++ b/core/scss/layout/_dark.scss @@ -48,4 +48,15 @@ // The global `@extend [data-bs-theme='dark']` for light-scoped subtrees // inside a dark body lives in `_extends.scss` — with the module system it // must have every dark-styling module upstream. + + // Printing a dark page wastes ink/toner and can leave near-white text on + // paper, since browsers skip background colors in print by default. Force + // every light-dark() token back to its light value regardless of theme. + @include media-print() { + :root, + [data-bs-theme='dark'], + [data-theme='dark'] { + color-scheme: light !important; + } + } } diff --git a/core/scss/layout/_navbar.scss b/core/scss/layout/_navbar.scss index e5757e47e..96624a78e 100644 --- a/core/scss/layout/_navbar.scss +++ b/core/scss/layout/_navbar.scss @@ -97,6 +97,10 @@ Navbar background: var(--navbar-bg); box-shadow: inset 0 calc(-1 * var(--navbar-border-width)) 0 0 var(--navbar-border-color); + @include media-print() { + display: none; + } + .navbar-collapse & { flex-grow: 1; } @@ -391,6 +395,13 @@ Navbar vertical } } } + + @include media-print() { + .navbar-vertical ~ .page { + padding-inline-start: 0; + padding-inline-end: 0; + } + } } .navbar-overlap { diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss index 87a7a048e..3ecdeeedf 100644 --- a/core/scss/ui/_cards.scss +++ b/core/scss/ui/_cards.scss @@ -24,6 +24,7 @@ @include media-print() { border: none; box-shadow: none; + break-inside: avoid; } @at-root a#{&} { diff --git a/core/scss/ui/_tables.scss b/core/scss/ui/_tables.scss index 5881684a6..0716693bf 100644 --- a/core/scss/ui/_tables.scss +++ b/core/scss/ui/_tables.scss @@ -3,6 +3,16 @@ .table { font: inherit; + @include media-print() { + thead { + display: table-header-group; + } + + tr { + break-inside: avoid; + } + } + thead { th { padding-top: $table-th-padding-y; diff --git a/docs/content/ui/utilities/printing.mdx b/docs/content/ui/utilities/printing.mdx new file mode 100644 index 000000000..fcc0173d8 --- /dev/null +++ b/docs/content/ui/utilities/printing.mdx @@ -0,0 +1,102 @@ +--- +title: Printing +summary: Print-friendly styles that hide navigation, keep pages in light colors, and control page breaks. +description: Learn what Tabler hides when a page is printed, the d-print-* utilities, and the media-print mixin for custom print styles. +related: [/ui/layout/page-layouts, /ui/layout/navbars] +--- +import Example from '@components/Example.astro'; + +Tabler adjusts its styles automatically when a page is printed, so you don't get a printout full of navigation bars, buttons, and dark backgrounds. This page explains what changes on print, and how to write your own print-only styles. + +## What gets hidden on print + +Elements that only make sense on screen are hidden with `display: none` when the page is printed. This includes: + +- The navbar, both the top navbar and the vertical (sidebar) navbar +- The footer +- Page header actions, such as buttons and dropdowns next to the page title +- Dropdowns, popovers, and toasts +- Modals and offcanvas panels +- Pagination +- Close buttons +- The floating action toolbar + +You don't need to add anything for these to work — they're built into the component styles. For example, the navbar in a default layout already has this rule, so it disappears on print without any extra class: + +```html +
...
+``` + +If you build your own layout elements and want them hidden on print too, add the [`.d-print-none`](#print-utilities) utility class, or use the [`media-print` mixin](#the-media-print-mixin) in your own SCSS. + +## Dark mode on print + +If dark mode is active, Tabler still prints the page in light colors. Dark backgrounds waste ink and toner, and browsers skip background colors by default when printing, which can leave low-contrast, near-white text on a white page. Forcing light colors keeps printed pages readable no matter which theme a visitor had selected. + +## Tables and cards + +Tables and cards get a few adjustments so they print well over multiple pages: + +- A table's `` repeats at the top of every printed page. +- A table row never splits across a page break. +- A card never splits across a page break — it either fits fully on one page or starts on the next one. +- Cards lose their border and shadow when printed, since these don't add anything on paper. + +## Print utilities + +Tabler generates `d-print-*` classes to show or hide any element only when the page is printed, the same way [display utilities](/ui/utilities) work on screen. + +Class|`display` value used on print +-|- +`d-print-none`|`none` +`d-print-inline`|`inline` +`d-print-inline-block`|`inline-block` +`d-print-block`|`block` +`d-print-grid`|`grid` +`d-print-inline-grid`|`inline-grid` +`d-print-table`|`table` +`d-print-table-row`|`table-row` +`d-print-table-cell`|`table-cell` +`d-print-flex`|`flex` +`d-print-inline-flex`|`inline-flex` + +`.d-print-none` is the one you'll use most — add it to anything that shouldn't appear on a printout, like a "Search" box or an "Edit" button: + + +
Hidden on print
+ + +The other `d-print-*` classes work the other way around: pair them with a screen-only display utility (such as `.d-none`) to show something only when the page is printed: + +```html +
This text only shows up when the page is printed.
+``` + +## The media-print mixin + +When customizing Tabler's SCSS, use the `media-print` mixin instead of writing `@media print` by hand. It lives in `core/scss/mixins/_mixins.scss`: + +```scss +@mixin media-print { + @media print { + @content; + } +} +``` + +Use it inside a component or layout rule to add print-only styles next to the rest of the component's SCSS: + +```scss +.my-widget { + border: var(--border-width) var(--border-style) var(--border-color); + + @include media-print() { + border: none; + box-shadow: none; + } +} +``` + +## Accessibility + +Hiding navigation and interactive controls on print doesn't affect screen readers or keyboard users — it only applies inside the `print` media type, so the page works exactly as before on screen. Keep enough contrast in any custom print styles you add: printed pages can't rely on color alone, since some printers output in black and white. diff --git a/shared/data/docs.json b/shared/data/docs.json index a0df243cd..0b33c9c6f 100644 --- a/shared/data/docs.json +++ b/shared/data/docs.json @@ -444,6 +444,10 @@ "title": "Margins", "url": "/ui/utilities/margins" }, + { + "title": "Printing", + "url": "/ui/utilities/printing" + }, { "title": "Vertical align", "url": "/ui/utilities/vertical-align"