In thư viện CSS

“Ma thuật” nằm trong media=”print”, tệp CSS này sẽ chỉ được trình duyệt sử dụng khi bạn in. Bạn cũng có thể sử dụng nó bên trong CSS như. @media in {. }

Công việc duy nhất bạn cần làm là ẩn những thứ bạn không cần trong bản in cuối cùng. Về cơ bản, bạn ẩn một số id và lớp trong CSS như

Rachel Andrew là nhà phát triển web, nhà văn và diễn giả. Cô ấy là tác giả của một số cuốn sách, bao gồm Bố cục CSS mới. Cô ấy là một trong những người đứng sau … Thông tin thêm về Rachel ↬

Bản tin email

Email (đập vỡ) của bạn

Mẹo hàng tuần về front-end & UX
Được hơn 200.000 người tin cậy

• Giao diện người dùng SmashingConf 2023

• Chuẩn bị cho các vai trò giao tiếp ngày nay Thạc sĩ Thiết kế Thông tin của Northwestern

• Lớp học tổng thể về nguyên tắc phổ quát của kiểu chữ với Elliot Jay Stocks

• Hệ thống thiết kế thành công

• Danh sách kiểm tra thiết kế giao diện thông minh

Nếu nhắc đến in bằng CSS với nhiều người làm web, thì print style sheet là công dụng được nghĩ đến nhiều nhất. Tất cả chúng ta đã quen với việc tạo một biểu định kiểu được gọi khi tài liệu web được in. Các biểu định kiểu này đảm bảo rằng phiên bản in dễ đọc và chúng tôi không khiến người dùng in ra những hình ảnh lớn

Nếu nhắc đến in bằng CSS với nhiều người làm web, thì print style sheet là công dụng được nghĩ đến nhiều nhất. Tất cả chúng ta đã quen với việc tạo một biểu định kiểu được gọi khi tài liệu web được in. Các biểu định kiểu này đảm bảo rằng phiên bản in dễ đọc và chúng tôi không khiến người dùng in ra những hình ảnh lớn. Tuy nhiên, CSS cũng đang được sử dụng để định dạng sách, danh mục và tài liệu quảng cáo — nội dung có thể chưa bao giờ được thiết kế để trở thành một trang web

Trong bài viết này, chúng ta sẽ xem xét các mô-đun CSS đã được tạo không phải để sử dụng trong trình duyệt web mà để xử lý phương tiện được in và phân trang. Tôi sẽ giải thích cách bộ chọn, thuộc tính và giá trị mà chúng giới thiệu hoạt động. Tôi sẽ kết thúc bằng một ví dụ hoạt động mà bạn có thể sử dụng làm điểm bắt đầu cho các thử nghiệm của riêng mình. Ví dụ, chúng tôi sẽ cần một tác nhân người dùng hỗ trợ CSS chuyên dụng này. Tôi sẽ sử dụng Prince, một sản phẩm thương mại. Tuy nhiên, Prince có một phiên bản miễn phí có thể được sử dụng cho mục đích phi thương mại, làm cho nó trở thành một công cụ tốt để thử các ví dụ này

Đọc thêm trên SmashingMag.

• Thiết kế để in bằng CSS
• 5 mẹo và thủ thuật mạnh mẽ để in các biểu định kiểu
• Biệt ngữ ngành thiết kế web. Thuật ngữ và Tài nguyên
• Đưa thư viện mẫu lên cấp độ tiếp theo

Tại sao HTML và CSS lại có ý nghĩa đối với việc in ấn

Có vẻ hơi lạ khi nội dung không dành riêng cho web nên được duy trì dưới dạng HTML và được định dạng bằng CSS. Có vẻ ít lạ hơn khi bạn nhận ra rằng các định dạng sách điện tử phổ biến như EPUB và MOBI là HTML và CSS ẩn dưới vỏ bọc. Ngoài ra, ngay cả khi toàn bộ bản thảo hoặc danh mục không được xuất bản trên một trang web, một số trong số đó có thể sẽ bị. HTML trở thành một định dạng tiện dụng để chuẩn hóa, dễ xử lý hơn nhiều so với việc có mọi thứ trong tài liệu Word hoặc gói xuất bản trên máy tính để bàn truyền thống

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Gặp gỡ Hội thảo trực tuyến Smashing về giao diện người dùng & giao diện người dùng, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Stephanie Troeth và rất nhiều người khác

