`@page (stiluri pentru tipărire)` în CSS

Reguli @ (at-rules) CSS2+ (size: Chrome 15, Firefox 95, Safari 18.2)

Stabilește dimensiunea foii, orientarea și marginile paginilor la tipărire sau la salvarea ca PDF.

Sintaxă CSS

@page {
  size: A4;
  margin: 2cm;
}
@page :first {
  margin-top: 4cm;
}
@media print {
  .capitol { break-before: page; }
}

Ce face `@page (stiluri pentru tipărire)`

@page controlează foaia de hârtie, nu elementele HTML: dimensiunea (size), orientarea și marginile. Se aplică doar la tipărire sau la „Salvează ca PDF” din browser; pe ecran nu are niciun efect.

Pseudo-clasele :first, :left și :right țintesc prima pagină sau paginile pare și impare (pentru documente legate ca o carte). Ruperea paginilor o controlezi pe elemente, cu break-before: page, break-after și break-inside: avoid.

Unele detalii diferă între browsere: casetele din margine (antet/subsol cu @top-center etc.) există momentan doar în Chrome 131+, iar dialogul de tipărire al utilizatorului poate suprascrie dimensiunea și marginile alese.

Valori uzuale

Valoare	Descriere
`size`	A4, A5, letter, dimensiuni explicite (210mm 297mm) și orientare: A4 landscape.
`margin`	Marginile foii, de preferat în cm sau mm.
`:first / :left / :right`	Reguli separate pentru prima pagină sau paginile stânga/dreapta.
`break-before / break-after`	Pe elemente: page forțează începerea pe pagină nouă.
`break-inside: avoid`	Pe elemente: evită tăierea elementului între două pagini (tabele mici, carduri).

Exemple

Exemplul 1: Factură A4 cu margini fixe

Foaia este A4 portret cu 15 mm margine; rândurile de tabel nu se rup între pagini.

@page {
  size: A4 portrait;
  margin: 15mm;
}

@media print {
  nav, .butoane { display: none; }
  table tr { break-inside: avoid; }
  .total { break-before: avoid; }
}

Efect vizual în browser

În previzualizarea de tipărire factura nr. 125 pentru „SC Exemplu SRL, Iași” apare pe foi A4 cu margini egale, fără meniu și fără butoane. Niciun rând de produs nu este tăiat în două, iar totalul de 1.250 lei nu rămâne singur pe o pagină nouă.

Exemplul 2: Fiecare capitol începe pe o pagină nouă, cu prima pagină diferită

Prima pagină are marginea de sus mai mare (copertă); fiecare h2 pornește o pagină nouă.

@page {
  margin: 2cm 2.5cm;
}
@page :first {
  margin-top: 6cm;
}

@media print {
  h2 { break-before: page; }
}