How the Print Stylesheet in Archify Supports Landscape and Two-Column Layouts

Archify’s print stylesheet automatically switches output to landscape orientation, expands the container to full width, and renders summary cards in a two-column grid while preventing internal page breaks.

Archify generates self-contained architecture diagrams that include an embedded print stylesheet for optimized physical media output. The print stylesheet in archify is defined directly within archify/assets/template.html and activates automatically when a browser initiates a print operation. This implementation ensures diagrams and summary cards format correctly without requiring external CSS dependencies.

Landscape Orientation and Page Setup

The print stylesheet configures the page dimensions using the @page at-rule defined in archify/assets/template.html. This rule explicitly sets size: landscape to rotate the page horizontally, providing maximum width for complex diagrams.

The stylesheet also adjusts the .container class to utilize the expanded printable area:

• size: landscape – Rotates the output to horizontal orientation.
• margin: 1.5cm – Applies uniform padding around the page edges.
• max-width: 100% – Overrides the screen-default container width (typically 1200 px) to allow the diagram to span the full paper width.

These settings ensure that when you select Print from the browser, the output automatically adapts to landscape paper with optimal margins.

Two-Column Grid Layout for Cards

To display summary cards efficiently across the wider landscape page, the stylesheet redefines the .cards container specifically for print media. Inside the @media print block, the grid switches from its screen configuration to a fixed two-column layout:

<style>
  @media print {
    .cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
  }
</style>

The grid-template-columns: repeat(2, 1fr) declaration forces exactly two columns of equal width. This design prevents a third card from spilling onto a new page alone, maintaining visual balance and reducing paper waste. The 1rem gap ensures consistent spacing between cards without overcrowding the printed output.

Preventing Page Breaks Inside Cards

The print stylesheet includes safeguards to ensure card content remains intact across pages. Each .card element receives rules that prohibit splitting:

• break-inside: avoid – The modern CSS property that prevents content fragmentation.
• page-break-inside: avoid – Legacy fallback for older browser engines that do not recognize the newer break-inside syntax.

These declarations are critical for maintaining readability, ensuring that individual cards—containing architecture metadata and statistics—never split across two printed pages.

Summary

• The @page rule in archify/assets/template.html sets size: landscape with 1.5 cm margins to maximize horizontal printable space.
• The .container class expands to max-width: 100% for print media, allowing diagrams to utilize the full page width.
• Summary cards render in a strict two-column grid using grid-template-columns: repeat(2, 1fr) within the @media print block to prevent orphaned cards.
• The .card class uses break-inside: avoid and page-break-inside: avoid to ensure content remains on a single printed page.

Frequently Asked Questions

Does Archify require an external CSS file for printing?

No. According to the source code in archify/assets/template.html, all print-specific styles are embedded directly within a <style> block in the HTML template. This self-contained approach ensures print optimization works immediately without external dependencies, making Archify’s output portable and easy to distribute.

Why does the print stylesheet use exactly two columns for cards?

The grid-template-columns: repeat(2, 1fr) rule in the @media print block creates a balanced layout that fits optimally within the landscape-oriented page width. Using exactly two columns prevents a third card from spilling onto a new page alone, which would create visual imbalance and waste paper.

How does Archify prevent cards from splitting across printed pages?

The stylesheet applies both break-inside: avoid and page-break-inside: avoid to .card elements. The first property follows modern CSS fragmentation standards, while the second provides legacy browser support, guaranteeing that card content remains intact on a single physical page.

Which file contains the landscape orientation settings?

The @page rule that configures size: landscape and the 1.5 cm margin is located in the embedded stylesheet within archify/assets/template.html. This file contains the complete HTML skeleton and CSS rules that trigger when the browser’s media type switches to print.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}