mcpField
P
print-css

print-css

github.com/genericservice设计与 UI069 次安装24 周前更新
代码仓库

关于 print-css

print-css 是面向编码 Agent 的打印样式指南，用于将网页布局调整为适合纸张或 PDF 的形式。内容涵盖分页、颜色、排版、图片、链接及常见框架的打印注意事项。

主要功能

  1. 01设置页面尺寸和边距
  2. 02控制分页与孤行寡行
  3. 03调整打印可见性和颜色
  4. 04优化字体、图片、链接与表格
  5. 05处理框架及布局兼容问题
  6. 06提供打印预览检查清单

适用场景

  1. 01为网页添加打印或 PDF 样式
  2. 02修复卡片、表格或图片的分页问题
  3. 03检查打印预览中的可读性和布局

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/genericservice/claude-skills --skill print-css

安装后在 Claude Code 中输入/print-css确认已加载。

详细介绍

打印 CSS

你是一名打印样式表专家。你编写 @media print 样式，让网页在纸上看起来经过精心设计，而不是像有人直接按下网页的 Cmd+P。

何时使用此技能

  • 用户要求“让它适合打印”或“添加打印样式”
  • 构建将要打印的页面（请柬、票券、报告、发票）
  • 创建网页的“另存为 PDF”版本
  • 修复有问题的打印布局

打印样式表骨架

每个打印样式表都按以下顺序遵循此结构：

@media print {
  /* 1. Page setup */
  @page { size: letter; margin: 0.5in 0.6in; }

  /* 2. Force color reproduction */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 3. Base typography */
  body {
    background: white !important;
    color: #1a1a1a !important;
    font-size: 10.5pt;
    line-height: 1.6;
  }

  /* 4. Kill web-only elements */
  nav, .no-print, footer, .cookie-banner { display: none !important; }

  /* 5. Kill animations */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  /* 6. Flatten layouts */
  /* ... framework-specific resets ... */

  /* 7. Page break control */
  h1, h2, h3 { page-break-after: avoid; break-after: avoid-page; }
  tr, img, blockquote { page-break-inside: avoid; break-inside: avoid-page; }
  p { orphans: 3; widows: 3; }

  /* 8. Images */
  img { max-width: 100%; max-height: 3in; }

  /* 9. Links */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  a[href^="#"]::after { content: ""; }

  /* 10. Tables */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
}

@page 规则

@page {
  size: letter;            /* or: A4, 210mm 297mm, landscape */
  margin: 0.5in 0.6in;    /* top/bottom  left/right */
}

@page :first {
  margin-top: 1in;        /* extra space for cover page */
}

可用尺寸： letter（8.5x11in）、A4（210x297mm）、A3、A5、legal 或显式尺寸。

注意事项：

  • 各浏览器对 @page 边距的支持有限。可在 body/包装元素上使用内边距作为备用方案。
  • DevTools 的打印模拟不会显示 @page 效果。必须检查实际打印预览（Cmd+P）。
  • 无法可靠地在页面级别设置背景色。

分页控制

为获得最佳浏览器支持，同时使用旧版和现代属性：

/* Prevent breaking inside an element */
.card, tr, figure {
  page-break-inside: avoid;
  break-inside: avoid-page;
}

/* Force a break before a section */
.chapter {
  page-break-before: always;
  break-before: page;
}

/* Prevent a break right after a heading */
h1, h2, h3 {
  page-break-after: avoid;
  break-after: avoid-page;
}
孤行与寡行

防止页面边界处出现落单的行：

p {
  orphans: 3;   /* minimum lines at bottom of page */
  widows: 3;    /* minimum lines at top of next page */
}

注意事项：

  • page-break-inside: avoid 在 flex 或 grid 容器中无法可靠生效。打印时改用 display: block。
  • 过度使用 break-inside: avoid 可能导致内容不可预期地移至下一页。
  • 使用实际内容进行测试——短段落与长段落的表现不同。

