Hướng dẫn how do you print using css? - làm thế nào để bạn in bằng css?

• 19 phút đọc
• Mã hóa, công cụ, CSS, kỹ thuật, in

Nếu bạn đề cập đến việc in với CSS cho nhiều người làm việc trên web, thì phong cách in là việc sử dụng trong tâm trí. Tất cả chúng ta đều được sử dụng tốt để tạo một bảng kiểu được yêu cầu khi một tài liệu web được in. Những bảng phong cách này đảm bảo rằng phiên bản in có thể đọc được và chúng tôi không thể khiến người dùng in ra những hình ảnh khổng lồ.

Nếu bạn đề cập đến việc in với CSS cho nhiều người làm việc trên web, thì phong cách in là việc sử dụng trong tâm trí. Tất cả chúng ta đều được sử dụng tốt để tạo một bảng kiểu được yêu cầu khi một tài liệu web được in. Những bảng phong cách này đảm bảo rằng phiên bản in có thể đọc được và chúng tôi không thể khiến người dùng in ra những hình ảnh khổng lồ. 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 tôi sẽ xem xét các mô -đun CSS đã được tạo ra không sử dụng trong các trình duyệt web, mà là để đối phó với phương tiện in và phân trang. Tôi sẽ giải thích cách các bộ chọn, thuộc tính và giá trị mà họ giới thiệu hoạt động. Tôi sẽ kết thúc với một ví dụ làm việc mà bạn có thể sử dụng làm điểm khởi đầu cho các thí nghiệm của riêng bạn. 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 để sử dụng 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 về SmashingMag: on SmashingMag:

• Thiết kế để in với CSS
• 5 lời khuyên và thủ thuật mạnh mẽ cho các bảng phong cách in
• Sách 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 có ý nghĩa khi in

Có vẻ hơi lạ khi nội dung không đặc biệt dành cho web nên được duy trì dưới dạng HTML và được định dạng với CSS. Có vẻ như ít lạ hơn khi bạn nhận ra rằng các định dạng ereader phổ biến như EPUB và MOBI là HTML và CSS dưới mui xe. 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ố có thể sẽ có. HTML trở thành một định dạng tiện dụng để chuẩn hóa, dễ dàng hơn nhiều để đối phó hơn là có mọi thứ trong tài liệu Word hoặc gói xuất bả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 & NBSP; ↓

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

Sự khác biệt lớn nhất và sự thay đổi 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 nhắc nhở rằng chúng tôi không biết về kích thước của chế độ xem, in, kích thước cố định của mỗi trang có liên quan đế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 chúng tôi là một tập hợp các trang, phương tiện phân trang, thay vì phương tiện liên tục là một trang web.

Phương tiện truyền thông giới thiệu các khái niệm không có ý nghĩa trên web. Ví dụ: bạn cần có khả năng tạo số trang, đặt các tiêu đề chương vào lề, phá vỡ nội dung một cách thích hợp để các số liệu don don trở nên 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 bạn. Bạn có thể nhập tài liệu vào gói xuất bả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 làm lại vào lần tới khi 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 để tạo phương tiện phân trang.

Bởi vì các thông số kỹ thuật được thiết kế cho các phương tiện truyền thông phân trang, chúng tôi đã giành chiến thắng khi xem xét hỗ trợ trình duyệt trong bài viết này - nó sẽ rất có ý nghĩa. Sau đó, chúng tôi 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ác thông số kỹ thuật này.

Các 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ó mô -đun phương tiện phân tích CSS CSS và nội dung được tạo ra CSS cho các thông số kỹ thuật của mô -đun phương tiện phân trang. Hãy cùng nhìn vào cách những hoạt động này.

Quy tắc @page

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 bạn. Quy tắc dưới đây chỉ định kích thước trang mặc định là 5,5 x 8,5 inch. Nếu bạn có ý định in một cuốn sách, có lẽ bằng một dịch vụ in theo yêu cầu, thì việc tìm hiểu 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ị độ 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ư là A4 A4 hay hợp pháp.

@page {
  size: A4;
}

Bạn cũng có thể sử dụng một từ khóa để chỉ định hướng định hướng của trang - Chân dung trên tường hoặc cảnh quan.

@page {
  size: A4 landscape;
}

Hiểu mô hình trang

