Phương tiện được trang CSS - Quy tắc @ trang

Phương tiện phân trang khác với phương tiện liên tục ở chỗ nội dung của tài liệu được chia thành một hoặc nhiều trang rời rạc. Phương tiện được trang bao gồm giấy, giấy trong suốt, các trang được hiển thị trên màn hình máy tính, v.v.

Tiêu chuẩn CSS2 giới thiệu một số tính năng kiểm soát phân trang cơ bản cho phép các tác giả giúp trình duyệt tìm ra cách in tốt nhất tài liệu của họ.

Mô hình trang CSS2 chỉ định cách tài liệu được định dạng trong một khu vực hình chữ nhật - hộp trang - có chiều rộng và chiều cao hữu hạn. Các tính năng này được chia thành hai nhóm -

Các tính năng CSS2 xác định bố cục trang cụ thể.
Các tính năng CSS2 kiểm soát việc phân trang tài liệu.

Xác định trang: quy tắc @ trang

CSS2 định nghĩa một "hộp trang", một hộp có kích thước hữu hạn trong đó nội dung được hiển thị. Hộp trang là một vùng hình chữ nhật có hai vùng:

The page area- Vùng trang bao gồm các ô được bố trí trên trang đó. Các cạnh của vùng trang hoạt động như khối chứa ban đầu cho bố cục xảy ra giữa các ngắt trang.
The margin area - Nó bao quanh khu vực trang.

Bạn có thể chỉ định kích thước, hướng, lề, v.v. của hộp trang trong quy tắc @page. Kích thước của hộp trang được đặt bằng thuộc tính 'size'. Kích thước của vùng trang là kích thước của hộp trang trừ đi diện tích lề.

Ví dụ: quy tắc @page sau đặt kích thước hộp trang thành 8,5 × 11 inch và tạo lề '2cm' ở tất cả các bên giữa mép hộp trang và vùng trang -

<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 trong quy tắc @page để đặt lề cho trang của mình.

Cuối cùng, thuộc tính mark được sử dụng trong quy tắc @page để tạo các dấu cắt và đăng ký bên ngoài hộp trang trên trang mục tiêu. Theo mặc định, không có dấu nào được in. Bạn có thể sử dụng một hoặc cả hai cây trồng và chéo từ khóa để tạo vết cắt và vết đăng ký, tương ứng, trên trang mục tiêu in.

Đặt kích thước trang

Các kích thước tài sản xác định kích thước và hướng của một hộp trang. Có bốn giá trị có thể được sử dụng cho kích thước trang -

auto - Hộp trang sẽ được đặt thành kích thước và hướng của trang tính mục tiêu.
landscape- Ghi đè định hướng của mục tiêu. Hộp trang có cùng kích thước với mục tiêu và các cạnh dài hơn theo chiều ngang.
portrait- Ghi đè định hướng của mục tiêu. Hộp trang có cùng kích thước với mục tiêu và các cạnh ngắn hơn theo chiều ngang.
length- Giá trị độ dài cho thuộc tính 'size' tạo một hộp trang tuyệt đối. Nếu chỉ một giá trị độ dài được chỉ định, nó sẽ đặt cả chiều rộng và chiều cao của hộp trang. Giá trị phần trăm không được phép cho thuộc tính 'size'.

Trong ví dụ sau, các cạnh bên ngoài của hộp trang sẽ căn chỉnh với mục tiêu. Giá trị phần trăm trên thuộc tính 'margin' có liên quan đến kích thước mục tiêu, vì vậy nếu kích thước trang mục tiêu là 21,0cm × 29,7cm (tức là A4), lề là 2,10cm và 2,97cm.

<style type = "text/css">
   <!--
      @page {
         size: auto;   /* auto is the initial value */
         margin: 10%;
      }
   -->
</style>

Ví dụ sau đặt chiều rộng của hộp trang là 8,5 inch và chiều cao là 11 inch. Hộp trang trong ví dụ này yêu cầu kích thước trang tính mục tiêu là 8,5 "× 11" hoặc lớn hơn.

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

