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