Trước khi đi xa hơn, chúng ta nên hiểu cách thức mô hình trang cho phương tiện phân trang hoạt động, bởi vì nó hoạt động hơi khác 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 hộp lề xung quanh. Bạn có thể kiểm soát kích thước của khu vực trang và kích thước của lề giữa cạnh của khu vực trang và phần cuối của chính trang. Bảng trong đặc điểm kỹ thuật giải thích rất tốt cách các hộp này có kích thước.

(Xem phiên 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. Khi nó hết phòng, một trang khác sẽ được tạo. Các hộp lề chỉ được sử dụng cho nội dung do CSS tạo.

Trò chơi bên trái và bên phải

Một khía cạnh khác của mô hình trang là nó xác định 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, bạn có thể thấy rằng kích thước lề và nội dung 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 ký quỹ khác nhau cho các trang của chúng tôi.

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

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

Hai bộ chọn phân loại 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 pseudo pseudo

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

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

8 nhắm vào bất kỳ trang nào được cố tình để trống. Để thêm văn bản này, chúng ta có thể sử dụng nội dung được tạo nhắm vào hộp ký quỹ trung tâm hàng đầu.

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

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

Trong ví dụ cuối cùng, 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ề trung tâm hàng đầu. Như bạn sẽ khám phá, 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 các hộp ký quỹ của chúng tôi. Ví dụ: nếu chúng ta muốn thêm tiêu đề của cuốn sách vào hộp lề dưới bên trái của các trang bên phải, chúng ta 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;
  }
}

Trang phá vỡ trang

Ngoài ra, một phần của thông số kỹ thuật truyền thông phân đoạn của người Viking là thông tin về cách kiểm soát ngắt trang. Như đã mô tả, một khi nội dung lấp đầy một khu vực trang, nó sẽ chuyển sang một trang mới. Nếu một tiêu đề vừa được ghi vào trang, bạn có thể kết thúc với một trang kết thúc với 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 nghỉ ở giữa bàn và giữa 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 là khởi đầu của một trang, đặt

@page :first {

}

0 thành

@page :first {

}

1.

h2 {
  page-break-before: always;
}

Để tránh phá vỡ trực tiếp sau khi tiêu đề, sử dụng

@page :first {

}

2.

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

Để tránh phá vỡ các số liệu 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à tất cả về đánh số những thứ - trang, chương, thậm chí cả số liệu. Chúng tôi thực sự có thể thêm các số này thông qua CSS, cứu chúng tôi khỏi phải đánh số lại mọi thứ bởi vì chúng tôi quyết định, nói, thêm một con số mới vào một chương. Chúng tôi làm điều này bằng cách sử dụng quầy CSS.

Nơi rõ ràng để bắt đầu là với số trang. CSS cung cấp cho chúng tôi một bộ đếm trang được xác định trước; Nó bắt đầu ở mức 1 và gia tăng với mỗi trang mới. Trong bảng 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 ký quỹ của bạn. Trong ví dụ dưới đây, chúng tôi đang thêm số trang vào phía dưới bên phải của các trang bên phải và phía dưới bên trái của các trang bên trái.

@page {
  size: A4;
}

0

Chúng tôi cũng đã tạo ra một bộ đếm 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 ra Trang 3/120, bạn có thể.

@page {
  size: A4;
}

1

Bạn có thể tạo các bộ đếm được đặt tên của riêng bạn và tăng và đặt lại chúng như 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 dưới đây sẽ tạo ra một quầy cho các chương có tên

@page :first {

}

7 và tăng lên với mỗi

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

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

9 - là khởi đầ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à một khoảng thời gian trước tiêu đề thực tế 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 để 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 để bắt đầu từ 1 cho mỗi chương.

@page {
  size: A4;
}

3

Thiết lập chuỗi

Hãy xem một cuốn sách in một lần nữa. Khi bạn đi qua một chương, bạn có thể thấy rằng tiêu đề chương của chương được in ở trang trái hoặc bên phải. Thật kỳ lạ như nó có thể nghe, nội dung được tạo ra cho các thông số kỹ thuật của phương tiện truyền thông phân tích 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 điều này bằng cách sử dụng một 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 đưa ra nội dung này và sau đó

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

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

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

6.

@page {
  size: A4;
}

4

Khi phương tiện phân trang của bạn được tạo, mỗi lần xảy ra

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

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

9, nội dung được ghi thành

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

