Phương tiện truyền thông in css codepen

Question

Tôi rất thắc mắc và việc lưu trữ không giúp tôi. Có thể tôi đang nhìn nhầm chỗ. This is short story

Nội dung chính Hiển thị

Tôi đã có một cái nhìn rằng tôi phải được ở trên một trang đầy đủ. Tôi không thể có một trang thứ hai và tôi cần nó ở mức cao nhất có thể trên trang
Giải pháp phải tương thích với trình duyệt hợp tác chéo (IE9+, Safari, Chrome, FF)
Tôi đã có một giải pháp PDF, nhưng tôi cũng cần một giải pháp đơn giản
Trang được xây dựng với bootstrap, nhưng tôi đã ghi đè hầu hết các lớp để vào

Constructor of the page HTML as after. Tôi đã bỏ một số CSS nội tuyến để tùy chỉnh một số thông tin này

<div class="container">
  <div class="row">
    <div class="span16">

      <style type="text/css" media="all">
        @media print {
          html, body {
            margin: 0;
            padding: 0;
            background: #FFF; 
            font-size: 9.5pt;
          }
          .container, .container div {
            width: 100%;
            margin: 0;
            padding: 0;
          }
          .template { overflow: hidden; }
          img { width: 100%; }
        }
      </style>

      <div class="template_holder">
        <div class="template">
          <img src="some_big_image">
          <div>
            [PLAIN TEXT IN HERE, POSITION:ABSOLUTE OVER THE IMAGE]
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Tôi nhận ra rằng đó là một hình thức kém để bao gồm các CSS nội tuyến ở đây, nhưng nó phải ghi đè lên một loạt các CS khác xuất hiện trước nó vì nhiều lý do làm. Tôi có thể kéo nó ra, nhưng ý chính của nó là thế này. Khi tôi tham gia, tôi nhận được một thứ có vẻ đúng, cộng với một trang thứ hai bổ sung. Khi tôi thu nhỏ hình ảnh xuống, mọi thứ đều ổn, nhưng tôi cần hình ảnh để lấp đầy div

Tôi cho rằng thiết lập chiều rộng đến 100% là một vấn đề, nhưng tôi chắc chắn rằng tỷ lệ khung hình ảnh nhỏ hơn trang (ngay cả với bất kỳ bên nào). Về cơ bản, hình ảnh ở chiều rộng đầy đủ không nên gây ngắt trang. Tôi đang làm gì sai và tôi cần thay đổi điều gì?

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

Nếu bạn đề cập đến công việc với CSS cho nhiều người làm việc trên web, thì phong cách 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 trang web tài liệu được đưa vào. Những bảng cách này chắc chắn rằng phiên bản trong có thể đọc được và chúng tôi không thể làm cho người dùng trong các hình ảnh trở nên giống nhau

Nếu bạn đề cập đến công việc với CSS cho nhiều người làm việc trên web, thì phong cách 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 trang web tài liệu được đưa vào. Những bảng cách này chắc chắn rằng phiên bản trong có thể đọc được và chúng tôi không thể làm cho người dùng trong các hình ảnh trở nên giống nhau. 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 không thể 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 được sử dụng trong các trình duyệt web, mà là để đối phó với các phương tiện tiện ích trong và phân trang. Tôi sẽ giải thích cách các bộ lựa 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 điểm khởi đầu cho 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. trên SmashingMag

Design to in with CSS
5 lời khuyên và thủ thuật mạnh mẽ cho các bảng cách trong
Sách biệt ngữ ngành thiết kế web. Thuật ngữ và tài nguyên
upload library template up level theo

In sao HTML and CSS has mean when in

Có vẻ hơi lạ khi nội dung không dành riêng cho web nên được duy trì dưới định dạng HTML và được định dạng với CSS. Có vẻ í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ộ thảo luận 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

Add after jump. Tiếp tục đọc bên dưới & NBSP;

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

