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ì
Trang 1Qui 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
Trang 2Ngoà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>
Trang 3Sau 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
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" > <! @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>
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óaalways 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à
Trang 4rightbuộ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" > <! 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>