8 và sau đó 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 là một phần của nội dung được tạo ra CSS cho đặc điểm kỹ thuật của mô -đun phương tiện phân trang. Cách thức hoạt động của chú thích là bạn sẽ thêm văn bản của chú thích nội tuyến, được bọc trong các thẻ HTML (có thể là một nhịp), với một lớp để xác định nó là một chú thích. Khi trang được tạo, nội dung của phần tử chú thích đó đã được xóa và biến thành một chú thích.

Trong CSS của bạn, sử dụng giá trị chú thích 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 của bạn.

@page {
  size: A4;
}

5

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

@page {
  size: A4;
}

6

Chú thích có một bộ đếm được xác định trước hoạt động theo cách tương tự như bộ đếm trang. Thông thường, bạn sẽ muốn tăng bộ đếm thêm 1 mỗi lần xảy ra 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 và đặt lại vào đầu mỗi chương.

@page {
  size: A4;
}

7

Các phần khác nhau của chú thích có thể được nhắm mục tiêu với các yếu 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ó một chú thích. Điều này sử dụng giá trị của bộ đếm chú thích làm 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 dấu số được đặt ở phía trước văn bản chú thích trong chân trang của tài liệu của bạn. Chúng hành xử theo cách tương tự với các số được tạo cho một danh sách được đặt hàng trong CSS.

@page {
  size: A4;
}

9

Bản thân các chú thích đượ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à phong cách khu vực đó như sau.

@page {
  size: A4 landscape;
}

0

Cross-References

Trước khi chuyển sang một ví dụ làm việc về mọi thứ mà chúng tôi đã học được, hãy để Lôi nhìn vào các tham chiếu chéo. Trên web, chúng tôi tham chiếu chéo mọi thứ bằng cách thêm các 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ẽ đề cập đến số trang nơi sẽ 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à cuốn sách được in - và giữa các phiên bản - thực hiện điều này với CSS giúp chúng tôi không phải đi qua và thay đổi tất cả các số.

Chúng tôi sử dụng một thuộc tính 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 các 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 họ 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, thêm một lớp để xác định chúng là tham chiếu chéo, thay vì liên kết bên ngoài; 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;
  }
}

7.

@page {
  size: A4 landscape;
}

1

Sau đó, sau khi liên kết, sử dụng lại nội dung được tạo lại để xuất

@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ố lượng vị trí trong cuốn sách nơi ID đó có thể được tìm thấy.

@page {
  size: A4 landscape;
}

2

Chúng tôi sẽ xem xét kỹ thuật này trong thực tế khi chúng tôi tạo một bảng nội dung cho ví dụ làm việc.

Đặt tất cả lại với 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 trong sự cô lập. 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 điều thực hiện tốt đặc điểm kỹ thuật này; Một trong những điều dễ tiếp cận nhất là Hoàng tử. Giấy phép thương mại độc lập cho Hoàng tử là đắt tiền, tuy nhiên, bạn có thể sử dụng Hoàng tử 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ử các kỹ thuật này, bạn có thể. Ngoài ra, nếu bạn có 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 xuất các đoạn từ một trong những cuốn sách yêu thích của tôi về Project Gutenberg, mèo của chúng tôi của 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 để thể hiện đị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 PDF được tạo, trên GitHub. Nếu bạn muốn thử nghiệm CSS và tự mình xây dựng cuốn sách, thì bạn sẽ 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ó Windows GUI, 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ổ đầu cuối, chuyển sang thư mục sách của bạn hoặc vị trí mà 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 PDF trong thư mục

h2 {
  page-break-before: always;
}

0 có tên

