Qui tắc @page trong CSS

Thiết bị phân trang (paged media) khác với thiết bị liên tục (continuous media) ở chỗ: nội dung của tài liệu được phân chia nhỏ thành một hoặc nhiều trang rời rạc. Phương tiên phân trang bao gồm paper, phim, các trang được hiển thị trên màn hình máy tính, …

CSS2 Standard giới thiệu một số đặc điểm để kiểm soát sự phân trang cơ bản, cho phép lập trình viên tạo Style giúp các trình duyệt tìm ra cách tốt nhất để in tài liệu của chúng.

Page Model trong CSS2 xác định cách một tài liệu được định dạng bên trong một khu vực hình chữ nhật -- một Page Box -- có một độ rộng và chiều cao. Những đặc điểm này được chia thành hai nhóm:

• Các đặc điểm để định nghĩa một Page Layout.
• Các đặc điểm để điều khiển sự phân trang của một tài liệu.

CSS2 định nghĩa một page box, một box có kích thước giới hạn mà nội dung được biểu hiện bên trong đó. Page box này là một vùng hình chữ nhật bao gồm hai khu vực:

• Page Area: bao gồm các box được bố trí trên page đó. Các cạnh của page area đóng vai trò như là khối chứa ban đầu cho layout xuất hiện giữa các Page Break.

• Margin Area: bao quanh Page area.

Bạn có thể xác định kích cỡ, chiều, lề, … của một page box bên trong qui tắc rule. Kích cỡ của Page Box được thiết lập với thuộc tính size. Kích cỡ của Page Area là kích cỡ của Page Box trừ đi Margin Area.

Ví dụ, qui tắc @page sau sẽ thiết lập kích cỡ Page Box là 8.5 x 11 inch và tạo một lề là 2cm trên tất cả các cạnh giữa Page Box và Page Area.

<style type="text/css">
   <!--
   @page { size:8.5in 11in; margin: 2cm }
   -->
</style>

Bạn có thể sử dụng các thuộc tính margin, margin-top, margin-bottom, margin-left và margin-right bên trong qui tắc @page để thiết lập lề cho trang của bạn.

Ngoài ra, bạn có thể sử dụng thuộc tính marks bên trong qui tắc @page để tạo các crop marks và cross masks. Crop marks xác định nơi mà page được cắt. Cross marks được sử dụng để căn chỉnh Sheet. Crop marks và cross marks được in bên ngoài Page Box. Để có phần không gian để hiển thị crop và cross marks, trang cuối cùng sẽ phải lớn hơn page box đôi chút.

Thuộc tính size xác định kích cỡ và hướng của một Page Box. Thuộc tính này có thể nhận các giá trị:

• auto: sử dụng giá trị này, kích cỡ và hướng của Page Box sẽ được thiết lập tự động phục thuộc theo nội dung và context của phần tử. Tức là tùy theo Target Sheet – chẳng hạn như bạn in trên khổ giấy A4 thì khổ giấy đó là Target Sheet.

• landscape: Page Box sẽ có cùng kích cỡ với Target, và các cạnh dài hơn sẽ nằm ngang.

• portrait: Page Box sẽ có cùng kích cỡ với Target, và các cạnh ngắn hơn sẽ nằm ngang.

• length: sử dụng giá trị length cho thuộc tính size để tạo một Page Box tuyệt đối. Tức là, nếu bất kỳ giá trị nào được xác định, nó sẽ thiết lập cho cả độ rộng và chiều cao của Page Box. Giá trị % sẽ không được chấp nhận trong thuộc tính size.

Trong ví dụ sau, các cạnh ngoài của Page Box sẽ căn chỉnh theo Target (căn chỉnh tự động). Giá trị % trên thuộc tính margin chỉ ra kích cỡ của margin được xác định tỉ lệ với kích cỡ của Target Sheet. Nếu Target Sheet có các kích cỡ là 21.0cm x 29.7cm (khổ giấy A4 chẳng hạn) thì các lề sẽ có kích cỡ là 2.10cm và 2.97cm.