Sự khác biệt lớn nhất và sự thay đổi khái niệm, là các tài liệu trong đề 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, trong, 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 cố định trang 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 trình vào lề, phá vỡ nội dung theo một cách thích hợp để các số liệu không trở nên tách rời khỏi chú thích của họ. 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 thực hiện lại vào lần tới khi bạn cập nhật bản sao. Đây là nơi xuất hiện CSS, có thông số kỹ thuật được thiết kế để sử dụng nhằm 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 tiện lợi, chúng tôi đã 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 mà bạn đã biết sẽ hữu ích cho định dạng định dạng để vào. Các cụ có thể vào, 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 tích trang. Hãy cùng nhìn vào cách các hoạt động này

Quy tắc @page

Quy tắc


@page {
  size: A4 landscape;
}

7 cho phép bạn chỉ định các khía cạnh khác nhau của hộp trang. Ví dụ. you will want to only size of your pages. 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 trong một cuốn sách, có thể bằng một dịch vụ 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ó thể sử dụng các từ khóa kích thước giấy, chẳng hạn như A4 A4 hay hợp pháp


@page {
  size: A4;
}

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


@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ông thức mô hình trang cho phương tiện hoạt động phân trang tiện ích, 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 biên xung quanh. Bạn có thể kiểm tra kích thước của khu vực trang và kích thước của các bên 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 làm thế nào 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 ra. Các ký hiệu chỉ được sử dụng cho nội dung để tạo CSS

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 nào trong bất kỳ cuốn sách nào bạn có trong tay, bạn có thể thấy rằng kích thước lề và nội dung 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ộ lựa 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. Selector


@page {
  size: A4 landscape;
}

8 nhắm vào trang đầu tiên của tài liệu.


@page :first {

}

pseudo pseudo pseudo


@page {
  size: A4 landscape;
}

9 nhắm vào bất kỳ trang nào được cố tình để trống. Để bổ sung cho 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 để tạo CSS để 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à mọi thứ có thể được thêm vào hộp ký tên của chúng tôi. Ví dụ. nếu chúng tôi muốn thêm tiêu đề của cuốn sách vào hộp lề bên trái của các trang bên phải, chúng tôi sẽ thực hiện công việc này bằng cách sử dụng nội dung được tạo


@page {
  size: A4 landscape;
}

0

Trang bị phá vỡ

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ả, khi nội dung hoàn thành đầ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 trong đó, bạn sẽ cố gắng tránh vấn đề này. Những nơi khác mà bạn có thể muốn tránh nghỉ ngơi giữa bàn và giữa hình và chú thích của nó

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


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

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

0 là phổ biến. To force this title always is started of a page, set


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

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

1 to


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

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

2.


@page {
  size: A4 landscape;
}

4

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


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

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

3.


@page {
  size: A4 landscape;
}

6

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


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

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

4.


@page {
  size: 5.5in 8.5in;
}

0

thừa

Sách là tất cả về những đánh số 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ứ vì chúng tôi quyết định, nói, thêm một số mới vào một chương trình. Chúng tôi làm điều này bằng cách sử dụng CSS

Unknown Clear to started is with page number. CSS cung cấp cho tôi một bộ đếm trang đã được xác định trước; . 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ý tên 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: 5.5in 8.5in;
}

1

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


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

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

5. 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 Trang 3/120, bạn có thể.


@page {
  size: 5.5in 8.5in;
}

2

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 theo yêu cầu của bạn. Để tạo bộ đếm, hãy sử dụng thuộc tính


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

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

6, tăng nó lên với


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

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

7. Các quy tắc CSS dưới đây sẽ tạo ra một bộ đếm cho các chương trình có tên


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

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

8 và tăng lên với mỗi_______50 - là khởi động của một chương trình 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 để bổ sung thêm số lượng cho chương trình và một khoảng thời gian trước tiêu đề thực tế của chương trình.


@page {
  size: 5.5in 8.5in;
}

3

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 được sử dụng