Chuyển đến hội thảo ↬

Sự khác biệt giữa CSS dành cho web và CSS in

Sự khác biệt lớn nhất và sự thay đổi về khái niệm là các tài liệu in đề cập đến một mô hình trang có kích thước cố định. Trong khi trên web, chúng tôi liên tục được nhắc nhở rằng chúng tôi không biết về kích thước của khung nhìn, thì trong bản in, kích thước cố định của mỗi trang có ảnh hưởng đến mọi thứ chúng tôi làm. Do kích thước trang cố định này, chúng tôi phải coi tài liệu của mình là một tập hợp các trang, phương tiện được phân trang, thay vì phương tiện liên tục là một trang web

Phương tiện phân trang giới thiệu các khái niệm vô nghĩa trên web. Ví dụ: bạn cần có khả năng tạo số trang, đặt tiêu đề chương vào lề, chia nhỏ nội dung một cách thích hợp để các số liệu không bị tách rời khỏi chú thích của chúng. Bạn có thể cần tạo các tham chiếu chéo và chú thích, chỉ mục và bảng nội dung từ tài liệu của mình. Bạn có thể nhập tài liệu vào gói xuất bản trên máy tính để bàn và tạo tất cả những thứ này bằng tay, tuy nhiên, công việc sau đó sẽ cần thực hiện lại vào lần tiếp theo bạn cập nhật bản sao. Đây là nơi CSS xuất hiện, có thông số kỹ thuật được thiết kế để sử dụng trong việc tạo phương tiện được phân trang

Bởi vì các thông số kỹ thuật được thiết kế cho phương tiện được phân trang, chúng tôi sẽ không xem xét hỗ trợ trình duyệt trong bài viết này - nó sẽ không có nhiều ý nghĩa. Sau này, chúng ta sẽ xem xét một tác nhân người dùng được thiết kế để biến HTML và CSS của bạn thành PDF bằng cách sử dụng các thông số kỹ thuật này

Thông số kỹ thuật

Phần lớn CSS bạn đã biết sẽ hữu ích cho việc định dạng để in. Cụ thể để in, chúng tôi có thông số kỹ thuật “Mô-đun phương tiện được phân trang CSS” và “Nội dung do CSS tạo cho mô-đun phương tiện được phân trang”. Hãy xem cách chúng hoạt động

Quy tắc @trang

Quy tắc

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

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

6 cho phép bạn chỉ định các khía cạnh khác nhau của hộp trang. Ví dụ: bạn sẽ muốn chỉ định kích thước của các trang của mình. Quy tắc bên dưới chỉ định kích thước trang mặc định là 5. 5 nhân 8. 5 inch. Nếu bạn định in một cuốn sách, có lẽ bằng dịch vụ in theo yêu cầu, thì việc tìm ra các kích thước bạn có thể sử dụng là rất quan trọng

@page {
  size: 5.5in 8.5in;
}

Ngoài việc chỉ định kích thước với các giá trị chiều dài, bạn cũng có thể sử dụng các từ khóa kích thước giấy, chẳng hạn như “A4” hoặc “legal. ”

@page {
  size: A4;
}

Bạn cũng có thể sử dụng từ khóa để chỉ định hướng của trang - “dọc” hoặc “ngang”. ”

@page {
  size: A4 landscape;
}

Hiểu mô hình trang

Trước khi tiếp tục, chúng ta nên hiểu mô hình trang cho phương tiện được phân trang hoạt động như thế nào, bởi vì nó hoạt động hơi khác so với cách mọi thứ hoạt động trên màn hình