<style type="text/css">
   <!--
   @page {
      size: auto;   /* gia tri auto la gia tri mac dinh */
      margin: 10%;
   }
   -->
</style>

Ví dụ sau thiết lập độ rộng của Page Box là 8.5 inch và chiều cao là 11 inch. Page Box trong ví dụ này cần một Target Sheet có kích cỡ là 8.5 x 11 hoặc lớn hơn.

<style type="text/css">
   <!--
   @page {
      size: 8.5in 11in;  /* hai gia tri tuong ung cho: width height */
   }
   -->
</style>

Sau khi bạn đã tạo Page Layout, bạn có thể sử dụng nó trong tài liệu bằng việc thêm thuộc tính page vào style. Ví dụ, style này sẽ biểu hiện tất cả các bảng trong tài liệu trên các Lanscape Page:

<style type="text/css">
   <!--
   @page { size : portrait }
   @page rotated { size : landscape }
   table { page : rotated }
   -->
</style>

Do có qui tắc trên, trong khi in, nếu trình duyệt bắt gặp một phần tử trong tài liệu, và Page Layout hiện tại là Portrait Layout theo mặc định, thì trình duyệt sẽ bắt đầu một Page mới và in bảng trên Lanscape Page.

Theo mặc định khi in, thiết bị sẽ hiển thị mỗi page trên một khổ giấy, và đây được gọi là Single-sized Document. Khái niệm Double-sided Document tức là in hai page trên mỗi khổ giấy. Trong khi in Double-sided Document, các Page Box trên các Left và Right Page nên khác nhau. Việc này có thể được biểu diễn thông qua Pseudo Class trong CSS như sau:

<style type="text/css">
   <!--
   @page :left {
      margin-left: 4cm;
      margin-right: 3cm;
   }

   @page :right {
      margin-left: 3cm;
      margin-right: 4cm;
   }
   -->
</style>

Bạn có thể xác định Style cho First Page của tài liệu bằng cách sử dụng :first Pseudo Class.

<style type="text/css">
   <!--
   @page { margin: 2cm } /* Tat ca 4 le deu co do rong la 2cm */

   @page :first {
      margin-top: 10cm    /* Le tren (Top Margin) cua trang dau tien co do rong 10cm */
   }
   -->
</style>

Trừ khi bạn xác định, nếu không các ngắt trang (Page Break) sẽ chỉ xuất hiện khi định dạng Page thay đổi hoặc khi nội dung đã hiển thị đầy trên Page Box hiện tại. Để kiểm soát trình ngắt trang, bạn có thể sử dụng các thuộc tính page-break-before, page-break-after và page-break-inside.

Hai thuộc tính page-break-before và page-break-after đều chấp nhận các giá trị auto, always, avoid, left, và right.

Từ khóa auto là mặc định, tức là trình duyệt sẽ tạo các Page Break khi cần thiết. Từ khóa always buộc trình duyệt phải tạo ngắt trang trước hoặc sau phần tử, trong khi từ khóa avoid buộc trình duyệt tạo ngắt trang ngay trước hoặc ngay sau phần tử. Hai từ khóa left và right buộc trình duyệt tạo một hoặc hai ngắt trang, để mà phần tử được hiển thị trên Left Page hoặc Right Page (trong Double-sided Document).

<style type="text/css">
   <!--
   h1 { page-break-before : right }
   h2 { page-break-after : avoid }
   -->
</style>

Chỉ sử dụng các giá trị auto và avoid với thuộc tính page-break-inside. Nếu bạn thích các bảng của mình không bị tách bởi các Page Break, bạn viết qui tắc:

<style type="text/css">
   <!--
   table { page-break-inside : avoid }
   -->
</style>

Trên đây là bài viết của eLib.VN về Qui tắc @page trong CSS. Qua bài viết này, các bạn cần nắm được định dạng một phần Pagination đơn giản với CSS, hi vọng nó sẽ giúp các bạn có thêm sự lựa chọn khi xây dựng website.