Khi bạn tạo một bố cục trang đã đặt tên, bạn có thể sử dụng nó trong tài liệu của mình bằng cách thêm thuộc tính trang vào một kiểu mà sau này được áp dụng cho một phần tử trong tài liệu của bạn. Ví dụ: kiểu này hiển thị tất cả các bảng trong tài liệu của bạn trên các trang ngang -

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

Do quy tắc trên, trong khi in, nếu trình duyệt gặp phần tử <table> trong tài liệu của bạn và bố cục trang hiện tại là bố cục dọc mặc định, nó sẽ bắt đầu một trang mới và in bảng trên trang ngang.

Các trang Trái, Phải và Đầu tiên

Khi in tài liệu hai mặt, các hộp trang trên các trang bên trái và bên phải phải khác nhau. Nó có thể được thể hiện qua hai lớp giả 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ể chỉ định kiểu cho trang đầu tiên của tài liệu với: lớp giả đầu tiên -

<style type = "text/css">
   <!--
      @page { margin: 2cm } /* All margins set to 2cm */

      @page :first {
         margin-top: 10cm    /* Top margin on first page 10cm */
      }
   -->
</style>

Kiểm soát phân trang

Trừ khi bạn chỉ định khác, ngắt trang chỉ xảy ra khi định dạng trang thay đổi hoặc khi nội dung tràn hộp trang hiện tại. Nếu không, để buộc hoặc ngăn ngắt trang, hãy sử dụng các thuộc tính ngắt trang trước, ngắt trang sau và ngắt trang bên trong .

Cả ngắt trang trước và ngắt trang sau đều chấp nhận các từ khóa tự động, luôn luôn, tránh, trái và phải .

Từ khóa tự động là mặc định, nó cho phép trình duyệt tạo ngắt trang khi cần. Từ khóa luôn buộc ngắt trang trước hoặc sau phần tử, trong khi tránh ngắt trang ngay trước hoặc sau phần tử. Các từ khóa bên trái và bên phải buộc ngắt một hoặc hai trang để phần tử được hiển thị trên trang bên trái hoặc bên phải.

Sử dụng thuộc tính phân trang khá đơn giản. Giả sử tài liệu của bạn có tiêu đề cấp 1 bắt đầu các chương mới với tiêu đề cấp 2 để biểu thị các phần. Bạn muốn mỗi chương bắt đầu trên một trang mới, bên tay phải, nhưng bạn không muốn các tiêu đề của phần bị tách ra khỏi ngắt trang so với nội dung tiếp theo. Bạn có thể đạt được điều này bằng cách sử dụng quy tắc sau:

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

Chỉ sử dụng các giá trị tự động và tránh với thuộc tính ngắt trang . Nếu bạn muốn các bảng của mình không bị chia nhỏ trên các trang nếu có thể, bạn sẽ viết quy tắc:

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

Kiểm soát góa phụ và trẻ mồ côi

Trong thuật ngữ đánh máy, chữ mồ côi là những dòng của đoạn văn bị mắc kẹt ở cuối trang do ngắt trang, trong khi phần phụ là những dòng còn lại ở đầu trang sau khi ngắt trang. Nói chung, các trang in trông không hấp dẫn với các dòng văn bản đơn lẻ ở trên cùng hoặc dưới cùng. Hầu hết các máy in cố gắng để lại ít nhất hai hoặc nhiều dòng văn bản ở đầu hoặc cuối mỗi trang.

Các orphans thuộc tính chỉ định số dòng tối thiểu của một đoạn văn phải được để ở cuối trang.
Các widows thuộc tính chỉ định số dòng tối thiểu của một đoạn văn phải được để ở đầu trang.

Đây là ví dụ để tạo 4 dòng ở cuối và 3 dòng ở đầu mỗi trang -

<style type = "text/css">
   <!--
      @page{orphans:4; widows:2;}
   -->
</style>