@page :first {

}

0. 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;
}

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


@page :first {

}

2 để bắt đầu từ 1 cho mỗi chương trình.


@page {
  size: 5.5in 8.5in;
}

4

Chuỗi thiết lập

Vui lòng xem một cuốn sách trong một lần nữa. Khi bạn đi qua một chương trình, bạn có thể thấy rằng tiêu đề của chương trình nằm ở trang bên trái hoặc bên phải. Thật kỳ lạ vì nó có thể nghe được, 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 tiện lợi 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 :first {

}

3 trong bộ chọn mà chúng tôi muốn lấy nội dung từ đó. Đối với chủ đề của chương trình, đây sẽ là


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

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

0. Giá trị của


@page :first {

}

3 là tên bạn muốn đưa ra nội dung này và sau đó


@page :first {

}

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


@page :first {

}

7


@page {
  size: 5.5in 8.5in;
}

5

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;
}

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


@page :first {

}

9 và sau đó xuất ra trong hộp lề 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;
}

0 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 bởi 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ẽ bổ sung 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 chú thích đó đã bị 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 :blank {
  @top-center { content: "This page is intentionally left blank." }
}

1 để tạo quy tắc cho lớp chú thích của bạn.


@page {
  size: 5.5in 8.5in;
}

6

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


@page {
  size: 5.5in 8.5in;
}

7

Chú thích có một bộ đếm đã được xác định trước khi 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 lần mỗi lần ra lớp


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

2 và đặt lại vào đầu mỗi chương.


@page {
  size: 5.5in 8.5in;
}

8

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ố CSS giả


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

3 is neo number in the text for know have a note like. Điều này sử dụng giá trị của bộ đếm chú thích làm nội dung được tạo ra.


@page {
  size: 5.5in 8.5in;
}

9


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

4 là điểm đánh số được đặt trước văn bản chú thích trong phần chân trang của tài liệu của bạn. Chúng ta xử lý 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;
}

0

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 :blank {
  @top-center { content: "This page is intentionally left blank." }
}

5. You will target target and style khu vực đó như sau.


@page {
  size: A4;
}

1

Tham khảo chéo

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 bổ sung các liên kết. Trong một cuốn sách hoặc tài liệu ở dạng 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ó trong - và giữa các phiên bản - thực hiện điều này với CSS giúp 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 :blank {
  @top-center { content: "This page is intentionally left blank." }
}

6, to add this number. 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 :blank {
  @top-center { content: "This page is intentionally left blank." }
}

7, đó 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; .


@page {
  size: A4;
}

2

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


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

9, trong đó


@page {
  size: A4 landscape;
}

00 là số lượng vị trí trong cuốn sách nơi ID có thể được tìm thấy.


@page {
  size: A4;
}

3

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

Set all back with nhau. a ví dụ cuốn sách

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 hiện việc 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 kiện thực hiện tốt đặc điểm kỹ thuật này; . 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 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 các cuốn sách đó

Tôi đã trích dẫn các đoạn từ một trong cuốn sách yêu thích của tôi về Dự án Gutenberg, con 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ử CSS và tự mình 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ó 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;
}

4

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


@page {
  size: A4;
}

5

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


@page {
  size: A4 landscape;
}

01 có tên


@page {
  size: A4 landscape;
}

02. 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 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 trình, bắt đầu bằng một


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

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

0, tôi có một div chứa hình ảnh máy chiếu, và sau đó là bảng nội dung cho sách

Liên kết bảng nội dung đến ID của các chương trình


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

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

0.


@page {
  size: A4;
}

6

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 {
  size: A4 landscape;
}

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


@page {
  size: A4 landscape;
}

8 để xóa bỏ lề trên trang 1, vì trang này sẽ có hình ảnh thẩm định.


@page {
  size: A4;
}

7

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


@page {
  size: A4;
}

8 (xem phiên bản lớn)

(Xem bản lớn)

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ả


