Tùy chỉnh kích thước trang in CSS

Phương tiện được phân trang -- giấy, phim trong suốt, các trang được hiển thị trên màn hình máy tính, v.v. -- khác ở chỗ các thuật toán định dạng cho các trang phải quản lý Để xử lý ngắt trang, CSS2 mở rộng mô hình hiển thị trực quan như sau

Mô hình trang CSS2 chỉ định cách tài liệu được định dạng trong vùng hình chữ nhật -- phần -- có chiều rộng và chiều cao hữu hạn. Hộp trang không nhất thiết phải tương ứng với trang tính thực nơi tài liệu sẽ được hiển thị cuối cùng (giấy, độ trong suốt, màn hình, v.v. ). Mô hình trang CSS chỉ định định dạng trong hộp trang nhưng tác nhân người dùng có trách nhiệm chuyển hộp trang sang trang tính. Một số khả năng chuyển giao bao gồm

  • Chuyển một ô trang thành một trang tính (e. g. , in một mặt)
  • Chuyển hai hộp trang sang cả hai mặt của cùng một trang tính (e. g. , in hai mặt)
  • Chuyển hộp trang A (nhỏ) sang một trang tính (được gọi là "in-up")
  • Chuyển một hộp trang (lớn) sang N x M trang tính (được gọi là "xếp gạch")
  • Tạo chữ ký. Chữ ký là một nhóm các trang được in trên một tờ giấy, khi được gấp lại và cắt xén như một cuốn sách, chúng sẽ xuất hiện theo đúng trình tự của chúng
  • In một tài liệu vào nhiều khay đầu ra
  • Xuất ra một tập tin

Mặc dù CSS2 không chỉ định cách tác nhân người dùng chuyển hộp trang sang trang tính, nhưng nó bao gồm một số cơ chế nhất định để thông báo cho tác nhân người dùng về trang đích

Hộp trang là một vùng hình chữ nhật chứa hai vùng nhúng

Tác giả chỉ định kích thước, hướng, lề, v.v. của hộp trang trong quy tắc @page

Ví dụ: quy tắc @page sau đặt lề của trang thành 2cm

   @page { margin: 2cm }

Các khai báo bên trong dấu ngoặc nhọn của quy tắc @page áp dụng cho mọi trang của tài liệu; . Tác giả chỉ định kích thước của hộp trang với thuộc tính. Thuộc tính được sử dụng để chỉ định cắt xén và đánh dấu chéo

( , , , , và ) áp dụng trong. Sơ đồ sau đây cho thấy mối quan hệ giữa trang tính, hộp trang và lề trang

Tùy chỉnh kích thước trang in CSS

Các quy tắc CSS2 cũng áp dụng cho lề trang. Ví dụ: lề của hộp đầu tiên trên trang sẽ thu gọn với lề trang

Không có khái niệm về phông chữ, vì vậy các đơn vị 'em' và 'ex' không được phép. Giá trị phần trăm trên thuộc tính lề có liên quan đến kích thước của. Tất cả các đơn vị khác được liên kết với các thuộc tính CSS2 tương ứng đều được phép

Do giá trị lề âm (trên hộp trang hoặc trên các phần tử) hoặc nội dung có thể nằm ngoài hộp trang nhưng nội dung này có thể bị "cắt" -- bởi tác nhân người dùng, máy in hoặc cuối cùng là máy cắt giấy

Thuộc tính này chỉ định kích thước và hướng của hộp trang

Kích thước của hộp trang có thể là "tuyệt đối" (kích thước cố định) hoặc "tương đối" (có thể mở rộng, tôi. e. , lắp các khổ tấm có sẵn). Hộp trang tương đối cho phép tác nhân người dùng chia tỷ lệ tài liệu và sử dụng tối ưu kích thước mục tiêu. Hộp trang tuyệt đối đảm bảo định dạng chính xác khi đó là đặc quyền của tác giả

Ba giá trị cho thuộc tính tạo hộp trang tương đối

hộp trang tự động sẽ được đặt thành kích thước và hướng của trang mục tiêu. landscapeGhi đè 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à hướng bố trí bình thường chạy song song với phía mục tiêu dài hơn. PortraitGhi đè 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à hướng bố cục bình thường chạy song song với phía mục tiêu ngắn hơn

Trong ví dụ sau, các cạnh bên ngoài của hộp trang sẽ thẳng hàng với mục tiêu. Giá trị phần trăm trên thuộc tính 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 x 29. 7cm (tôi. e. , A4), lề là 2. 10cm và 2. 97cm

  @page {
    size: auto;   /* auto is the initial value */
    margin: 10%;
  }