Mô hình trang xác định một khu vực trang và sau đó 16 xung quanh. Bạn có thể kiểm soát kích thước của vùng trang và kích thước của lề giữa cạnh của vùng trang và cuối trang. Bảng trong thông số kỹ thuật giải thích rất rõ kích thước của các hộp này

(Xem bản lớn)

Vùng trang là không gian trên trang mà nội dung trang của bạn sẽ chảy vào. Hết chỗ sẽ lập trang khác. Các hộp lề chỉ được sử dụng cho nội dung do CSS tạo

Trải rộng trang trái và phải

Một khía cạnh khác của mô hình trang là nó định nghĩa các bộ chọn lớp giả cho các trang bên trái và bên phải của tài liệu của bạn. Nếu bạn nhìn vào bất kỳ cuốn sách in nào bạn có trong tay, có thể bạn sẽ thấy rằng kích thước của lề và nội dung của lề là khác nhau ở các trang bên trái và bên phải

Chúng tôi có thể sử dụng các bộ chọn này để xác định các kích thước lề khác nhau cho các trang của mình

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

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

Hai bộ chọn lớp giả khác được xác định. Bộ chọn

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

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

7 nhắm mục tiêu trang đầu tiên của tài liệu

@page :first {

}

Bộ chọn lớp giả

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

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

8 nhắm mục tiêu bất kỳ trang nào “cố ý để trống. ” Để thêm văn bản này, chúng tôi có thể sử dụng nội dung được tạo nhắm mục tiêu hộp lề trên cùng ở giữa

________số 8_______

Nội dung được tạo và phương tiện được phân trang

Trong ví dụ trước, chúng tôi đã sử dụng nội dung do CSS tạo để thêm văn bản vào hộp lề trên cùng ở giữa. Như bạn sẽ khám phá ra, nội dung được tạo ra là cực kỳ quan trọng để tạo ra cuốn sách của chúng tôi. Đó là cách duy nhất để mọi thứ có thể được thêm vào hộp bên lề của chúng tôi. Ví dụ: nếu chúng tôi muốn thêm tên sách vào hộp lề dưới cùng bên trái của các trang bên phải, chúng tôi sẽ thực hiện việc này bằng cách sử dụng nội dung được tạo

@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

ngắt trang

Ngoài ra, một phần của thông số kỹ thuật “Phương tiện được phân trang” là thông tin về cách kiểm soát ngắt trang. Như đã mô tả, khi nội dung lấp đầy một vùng trang, nó sẽ chuyển sang một trang mới. Nếu một tiêu đề vừa được viết vào trang, bạn có thể kết thúc với một trang kết thúc bằng một tiêu đề, với nội dung liên quan bắt đầu ở trang tiếp theo. Trong một cuốn sách in, bạn sẽ cố gắng tránh tình huống này. Những nơi khác mà bạn có thể muốn tránh ngắt quãng là ở giữa bàn và giữa một hình và chú thích của nó

Bắt đầu một chương mới của một cuốn sách với tiêu đề

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

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

9 là phổ biến. Để buộc tiêu đề này luôn ở đầu trang, hãy đặt

@page :first {

}

0 thành

@page :first {

}

1

h1 {
  page-break-before: always;
}

Để tránh ngắt quãng ngay sau tiêu đề, hãy sử dụng

@page :first {

}

2

h1, h2, h3, h4, h5 {
  page-break-after: avoid;
}

Để tránh phá vỡ các hình và bảng, hãy sử dụng thuộc tính

@page :first {

}

3

table, figure {
  page-break-inside: avoid;
}

quầy

Sách là về đánh số mọi thứ - trang, chương, thậm chí cả số liệu. Chúng tôi thực sự có thể thêm những con số này thông qua CSS, giúp chúng tôi không phải đánh số lại mọi thứ vì chúng tôi đã quyết định thêm một con số mới vào giữa chương. Chúng tôi làm điều này bằng cách sử dụng bộ đếm CSS