@page {
  size: A4 landscape;
}

07 và


@page {
  size: A4 landscape;
}

08

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


@page :first {

}

3 continue down in the table type. ________ 29 (xem phiên bản lớn)

(Xem bản lớn)

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

________ 30 (xem phiên bản lớn)

(Xem bản lớn)

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


@page {
  size: A4 landscape;
}

40.


@page {
  size: A4 landscape;
}

1

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


@page {
  size: A4 landscape;
}

2

Các chương trình bây giờ có số lượng của chúng đượ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

________ 33 (xem phiên bản lớn)

(Xem bản lớn)

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ề công 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 trong cuốn sách. Thử nghiệm và thử nghiệm sẽ cho thấy bạn có thể kiểm tra 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ẽ không thể nếu bảng không phù hợp trên một trang


@page {
  size: A4 landscape;
}

4

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 :blank {
  @top-center { content: "This page is intentionally left blank." }
}

6 to show number page that ID is being activate. Đâ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 từng chương trình trong bảng nội dung. ________ 35 (xem phiên bản lớn)

(Xem bản lớn)

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 bổ sung


@page {
  size: A4 landscape;
}

42 trước số trong nội dung được tạo. ________ 36 (xem phiên bản lớn)

(Xem bản lớn)

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 đó là tập trung vào các chi tiết cụ thể của công việc để tạo ra một cuốn sách. Tuy nhiên, kể từ thời điểm này, bạn có thể thử trải nghiệm và bổ sung thêm phong cách của riêng bạn để tạo ra một thiết kế độc đáo.

No only book

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 tiền rơi và tài liệu quảng cáo từ trang web nội dung

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ả những thứ 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ể xảy ra khi sử dụng trườ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. Living Standard,
Hướng dẫn sử dụng cho Hoàng tử 9. 0, rất nhiều ví dụ đơn giản về hoạt động ở Hoàng tử
“Cách viết một cuốn sách,” Jonathan Snook, 24 cách
“Dựng sách với CSS3,” Nellie McKesson, một danh sách phân tách
In one book with CSS. bùng nổ. , Bert Bert Bos và Håkon Wium Lie, một danh sách cách nhau
HT HTML, EPUB, MOBI, PDF, WTF. Create a ebook, Hồi Rachel Andrew

(VF, AL, IL)

Chúng tôi có thể áp dụng CSS lên trang để không?

Bạn có thể sử dụng CSS để thay đổi diện mạo của trang web của bạn khi nó nằm trên một tờ 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 trong. . 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 để in một trang web phù hợp với giấy?

Điều chỉnh cài đặt máy tính của bạn nếu cần thiết khi ra giấy,. .

Chọn máy của bạn bằng nút "Thay đổi" nếu cần thiết. Trên màn hình tiếp theo, bạn sẽ thấy một tùy chọn cũng cho phép tùy chọn "Lưu dưới dạng PDF"

Đặc tính

Nâng cao

chia tỷ lệ

Đặt tỷ lệ thành "phù hợp với kích thước giấy" hoặc tốt hơn, đặt tỷ lệ thành 50%

OK (để vào)

@Page làm gì trong CSS?

R-Rule @page là một quy tắc CSS được sử dụng để sửa đổi các khía cạnh khác nhau của thuộc tính trang trong. Nó nhắm vào mục tiêu và sửa đổi kích thước của trang, hướng trang và lề. R-Rule @page có thể được sử dụng để nhắm mục tiêu tất cả các trang trong bản in hoặc thậm chí các trang cụ thể bằng cách sử dụng các lớp giả khác nhau. sửa đổi các khía cạnh khác nhau của thuộc tính trang in . Nó nhắm mục tiêu và sửa đổi kích thước, hướng trang và lề của trang. Có thể sử dụng quy tắc @page để nhắm mục tiêu tất cả các trang trong bản in hoặc thậm chí các trang cụ thể bằng cách sử dụng các lớp giả khác nhau của nó.