Giá trị độ dài cho thuộc tính tạo hộp trang tuyệt đối. Nếu chỉ có một giá trị chiều dài được chỉ định, nó sẽ đặt cả chiều rộng và chiều cao của hộp trang (i. e. , hình hộp là hình vuông). Vì hộp trang là , giá trị phần trăm không được phép cho thuộc tính

Ví dụ

  @page {
    size: 8.5in 11in;  /* width height */
  }

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

Tác nhân người dùng có thể cho phép người dùng kiểm soát việc chuyển hộp trang sang trang tính (e. g. , xoay hộp trang tuyệt đối đang được in)

Hiển thị các hộp trang không vừa với trang mục tiêu

Nếu hộp trang không vừa với kích thước trang mục tiêu, tác nhân người dùng có thể chọn

  • Xoay hộp trang 90� nếu điều này làm cho hộp trang vừa vặn
  • Chia tỷ lệ trang để phù hợp với mục tiêu

Tác nhân người dùng nên hỏi ý kiến ​​người dùng trước khi thực hiện các thao tác này

Định vị hộp trang trên trang tính

Khi hộp trang nhỏ hơn kích thước mục tiêu, tác nhân người dùng có thể tự do đặt hộp trang ở bất kỳ đâu trên trang tính. Tuy nhiên, bạn nên đặt hộp trang ở giữa trang tính vì điều này sẽ căn chỉnh các trang hai mặt và tránh vô tình làm mất thông tin được in gần mép trang tính

Khi in chất lượng cao, các dấu thường được thêm vào bên ngoài hộp trang. Thuộc tính này mô tả chỉ định xem dấu chéo hay dấu cắt hoặc cả hai sẽ được hiển thị ngay bên ngoài cạnh. Các giá trị có ý nghĩa như sau

dấu crossCrop cho biết nơi trang sẽ được cắt. dấu cắt xén (còn được gọi là dấu đăng ký hoặc dấu đăng ký) được sử dụng để căn chỉnh trang tính. noneKhông hiển thị bất kỳ dấu hiệu đặc biệt nào

Dấu hiệu chỉ hiển thị trên hộp trang tuyệt đối. Trong hộp trang tương đối, hộp trang sẽ được căn chỉnh với mục tiêu và các dấu sẽ nằm ngoài khu vực có thể in được

Kích thước, kiểu dáng và vị trí của dấu chéo phụ thuộc vào tác nhân người dùng

12. 2. 4 Trang trái, phải và đầu tiên

Khi in tài liệu hai mặt, trang bên trái và bên phải sẽ khác nhau. Điều này có thể được thể hiện thông qua hai lớp giả CSS có thể được định nghĩa trong

Tất cả các trang được tự động phân loại bởi tác nhân người dùng vào một trong hai. trái hoặc. lớp giả bên phải

  @page :left {
    margin-left: 4cm;
    margin-right: 3cm;
  }

  @page :right {
    margin-left: 3cm;
    margin-right: 4cm;
  }

Nếu các khai báo khác nhau đã được đưa ra cho các trang bên trái và bên phải, tác nhân người dùng phải tôn trọng các khai báo này ngay cả khi tác nhân người dùng không chuyển các hộp trang sang trang bên trái và bên phải (e. g. , máy in chỉ in một mặt)

Tác giả cũng có thể chỉ định phong cách cho trang đầu tiên của tài liệu với. lớp giả đầu tiên

  @page { margin: 2cm } /* All margins set to 2cm */

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

Cho dù trang đầu tiên của một tài liệu là. trái hoặc. bên phải phụ thuộc vào hướng viết chính của tài liệu và nằm ngoài phạm vi của tài liệu này. Tuy nhiên, để buộc một. trái hoặc. ngay trang đầu tiên, tác giả có thể chèn dấu ngắt trang trước hộp được tạo đầu tiên (e. g. , trong HTML, chỉ định điều này cho phần tử BODY)

Các thuộc tính được chỉ định trong một. trái (hoặc. đúng) Quy tắc @page ghi đè những quy tắc được chỉ định trong quy tắc @page không có lớp giả được chỉ định. Các thuộc tính được chỉ định trong một. quy tắc @page đầu tiên ghi đè những quy tắc được chỉ định trong. trái (hoặc. đúng) quy tắc @page

Ghi chú. Thêm khai báo vào. trái hoặc. lớp giả bên phải không ảnh hưởng đến việc tài liệu được in ra hai mặt hay một mặt (nằm ngoài phạm vi của thông số kỹ thuật này)