Nơi rõ ràng để bắt đầu là với số trang. CSS cung cấp cho chúng tôi bộ đếm trang được xác định trước; . Trong biểu định kiểu của bạn, bạn sẽ sử dụng bộ đếm này làm giá trị của nội dung được tạo, để đặt bộ đếm trang vào một trong các hộp bên lề của bạn. Trong ví dụ bên dưới, chúng tôi đang thêm số trang vào phía dưới bên phải của trang bên phải và phía dưới bên trái của trang bên trái

@page {
  size: A4;
}

0

Chúng tôi cũng đã tạo một bộ đếm có tên là

@page :first {

}

4. Bộ đếm này sẽ luôn là tổng số trang trong tài liệu của bạn. Nếu bạn muốn xuất “Page 3 of 120,” bạn có thể

@page {
  size: A4;
}

1

Bạn có thể tạo bộ đếm được đặt tên của riêng mình và tăng và đặt lại chúng khi bạn yêu cầu. Để tạo một bộ đếm, hãy sử dụng thuộc tính

@page :first {

}

5, tăng nó với

@page :first {

}

6. Các quy tắc CSS bên dưới sẽ tạo bộ đếm cho các chương có tên

@page :first {

}

7 và tăng nó với mỗi

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

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

9 — là phần bắt đầu của một chương trong cuốn sách này. Sau đó, chúng tôi sử dụng giá trị của bộ đếm đó trong nội dung được tạo để thêm số chương và dấu chấm trước tiêu đề thực của chương

@page {
  size: A4;
}

2

Chúng ta có thể làm tương tự cho các số liệu trong cuốn sách. Một cách phổ biến để đánh số các số liệu là sử dụng

@page :first {

}

9. Vì vậy, “Hình 3-2” sẽ là hình thứ hai trong chương 3. Trên

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

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

9, chúng ta có thể đặt lại

@page :blank {
  @top-center { content: "This page is intentionally left blank." }
}

1 để nó bắt đầu từ 1 cho mỗi chương

@page {
  size: A4;
}

3

Đặt chuỗi

Hãy nhìn vào một cuốn sách in một lần nữa. Khi lướt qua một chương, có thể bạn sẽ thấy tiêu đề của chương đó được in ở trang bên trái hoặc bên phải. Nghe có vẻ kỳ lạ, thông số kỹ thuật “Nội dung được tạo cho phương tiện được phân trang” cho phép chúng tôi đạt được điều này bằng cách sử dụng CSS

Chúng tôi thực hiện việc này bằng cách sử dụng thuộc tính có tên

@page :blank {
  @top-center { content: "This page is intentionally left blank." }
}

2 trong bộ chọn mà chúng tôi muốn lấy nội dung từ đó. Đối với tiêu đề chương, đây sẽ là

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

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

9. Giá trị của

@page :blank {
  @top-center { content: "This page is intentionally left blank." }
}

2 là tên bạn muốn đặt cho nội dung này và sau đó là

@page :blank {
  @top-center { content: "This page is intentionally left blank." }
}

5. Sau đó, bạn có thể xuất nội dung này dưới dạng nội dung được tạo bằng cách sử dụng

@page :blank {
  @top-center { content: "This page is intentionally left blank." }
}

6

@page {
  size: A4;
}

4

Khi phương tiện được phân trang của bạn được tạo, mỗi khi một

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

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

9 xảy ra, nội dung được ghi vào

@page :blank {
  @top-center { content: "This page is intentionally left blank." }
}

8 và sau đó được xuất ra trong hộp lề trên cùng bên phải của các trang bên phải, chỉ thay đổi khi một

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

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

9 khác xảy ra

chú thích

Chú thích cuối trang là một phần của đặc tả “”. Cách thức hoạt động của chú thích cuối trang là bạn sẽ thêm nội dung của chú thích cuối trang, được bao bọc trong các thẻ HTML (có thể là một khoảng), với một lớp để xác định nó là chú thích cuối trang. Khi trang được tạo, nội dung của “phần tử chú thích cuối trang” đó sẽ bị xóa và chuyển thành chú thích cuối trang