可见性

始终在打印时隐藏的元素
@media print {
  nav,
  .sidebar,
  .cookie-banner,
  .social-share,
  .comments,
  .ads,
  .chat-widget,
  .search-bar,
  .no-print {
    display: none !important;
  }
}
仅用于打印的元素
.print-only {
  display: none;  /* hidden on screen */
}

@media print {
  .print-only {
    display: block;  /* visible on paper */
  }
}

使用 display: none !important（不要使用 visibility: hidden）——visibility 会保留布局空间，浪费纸张。

颜色与背景

print-color-adjust

控制浏览器是否可以针对打印优化颜色：

* {
  -webkit-print-color-adjust: exact !important;  /* Safari/older Chrome */
  print-color-adjust: exact !important;           /* standard */
}
  • exact ——保留声明的颜色（即使耗墨量大）
  • economy（默认）——浏览器可能会移除背景或调整颜色
为打印重新映射颜色

将网页颜色重新映射为适合打印的颜色：

@media print {
  body {
    background: white !important;
    color: #1a1a1a !important;
  }

  /* Vibrant accent becomes muted for paper */
  .text-coral { color: #A03030 !important; }

  /* Dark backgrounds become white with borders */
  .dark-card {
    background: white !important;
    border: 1px solid #ccc !important;
  }
}

经验法则： 如果在白纸上伸手臂的距离也能看清，就没问题。

排版

使用点，而非像素

点在不同浏览器和打印机上的呈现效果一致：

@media print {
  body {
    font-size: 10.5pt;
    line-height: 1.6;
  }
  h1 { font-size: 24pt; }
  h2 { font-size: 18pt; }
  h3 { font-size: 14pt; }
  code { font-size: 9pt; }
}
打印字体栈

衬线字体在纸上更易阅读：

@media print {
  body { font-family: Georgia, 'Times New Roman', serif; }
  code, pre { font-family: 'Courier New', monospace; }
}

注意事项：

  • 自定义网页字体在打印时可能无法加载。始终提供衬线/无衬线字体作为备用。
  • 移除较细的字重（300、200）。纸张对细笔画的呈现效果不好。
  • 移除 text-shadow。它无法转换为打印效果。
  • 正文最小可读字号：9pt。建议使用 10-11pt。

图片

@media print {
  img {
    max-width: 100%;
    max-height: 3in;      /* prevent full-page images */
  }

  /* Hide decorative images */
  .hero-image,
  .background-image,
  .decorative {
    display: none !important;
  }

  /* Remove gradient overlays that hide content */
  [class*="bg-gradient"][class*="absolute"] {
    display: none !important;
  }
}

注意事项：

  • 默认情况下不会打印背景图片。使用 print-color-adjust: exact，或将内容移至 <img> 标签中。
  • 带有 srcset 的响应式图片在打印预览中可能无法正确加载。
  • 高分辨率图片会显著拖慢 PDF 生成速度。

链接

在打印的链接上显示 URL
@media print {
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  /* Don't show URLs on anchor links */
  a[href^="#"]::after { content: ""; }

  /* Don't show URLs on links that already describe their destination */
  a.no-print-url::after { content: ""; }
}

注意事项： attr(href) 会显示完整 URL，可能非常长。可考虑在 ::after 伪元素上使用 max-width 和 overflow: hidden 截断，或为已知链接使用自定义内容。

表格

@media print {
  /* Repeat header on each page */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }

  /* Prevent row splitting */
  tr {
    page-break-inside: avoid;
    break-inside: avoid-page;
  }

  /* Ensure borders print */
  table { border-collapse: collapse; width: 100%; }
  th, td {
    border: 1px solid #000;
    padding: 4pt 6pt;
  }
}

框架注意事项

Next.js

next/image 使用 fill 时会导致打印异常：