Ghi chú. Các phiên bản CSS trong tương lai có thể bao gồm các lớp giả trang khác

12. 2. 5 Nội dung bên ngoài hộp trang

Khi định dạng nội dung trong mô hình trang, một số nội dung có thể nằm ngoài hộp trang. Ví dụ: một phần tử có thuộc tính có giá trị 'pre' có thể tạo hộp rộng hơn hộp trang. Ngoài ra, khi các hộp được định vị hoặc , chúng có thể kết thúc ở những vị trí "không thuận tiện". Ví dụ: hình ảnh có thể được đặt trên cạnh của hộp trang hoặc 100.000 inch bên dưới hộp trang

Thông số kỹ thuật cho định dạng chính xác của các phần tử đó nằm ngoài phạm vi của tài liệu này. Tuy nhiên, chúng tôi khuyên các tác giả và tác nhân người dùng nên tuân thủ các nguyên tắc chung sau đây liên quan đến nội dung bên ngoài hộp trang

  • Nội dung nên được cho phép vượt ra ngoài hộp trang một chút để cho phép các trang "chảy máu"
  • Tác nhân người dùng nên tránh tạo ra một số lượng lớn các hộp trang trống để tôn trọng vị trí của các phần tử (e. g. , bạn không muốn in 100 trang trắng). Tuy nhiên, lưu ý rằng việc tạo một số lượng nhỏ các hộp trang trống có thể cần thiết để tôn trọng các giá trị 'trái' và 'phải' cho và
  • Tác giả không nên đặt các phần tử ở những vị trí bất tiện như một phương tiện để tránh đặt chúng ra ngoài. Thay thế
    • Để chặn hoàn toàn việc tạo hộp, hãy đặt thuộc tính thành 'không'
    • Để ẩn một hộp, hãy sử dụng thuộc tính
  • Tác nhân người dùng có thể xử lý các hộp được đặt bên ngoài hộp trang theo nhiều cách, bao gồm loại bỏ chúng hoặc tạo hộp trang cho chúng ở cuối tài liệu

Các phần sau giải thích định dạng trang trong CSS2. Bốn thuộc tính cho biết nơi tác nhân người dùng có thể hoặc nên ngắt trang và trên trang nào (trái hoặc phải) nội dung tiếp theo sẽ tiếp tục. Mỗi lần ngắt trang kết thúc bố cục ở hiện tại và làm cho các phần còn lại của bố cục được bố trí trong hộp trang mới

Các giá trị cho các thuộc tính này có ý nghĩa như sau

tự độngKhông bắt buộc cũng không cấm ngắt trang trước (tương ứng. , sau) hộp được tạo. luônLuôn luôn buộc ngắt trang trước (tương ứng. , sau) hộp được tạo. tránhTránh ngắt trang trước (tương ứng. , sau) hộp được tạo. trái (Để hiển thị sang trang bên trái và bên phải. ) Buộc ngắt một hoặc hai trang trước (tương ứng. , sau) hộp được tạo để trang tiếp theo được định dạng là trang bên trái. phải (Để hiển thị sang trang bên trái và bên phải. ) Buộc ngắt một hoặc hai trang trước (tương ứng. , sau) hộp được tạo để trang tiếp theo được định dạng là trang phù hợp

Khi cả hai thuộc tính có các giá trị khác với 'tự động', các giá trị 'luôn luôn', 'trái' và 'phải' sẽ được ưu tiên hơn 'tránh'. Xem phần trên để biết các quy tắc chính xác về cách các giá trị này buộc hoặc triệt tiêu ngắt trang

Các thuộc tính này chỉ định số dòng tối thiểu của một đoạn văn phải được đặt ở dưới cùng () và trên cùng () của trang (xem phần trên để biết thông tin về định dạng đoạn văn)

Trong quy trình bình thường, ngắt trang có thể xảy ra ở những nơi sau

Những giờ nghỉ này tuân theo các quy tắc sau

  1. Việc ngắt ở (1) chỉ được phép nếu thuộc tính và của tất cả các phần tử tạo hộp đáp ứng ở lề này cho phép, đó là khi ít nhất một trong số chúng có giá trị 'luôn luôn', 'trái' hoặc 'phải',
  2. Ngắt tại (2) chỉ được phép nếu số lượng giữa khoảng ngắt và bắt đầu khối là hoặc nhiều hơn và số ô dòng giữa khoảng ngắt và cuối của khối là hoặc nhiều hơn

