Quy tắc CSS @page - Định dạng trang in

Quy tắc @page trong CSS

Quy tắc @page cho phép định dạng **kích thước, hướng, lề (margin)** của trang khi in (print media). Áp dụng cho paged media - in ấn, PDF, paginated content.

Cú pháp cơ bản

@page {
  size: <width> <height> | auto | portrait | landscape;
  margin: <margin>;
  /* Các pseudo-classes cho trang */
  @top-left { content: "Header trái"; }
  @top-center { content: "Header giữa"; }
  @top-right { content: "Header phải"; }
  @bottom-left { content: "Footer trái"; }
  @bottom-center { content: "Trang " counter(page); }
  @bottom-right { content: "Footer phải"; }
}

Thuộc tính size

Ví dụ thực tế: Trang A4 với header/footer

<!DOCTYPE html>
<html>
<head>
  <style>
    @page {
      size: A4 portrait;        /* 210mm x 297mm */
      margin: 2cm 2.5cm;        /* Top/bottom 2cm, Left/right 2.5cm */
      
      @top-center {
        content: "BÁO CÁO HÀNG THÁNG";
        font-size: 12pt;
        font-weight: bold;
        border-bottom: 1px solid #ccc;
        padding-bottom: 5mm;
      }
      
      @bottom-center {
        content: "Trang " counter(page) " / " counter(pages);
        font-size: 10pt;
        color: #666;
        border-top: 1px solid #ccc;
        padding-top: 5mm;
      }
    }
    
    @media print {
      .no-print { display: none; }
      .page-break { page-break-before: always; }
      .avoid-break { page-break-inside: avoid; }
    }
    
    body { font-family: 'Times New Roman', serif; line-height: 1.6; }
  </style>
</head>
<body>
  <button class="no-print" onclick="window.print()">In báo cáo</button>
  <h1>Báo cáo tháng 1/2024</h1>
  <p>Nội dung báo cáo chi tiết...</p>
  <div class="page-break"></div>
  <h2>Phụ lục</h2>
</body>
</html>

Các pseudo-classes trang

• :first - Trang đầu tiên
• :left - Trang chẵn (bên trái khi mở sách)
• :right - Trang lẻ (bên phải khi mở sách)
• :blank - Trang trống

@page :first {
  margin-top: 5cm; /* Trang bìa margin lớn hơn */
  @top-center { content: none; } /* Không header trang đầu */
}

@page :left {
  margin-right: 3cm; /* Lề trong lớn hơn cho binding */
}

@page :right {
  margin-left: 3cm;
}

Hỗ trợ trình duyệt

• Chỉ hoạt động trong @media print hoặc khi in (Ctrl+P)
• Chrome, Firefox, Edge, Safari: Hỗ trợ tốt size, margin, @top/bottom-*
• counter(pages) (tổng số trang): Chỉ Firefox hỗ trợ đầy đủ