Trong CSS của bạn, hãy sử dụng giá trị chú thích cuối trang của thuộc tính

@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

0 để tạo quy tắc cho lớp chú thích cuối trang của bạn

@page {
  size: A4;
}

5

Trong tài liệu của bạn, hãy sử dụng lớp đó để bọc bất kỳ văn bản chú thích cuối trang nào

@page {
  size: A4;
}

6

Chú thích có bộ đếm được xác định trước hoạt động giống như bộ đếm trang. Thông thường, bạn sẽ muốn tăng bộ đếm lên 1 mỗi khi lớp

@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

1 xuất hiện và đặt lại nó ở đầu mỗi chương

@page {
  size: A4;
}

7

Các phần khác nhau của chú thích cuối trang có thể được nhắm mục tiêu bằng các phần tử giả CSS.

@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

2 là neo số trong văn bản cho biết có chú thích cuối trang. Điều này sử dụng giá trị của bộ đếm chú thích dưới dạng nội dung được tạo

@page {
  size: A4;
}

8

@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

3 là điểm đánh số được đặt ở phía trước văn bản chú thích cuối trang ở cuối tài liệu của bạn. Chúng hoạt động theo cách tương tự với các số được tạo cho danh sách có thứ tự trong CSS

@page {
  size: A4;
}

9

Bản thân các chú thích cuối trang được đặt ở lề, trong một khu vực đặc biệt của trang có tên

@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

4. Bạn sẽ nhắm mục tiêu và tạo kiểu cho khu vực đó như sau

@page {
  size: A4 landscape;
}

0

Tham chiếu chéo

Trước khi chuyển sang một ví dụ hoạt động về mọi thứ chúng ta đã học, hãy xem xét các tham chiếu chéo. Trên web, chúng tôi tham khảo chéo mọi thứ bằng cách thêm liên kết. Trong một cuốn sách hoặc tài liệu in khác, thông thường bạn sẽ tham khảo số trang nơi tìm thấy tài liệu tham khảo đó. Bởi vì số trang có thể thay đổi theo định dạng mà sách được in — và giữa các lần xuất bản — thực hiện việc này với CSS giúp chúng tôi không phải xem lại và thay đổi tất cả các số

Chúng tôi sử dụng một tài sản mới khác,

@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

5, để thêm những con số này. Bắt đầu bằng cách tạo các liên kết trong tài liệu của bạn, cung cấp cho chúng một

@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

6, là ID của phần tử trong tài liệu mà bạn muốn nhắm mục tiêu. Ngoài ra, hãy thêm một lớp để xác định chúng dưới dạng tham chiếu chéo, thay vì liên kết bên ngoài;

@page {
  size: A4 landscape;
}

1

Sau đó, sau liên kết, hãy sử dụng lại nội dung đã tạo để xuất ra

@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

8, trong đó

@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

9 là số vị trí trong sách mà ID đó có thể được tìm thấy

@page {
  size: A4 landscape;
}

2

Chúng ta sẽ xem xét kỹ thuật này trong thực tế khi tạo mục lục cho ví dụ đang hoạt động

Để tất cả chúng cùng nhau. Một cuốn sách ví dụ

Chúng tôi đã xem xét rất nhiều tài sản khác nhau ở đây một cách riêng biệt. Chúng có ý nghĩa hơn khi bạn đưa chúng vào sử dụng bằng cách xây dựng một cuốn sách

Để thực sự tạo một cuốn sách bằng CSS này, bạn sẽ cần một tác nhân người dùng hỗ trợ nó. Hiện tại, rất ít thứ thực hiện tốt thông số kỹ thuật này; . Giấy phép thương mại độc lập cho Prince rất đắt, tuy nhiên, bạn có thể sử dụng Prince miễn phí cho các dự án phi thương mại. Điều này có nghĩa là nếu bạn chỉ muốn thử những kỹ thuật này, bạn có thể. Ngoài ra, nếu bạn có mục đích sử dụng phi thương mại cho công nghệ này, bạn có thể sử dụng Prince để định dạng những cuốn sách đó