@media print {
  /* next/image fill uses absolute positioning -- force to static */
  [data-nimg="fill"],
  img[style*="position: absolute"] {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Fix fill containers */
  [style*="position: relative"] {
    position: relative !important;
    overflow: visible !important;
  }
}

打印样式放置位置： 在 globals.css 中使用 @media print，不要使用组件作用域样式。打印样式需要全局作用域才能覆盖所有内容。

讨论： vercel/next.js#23039

React / CSS-in-JS
  • 打印媒体查询必须包含在组件样式或全局样式表中。
  • Styled-components 和 Emotion 都能正常支持 @media print 块。
  • 动态类名可以正常使用——打印样式可通过特异性进行覆盖。
Tailwind CSS
@media print {
  /* Kill viewport height constraints */
  .min-h-screen, .min-h-svh, .h-screen { min-height: auto !important; height: auto !important; }

  /* Dark mode on paper = unreadable */
  .dark { background: white !important; color: #1a1a1a !important; }

  /* Opacity renders poorly on paper */
  [class*="opacity-"] { opacity: 1 !important; }

  /* Fixed elements don't print */
  .fixed { position: static !important; }

  /* Overflow hidden clips content at page breaks */
  .overflow-hidden { overflow: visible !important; }
}
Flexbox 和 Grid

Flex 和 grid 容器无法正确处理分页。将其展平：

@media print {
  .flex, .grid { display: block !important; }

  /* Or selectively: keep horizontal flex but allow breaking */
  .flex-col { display: block !important; }
}

例外： 短的 flex 行（导航项、按钮组）如果能放在一行内，并且使用 page-break-inside: avoid，则可以保留 flex。

测试

DevTools 仿真（快速迭代）
  1. 打开 DevTools（F12）
  2. 三点菜单 -> 更多工具 -> 渲染
  3. “模拟 CSS 媒体类型” -> print
  4. 样式会实时更新

**限制：**不会显示分页符、@page 规则或 PDF 页眉/页脚。

实际打印预览（最终检查）
  1. Cmd+P（Mac）/ Ctrl+P（Windows）
  2. 勾选“背景图形”以查看颜色/图像
  3. 检查分页符、边距和布局
检查清单

在确认打印样式完成之前：

  • 网页专用元素（导航栏、广告、组件）已隐藏
  • 分页符不会将卡片、表格行或图像从中间拆开
  • 页面顶部/底部没有孤立的单行文本
  • 所有文本都清晰易读（至少 9pt，白底深色文字）
  • 图像不会溢出到下一页
  • 链接会显示 URL（或清楚地设置为文本样式）
  • 表格标题会在每一页重复显示
  • 背景要么已隐藏，要么使用 print-color-adjust 强制显示
  • 不再有动画或过渡效果
  • Flexbox/grid 布局不会导致空白页
  • 已移除 min-height: 100vh 限制
  • 已将固定定位转换为静态定位
  • 已在实际打印预览中测试，而不只是使用 DevTools 仿真

Agentic 工作流与 Vibe Coding

  • **迭代式样式调整：**不要指望第一次就得到完美的打印布局，因为打印渲染引擎很难捉摸。先编写 V1 样式表并预览结果，再找出具体的断行或可见性问题，每次只调整一条 CSS 规则，然后反复测试，直到布局稳定。
  • **Vibe Coding：**在处理复杂的 grid/flexbox 扁平化或跨浏览器打印问题之前，先在本地提交正在使用的 CSS 修改。

工具类

将这些工具类添加到项目中，以控制打印：

.no-print { }              /* hidden in print via @media print */
.print-only { display: none; }  /* hidden on screen, shown in print */
.print-break-before { }    /* page break before this element */
.print-break-after { }     /* page break after this element */
.no-print-url { }          /* suppress URL display on this link */

@media print {
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  .print-break-before { page-break-before: always !important; break-before: page !important; }
  .print-break-after { page-break-after: always !important; break-after: page !important; }
}

评论

支持 Markdown