h2 {
  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 Hoàng tử để xem những 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. Biên soạn các tài liệu trong Hoàng tử là có thể, nhưng tôi đã thấy đơn giản hơn khi chỉ đối phó với một tài liệu lớn. Trước các chương, bắt đầu bằng một

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

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

9, tôi có một div chứa hình ảnh bìa, và sau đó là bảng nội dung cho cuốn sách.

Bảng nội dung liên kết đến ID của các chương

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

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

9.

@page {
  size: A4 landscape;
}

5

CSS sau đó sử dụng tất cả những điều chúng tôi đã mô tả cho đến nay. Để bắt đầu, chúng ta cần thiết lập một 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 pseudo lớp

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

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

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

@page {
  size: A4 landscape;
}

6

Sau đó chúng tôi đối phó với hình ảnh cho bìa trước, đảm bảo rằng nó bao gồm toàn bộ khu vực trang.

@page {
  size: A4 landscape;
}

7 (xem phiên bản lớn) (See large version)

Tiếp theo, chúng tôi xử lý 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ả

h2 {
  page-break-before: always;
}

6 và

h2 {
  page-break-before: always;
}

7.

Sự lây lan bên tay phải sẽ có tiêu đề của cuốn sách trong hộp lề dưới bên trái, một bộ đếm trang ở phía dưới bên phải và tiêu đề chương của chương ở phía trên bên phải. Tiêu đề chương chương được đặt bằng cách sử dụng

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

2 tiếp tục xuống trong bảng kiểu.

________ 28 (xem phiên bản lớn)(See large version)

Trải dài bên trái có tiêu đề cuốn sách ở phía dưới bên phải và bộ đếm trang ở phía dưới bên trái.

________ 29 (xem phiên bản lớn)(See large version)

Đối với trang đầu tiên, chứa hình ả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

h2 {
  page-break-before: always;
}

9.

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

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

0

Phần tiếp theo của bảng kiểu giao dịch với quầy. Ngoài bộ đếm trang đặt trước, chúng tôi đang xác định các 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 bây giờ có số của họ được đặt trước tiêu đề. Số liệu cũng hiển thị số của họ.

(Xem phiên bản lớn)

Chúng tôi tạo ra các chú thích như trong lời giải thích trước đó, Superspsing bản gọi chú thích.

________ 32 (xem phiên bản lớn)(See large version)

Sau đó chúng tôi thêm một số quy tắc để kiểm soát nơi các trang bị phá vỡ. Bạn cần phải khá cẩn thận về việc quá nặng nề với điều này. Nếu cuốn sách của bạn có rất nhiều bảng và số liệu, thì việc thêm nhiều quy tắc cụ thể ở đây có thể gây ra rất nhiều khoảng cách dài trong cuốn sách. Thử nghiệm và thử nghiệm sẽ cho thấy bạn có thể kiểm soát các lần 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, việc giữ một bảng không bị phá vỡ sẽ là không thể nếu bảng không phù hợp trên 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 bảng nội dung và chúng tôi sử dụng một mẹo 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 mà ID đang bật. Đây là những gì chúng tôi sẽ làm cho bảng nội dung của chúng tôi. Quy tắc bên dưới đặt số trang sau liên kết đến mỗi chương trong bảng nội dung.

________ 34 (xem phiên bản lớn)(See large version)

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

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

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

________ 35 (xem phiên bản lớn)(See large version)

Bây giờ chúng tôi có một bảng phong cách 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 bạn để 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 phiên bản in và pdf của một danh mục sản phẩm trực tiếp từ HTML của một trang web mà bạn đã phát triển cho một 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 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 Hoàng tử 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 khi đang bay. Tất cả mọi thứ chúng tôi đã xem xét trong bài viết này đều có thể thông qua tích hợp API với Docraptor.

Ngay cả khi bạn không có nhu cầu ngay lập tức về thế hệ PDF, 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 để bỏ đi, để bạn biết những gì có thể khi sử dụng trường hợp sử dụng.

Tài nguyên và đọc thêm

• Mô -đun phương tiện phân trang CSS CSS cấp 3, W3C W3C
• Nội dung được tạo ra CSS cho mô -đun phương tiện phân trang, W3C W3C
• Sử dụng bộ đếm CSS, Mạng lưới phát triển Mozilla Mozilla
• Sách CSS CSS: Tiêu chuẩn sống,
• Hướng dẫn sử dụng cho Hoàng tử 9.0, rất nhiều ví dụ đơn giản hoạt động ở Hoàng tử
• “Cách viết một cuốn sách,” Jonathan Snook, 24 cách
• “Xây dựng sách với CSS3,” Nellie McKesson, một danh sách tách biệt
• In ấn một cuốn sách với CSS: Boom !, Bert Bert Bos và Håkon Wium Lie, một danh sách cách nhau
• HT HTML, EPUB, MOBI, PDF, WTF: Tạo một ebook, Hồi Rachel Andrew

(VF, AL, IL)

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

Tệp CSS in là gì?

Làm cách nào để in một truy vấn truyền thông trong CSS?

Làm cách nào để tạo HTML in?