Tôi đã trích đoạn từ một trong những cuốn sách yêu thích của tôi về Dự án Gutenberg, Những chú mèo của chúng tôi bởi Harrison Weir. Tôi đã chọn cuốn sách này vì tôi thích mèo và vì nó có hình ảnh và chú thích mà tôi có thể sử dụng để minh họa định dạng

Bạn có thể tìm thấy các tệp tôi đang sử dụng, cùng với tệp PDF đã tạo, trên GitHub. Nếu bạn muốn thử nghiệm CSS và tự xây dựng cuốn sách, thì bạn cần tải xuống và cài đặt Prince. Prince là một công cụ dòng lệnh trên Mac và mặc dù có GUI của Windows nhưng tôi sẽ sử dụng dòng lệnh vì nó thực sự rất đơn giản

Sử dụng cửa sổ Terminal, chuyển sang thư mục sách của bạn hoặc vị trí bạn đã tải xuống các tệp của tôi từ GitHub

@page {
  size: A4 landscape;
}

3

Bây giờ, chạy Hoàng tử

@page {
  size: A4 landscape;
}

4

Điều này sẽ tạo một tệp PDF trong thư mục

h1 {
  page-break-before: always;
}

0 có tên

h1 {
  page-break-before: always;
}

1. Bây giờ, nếu bạn thực hiện bất kỳ thay đổi nào đối với CSS hoặc HTML, bạn có thể chạy Prince để xem có gì khác biệt

Tài liệu HTML

Toàn bộ “cuốn sách” của tôi được biên soạn trong một tài liệu HTML duy nhất. Có thể biên dịch tài liệu trong Prince, nhưng tôi thấy đơn giản hơn khi chỉ xử lý một tài liệu lớn. Trước các chương bắt đầu bằng

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

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

9, tôi có một div chứa ảnh bìa và sau đó là mục lục của cuốn sách

Mục lục liên kết đến ID của các tiêu đề

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

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

9 của chương

@page {
  size: A4 landscape;
}

5

Sau đó, CSS sử dụng tất cả những thứ chúng tôi đã mô tả cho đến nay. Để bắt đầu, chúng ta cần thiết lập kích thước cho cuốn sách bằng quy tắc

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

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

6. Sau đó, chúng tôi sử dụng bộ chọn lớp giả

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

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

7 để xóa lề trên trang 1, vì trang này sẽ có ảnh bìa

@page {
  size: A4 landscape;
}

6

Sau đó, chúng tôi xử lý hình ảnh cho trang bìa, đảm bảo rằng hình ảnh bao phủ toàn bộ khu vực trang

@page {
  size: A4 landscape;
}

7(Xem bản lớn)

Tiếp theo, chúng tôi giải quyết các chi tiết cụ thể của các trang bên trái và bên phải, sử dụng các lớp giả trải rộng

h1 {
  page-break-before: always;
}

6 và

h1 {
  page-break-before: always;
}

7

Trải rộng bên phải sẽ có tên sách ở hộp lề dưới cùng bên trái, bộ đếm trang ở dưới cùng bên phải và tiêu đề của chương ở trên cùng bên phải. Tiêu đề của chương được đặt bằng cách sử dụng

@page :blank {
  @top-center { content: "This page is intentionally left blank." }
}

2 ở phía dưới biểu định kiểu

@page {
  size: A4 landscape;
}

8(Xem bản lớn)

Trải rộng bên trái có tên sách ở dưới cùng bên phải và bộ đếm trang ở dưới cùng bên trái

@page {
  size: A4 landscape;
}

9(Xem bản lớn)

Đối với trang đầu tiên chứa ảnh bìa, chúng tôi sẽ đảm bảo rằng không có nội dung được tạo nào xuất hiện bằng cách đặt nó thành

h1 {
  page-break-before: always;
}

9

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

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

0