Có một ngoại lệ cho cả hai quy tắc

  1. Ngắt tại (1) và (2) cũng được phép nếu giữa ngắt trang cuối cùng và ngắt trang tiếp theo sẽ được phép trong (A) và (B), có quá nhiều nội dung không thể vừa trong một trang.

Ngắt trang không thể xảy ra bên trong các hộp được

12. 3. 3 Buộc ngắt trang

Ngắt trang phải xảy ra tại (1) nếu trong số và thuộc tính của tất cả các phần tử tạo hộp đáp ứng ở lề này, có ít nhất một hộp có giá trị 'always', 'left' hoặc 'right'

12. 3. 4 ngắt trang "Tốt nhất"

CSS không xác định phải sử dụng bộ ngắt trang nào trong số các ngắt trang được phép; . Nhưng CSS khuyến nghị rằng các tác nhân người dùng nên tuân thủ các phương pháp phỏng đoán sau (đồng thời nhận ra rằng chúng đôi khi trái ngược nhau)

  • Phá vỡ càng ít lần càng tốt
  • Làm cho tất cả các trang không kết thúc bằng ngắt bắt buộc dường như có cùng chiều cao
  • Tránh phá vỡ bên trong một khối có đường viền
  • Tránh phá vỡ bên trong một cái bàn
  • Tránh phá vỡ bên trong một phần tử nổi

Ví dụ: giả sử =4, =2 và có 20 dòng ( có sẵn ở cuối trang hiện tại

  • Nếu một đoạn ở cuối trang hiện tại có 20 dòng hoặc ít hơn, thì nó sẽ được đặt trên trang hiện tại
  • Nếu đoạn văn chứa 21 - 22 dòng, phần thứ hai của đoạn văn không được vi phạm ràng buộc và do đó, phần thứ hai phải chứa chính xác hai dòng
  • Nếu đoạn văn có 23 dòng trở lên, phần đầu tiên phải chứa 20 dòng và phần thứ hai là các dòng còn lại

Bây giờ giả sử rằng =10, =20, và có 8 dòng ở cuối trang hiện tại

  • Nếu một đoạn ở cuối trang hiện tại có 8 dòng hoặc ít hơn, nó sẽ được đặt trên trang hiện tại
  • Nếu đoạn văn chứa 9 dòng trở lên, thì nó không thể được chia (điều đó sẽ vi phạm ràng buộc mồ côi), vì vậy nó sẽ di chuyển dưới dạng một khối sang trang tiếp theo

12. 4 Xếp tầng trong ngữ cảnh trang

Các khai báo trong tuân theo tầng giống như các khai báo CSS2 thông thường

Xem xét ví dụ sau

  @page {
    margin-left: 3cm;
  }

  @page :left {
    margin-left: 4cm;
  }

Do bộ chọn lớp giả, lề trái trên các trang bên trái sẽ là '4cm' và tất cả các trang khác (i. e. , các trang bên phải) sẽ có lề trái là '3cm'

Làm cách nào để đặt kích thước trang trong CSS?

Ví dụ về chiều cao và chiều rộng của CSS .
Set the height and width of a
element: div { height: 200px; width: 50%; .. .
Set the height and width of another
element: div { height: 100px; width: 500px; .. .
This
element has a height of 100 pixels and a max-width of 500 pixels: div { max-width: 500px; height: 100px;.

Chúng tôi có thể áp dụng CSS cho trang để in không?

Bạn có thể sử dụng CSS để thay đổi giao diện của trang web khi được in trên giấy . Bạn có thể chỉ định một phông chữ cho phiên bản màn hình và một phông chữ khác cho phiên bản in.

Làm cách nào để sử dụng CSS để in?

Công cụ dành cho nhà phát triển . Trong Chrome, mở Công cụ dành cho nhà phát triển và chọn Công cụ khác, sau đó chọn Kết xuất từ ​​menu biểu tượng ba chấm ở trên cùng bên phải. Thay đổi Phương tiện giả lập CSS để in ở cuối bảng điều khiển đó.

Làm cách nào để kiểm tra CSS in?

css. Mở trình duyệt và làm mới trang. Nhấp chuột phải và chọn In > Xem trước bản in (Firefox, nhưng thực sự là bất kỳ trình duyệt nào) .
Mở Menu lệnh. ( tl;dr Cmd+Shift+P (Mac) hoặc Ctrl+Shift+P (Windows, Linux))
Bắt đầu nhập Rendering và chọn Show Rendering
Đối với trình đơn thả xuống Giả lập Phương tiện CSS, hãy chọn in