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:

Qui tắc @page trong CSS

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:

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">
    
</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.

Thiết lập kích cỡ trang (page size) trong CSS

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ị:

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">
    
</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">
    
</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">
    
</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ử

Left, Right và First Page trong CSS

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">
    
</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">
    
</style>

Phân trang trong CSS

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).

Để không phức tạp, bạn có thể sử dụng thuộc tính pagination trong CSS. Giả sử tài liệu của bạn chỉ có các Header cấp độ 1 xuất hiện ở phần đầu mỗi chương mới (tức là Đầu đề cho mỗi chương mới) và các Header cấp độ 2 để biểu thị các khu vực (tức là Đầu đề cho các phần nội dung trong chương – Section Header). Nếu bạn muốn xác định rằng: mỗi khi có chương mới thì chương mới này sẽ xuất hiện trên Right Page và các Section Header sẽ không bị chia tách bởi một Page Break, bạn có thể làm như sau:

<style type="text/css">
    
</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">
    
</style>