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

> Learn how Archify's print stylesheet enables landscape and two-column layouts for your archify output, preventing page breaks for clean, organized prints.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: how-to-guide
- Published: 2026-07-14

---

**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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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:

```html
<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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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`.