Print-Friendly CSS

Guidelines for delivering clean, accessible print views for guides, checklists, and safety content.

Why Print Matters

Readers often want offline references for dosage charts, safety checklists, or cultivation steps. Print styles should respect accessibility, remove distractions, and retain critical warnings.

Core Rules

  • Use @media print to simplify layouts: single column, generous line height, serif or system fonts.
  • Hide navigation, carousels, and non-essential interactive elements.
  • Ensure links display URLs after the link text for citations.
  • Keep warnings, disclaimers, and emergency numbers visible and high-contrast.
  • Avoid color-dependent meaning; include icons plus text labels.

Layout & Typography

  1. Set body to 12-14pt with 1.4-1.6 line height; avoid cramped paragraphs.
  2. Remove unnecessary margins and background colors; allow white backgrounds for legibility.
  3. Prevent page breaks inside critical lists or tables with page-break-inside: avoid;.
  4. Keep headings with following paragraphs using page-break-after: avoid;.

Content Prioritization

  • Safety alerts, dosage tables, and emergency steps appear first.
  • Long stories or media-heavy sections can be minimized or collapsed for print.
  • Add a short summary and key takeaways at the top of printable guides.

Implementation Checklist

  • Add print stylesheet to the base layout.
  • Test sample pages (safety, dosage, microdosing, research) in browser print preview.
  • Verify grayscale rendering; maintain sufficient contrast.
  • Ensure notes about legality and medical disclaimers remain readable.
  • Document exceptions where interactive tools must remain visible.

FAQ

  1. Should images print? Only essential diagrams/photos; hide decorative images to save ink.
  2. How to show links? Use a[href]:after with content: " (" attr(href) ")"; for reference.
  3. Do we keep background colors? Remove them; rely on text, icons, and borders for emphasis.
  4. What about interactive calculators? Provide a short explanation and key formula outputs instead of full UI.
  5. Can we add QR codes? Optional for directing readers to the latest version; place near the footer.
  6. How to handle long tables? Allow horizontal scroll on screen; for print, wrap rows or split sections.
  7. When to update? Review print styles whenever layout or typography changes.
  8. How to note last review? Add a small “Last reviewed” line in the footer of printable sections.