Phần tiếp theo của biểu định kiểu liên quan đến bộ đếm. Ngoài bộ đếm trang đặt trước, chúng tôi đang xác định bộ đếm cho các chương và số liệu

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

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

1

Các chương hiện có số của chúng được đặt trước tiêu đề. Số liệu cũng hiển thị số của họ

(Xem bản lớn)

Chúng tôi tạo chú thích cuối trang như trong phần giải thích trước đó, ghi chú lên trên cuộc gọi của chú thích cuối trang

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

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

2(Xem bản lớn)

Sau đó, chúng tôi thêm một số quy tắc để kiểm soát vị trí ngắt trang. Bạn cần khá cẩn thận về việc quá nặng tay với điều này. Nếu cuốn sách của bạn có nhiều bảng biểu và số liệu, thì việc thêm nhiều quy tắc cụ thể vào đây có thể khiến cuốn sách trở nên dài lê thê. Thử nghiệm và thử nghiệm sẽ cho thấy bạn có thể kiểm soát thời gian nghỉ bao xa. Tôi đã tìm thấy các quy tắc dưới đây là một điểm khởi đầu tốt

Hãy nhớ rằng đây là một gợi ý cho tác nhân người dùng. Trong một số trường hợp, sẽ không thể giữ cho bảng không bị vỡ nếu bảng không vừa với một trang

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

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

3

Cuối cùng, chúng tôi tạo kiểu cho mục lục và chúng tôi sử dụng một thủ thuật thú vị ở đây. Khi mô tả các tham chiếu chéo, tôi đã giải thích cách chúng tôi sử dụng

@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

5 để hiển thị số trang có ID. Đây là những gì chúng tôi sẽ làm cho mục lục của chúng tôi. Quy tắc dưới đây đặt số trang sau liên kết đến mỗi chương trong mục lục

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

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

4(Xem bản lớn)

Tuy nhiên, thông thường trong sách, bạn sẽ sử dụng dấu chấm đầu dòng để sắp xếp tất cả các số trang so với lề phải. Thật ngạc nhiên, CSS cung cấp cho chúng tôi một cách để làm điều này, bằng cách thêm

h1, h2, h3, h4, h5 {
  page-break-after: avoid;
}

1 trước số trong nội dung được tạo

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

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

5(Xem bản lớn)

Bây giờ chúng tôi có một biểu định kiểu hoàn chỉnh để xây dựng cuốn sách của chúng tôi. Tôi đã tránh dành nhiều thời gian cho kiểu chữ ở đây, thay vào đó tập trung vào các chi tiết cụ thể của việc tạo ra một cuốn sách. Tuy nhiên, từ thời điểm này, bạn có thể thử nghiệm và thêm phong cách của riêng mình để tạo ra một thiết kế sách độc đáo

Không Chỉ Sách

Hãy nhớ rằng những kỹ thuật này không chỉ dành cho sách. Bạn có thể sử dụng chúng để tạo các phiên bản in và PDF của danh mục sản phẩm trực tiếp từ HTML của trang web mà bạn đã phát triển cho khách hàng. Hoặc bạn có thể tạo tờ rơi và tài liệu quảng cáo từ nội dung trang web

Nếu bạn muốn tạo tài liệu PDF từ một trang web bằng Prince thì DocRaptor là một lựa chọn tuyệt vời. Dịch vụ này sử dụng Prince thông qua API. Bạn có thể gửi tài liệu qua API và nhận PDF — hoàn hảo để cho phép người dùng tải xuống nội dung dưới dạng PDF một cách nhanh chóng. Mọi thứ chúng tôi đã xem xét trong bài viết này đều có thể thực hiện được thông qua tích hợp API với DocRaptor

Ngay cả khi bạn không có nhu cầu tạo PDF ngay lập tức, thì đó là một khía cạnh hấp dẫn của CSS — và đó là một kỹ năng hữu ích cần được cất giấu, để bạn biết điều gì có thể xảy ra khi một trường hợp sử dụng xuất hiện

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

Làm cách nào để viết CSS để in?

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

Làm thế nào để sử dụng printJS?