programming javascript

Javascript lấy số trang in

Mẹo. Các thuộc tính. ngắt trang trước, ngắt trang sau và ngắt trang bên trong giúp xác định cách tài liệu sẽ hoạt động khi được in

Ghi chú. Bạn không thể sử dụng thuộc tính này khi trống

hoặc trên các phần tử được định vị tuyệt đối

Giá trị mặc định. tự động kế thừa. không có hoạt ảnh. không. Đọc về animatableVersion. Cú pháp CSS2JavaScript. mục tiêu. Phong cách. pageBreakAfter="luôn luôn"

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính

Thuộc tính Ngắt trang sau 1. 04. 01. 01. 27. 0

Ghi chú. Không có trình duyệt nào hỗ trợ "tránh"

Ghi chú. Các trình duyệt có thể hiểu "trái" và "phải" là "luôn luôn"

Cú pháp CSS

ngắt trang sau. Tự động. luôn. tránh xa. bên trái. đúng. ban đầu. thừa kế;

Giá trị tài sản

Giá trịMô tảautoDefault. Luôn ngắt trang tự độngLuôn chèn ngắt trang sau phần tửtránhTránh ngắt trang sau phần tử [nếu có thể]tráiChèn ngắt trang sau phần tử để trang tiếp theo được định dạng là trang bên tráiChèn ngắt trang sau phần tử sao cho . Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế

Với In&Chia sẻ, bạn có thể thêm số trang gốc vào tất cả các trang của tài liệu. Thêm số trang vào tệp PDF, lệnh in và hình ảnh chưa bao giờ dễ dàng hơn thế

Thậm chí còn nhiều hơn nữa, bạn cũng có thể

thêm số trang
thêm tổng số trang
thêm số vai trò
thêm tổng số vai trò
thêm số lá
thêm tổng số lá

Số trang có thể được định dạng bằng định dạng tùy chỉnh và có thể sử dụng giá trị offset. Chỉ định các giá trị khác cho trang cuối cùng và thậm chí sử dụng các giá trị khác cho mặt sau

Giao diện mặc định của số trang cũng có thể được sửa đổi bằng các thuộc tính tùy chỉnh cho phép bạn thay đổi phông chữ, kích thước văn bản, màu sắc, màu nền, căn chỉnh văn bản, v.v.

Bạn có thể xác định phạm vi trang mà chỉ báo trang sẽ được thêm vào. Dễ dàng định vị số trang ở dưới cùng, trên cùng hoặc bất kỳ vị trí nào khác của trang, nơi bạn muốn.

Bạn sẽ không thể tin được tất cả những gì có thể làm với CSS để in. Bài viết này giới thiệu tất cả các thuộc tính CSS ít được biết đến sẽ cho phép tạo một cuốn sách. mục lục, số trang, đầu trang và cuối trang, chú thích cuối trang, v.v.

[Bài viết này nối tiếp phần Printing the web, phần 1. lấy nội dung từ web nhưng có thể đọc độc lập]

HTML và CSS chủ yếu được thiết kế để hiển thị trên màn hình và khá hạn chế đối với các tính năng in nâng cao cần thiết cho sách

Tuy nhiên, W3C đã phác thảo một số tính năng CSS tuyệt vời giúp HTML và CSS trở thành một cách rất thuận tiện để chỉnh sửa sách

Tôi đã tạo một kho lưu trữ demo để tạo ra một cuốn sách bao gồm tất cả các ví dụ được trình bày trong bài viết này. Đây là mẫu của một số trang trong cuốn sách này

Các trang này hiển thị

Một bìa kích thước đầy đủ
Số trang
Mục lục với số trang động
Tên chương tự động hiển thị trong tiêu đề của mỗi trang
Liên kết URL được hiển thị dưới dạng chú thích được đánh số

Tất cả điều này đã được tạo ra với HTML và CSS

Có thể tải xuống tệp PDF của cuốn sách đã tạo trên. https. //github. com/michaelperrin/blog-css-book-demo/raw/master/build/book. pdf

Kích thước trang và lề với

@page {
  @bottom-center {
    content: counter[page];
  }
}

Quy tắc CSS

@page {
  @bottom-center {
    content: counter[page];
  }
}

2 cho phép xác định các tham số của trang in

Kích thước trang và lề có thể được xác định như sau

@page {
  size: A4;

  /* Other possible values: */
  size: letter; /* US letter */
  size: 6.125in 9.25in; /* width height */

  margin: 1cm 2cm; /* use centimeters or inches depending on your needs */
}

Nếu tôi đang làm việc với một cuốn sách được in ở Hoa Kỳ, tôi thường xác định tất cả các đơn vị tính bằng inch trong tệp CSS. Nếu tôi đang làm việc trên một cuốn sách được in ở nơi khác [tốt, Pháp], tôi sẽ sử dụng centimet hoặc milimét cho tất cả các đơn vị

Quy tắc

@page {
  @bottom-center {
    content: counter[page];
  }
}

2 có một số lớp giả cho phép nhắm mục tiêu các trang cụ thể trong tài liệu

@page {
  @bottom-center {
    content: counter[page];
  }
}

@page {
  @bottom-center {
    content: counter[page];
  }
}

@page {
  @bottom-center {
    content: counter[page];
  }
}

@page {
  @bottom-center {
    content: counter[page];
  }
}

các trang được đặt tên với thuộc tính

@page {
  @bottom-center {
    content: counter[page];
  }
}

Chúng tôi sẽ sử dụng một số lớp giả này trong các phần tiếp theo, nhưng đây là ví dụ đầu tiên để đặt lề cụ thể trên trang đầu tiên

@page :first {
  margin: 2cm;
}

Số trang ở chân trang

Hiển thị số trang là một tính năng rất phổ biến cho tất cả các cuốn sách. Chúng tôi sẽ sử dụng đoạn mã CSS này cho mục đích đó

@page {
  @bottom-center {
    content: counter[page];
  }
}

Tất nhiên, bạn có thể xác định các thuộc tính bổ sung để tạo kiểu cho số trang

Ngoài bộ đếm CSS cụ thể cho

@page {
  @bottom-center {
    content: 'Page ' counter[page] ' of ' counter[pages];
  }
}

0, bạn có thể sử dụng

@page {
  @bottom-center {
    content: 'Page ' counter[page] ' of ' counter[pages];
  }
}

1 để lấy tổng số trang. Hiển thị nội dung nào đó như "Trang 3 trên 15" sẽ được thực hiện với

@page {
  @bottom-center {
    content: 'Page ' counter[page] ' of ' counter[pages];
  }
}

Hiển thị tên chương trong tiêu đề trang

Chúng tôi sẽ sử dụng thuộc tính

@page {
  @bottom-center {
    content: 'Page ' counter[page] ' of ' counter[pages];
  }
}

2 được xác định trong thuộc tính vẫn đang là bản nháp đang hoạt động tại W3C

Chức năng của thuộc tính này là tự động đặt giá trị của một biến dựa trên nội dung mà chúng ta có thể sử dụng lại trong một thuộc tính CSS khác

Như chúng ta đã thấy, tôi đang sử dụng thẻ

@page {
  @bottom-center {
    content: 'Page ' counter[page] ' of ' counter[pages];
  }
}

3 cho mỗi chương mới trong cuốn sách của mình. Mỗi chương bắt đầu với tiêu đề nằm trong thẻ tiêu đề

@page {
  @bottom-center {
    content: 'Page ' counter[page] ' of ' counter[pages];
  }
}


  Chapter title

Bây giờ chúng ta có thể xác định trong CSS rằng tiêu đề chương sẽ được tìm thấy trong mỗi thẻ

@page {
  @bottom-center {
    content: 'Page ' counter[page] ' of ' counter[pages];
  }
}

4 và sẽ được lưu trữ trong một biến có tên là

@page {
  @bottom-center {
    content: 'Page ' counter[page] ' of ' counter[pages];
  }
}

h2 {
  string-set: chapter_title content[];
}

Bây giờ tôi sẽ hiển thị tiêu đề hiện tại ở phần bên trái của trang cho các trang bên trái và ở phần bên phải của trang cho các trang bên phải nhờ các bộ chọn giả cụ thể. Đó không phải là tuyệt vời sao?

@page :left {
  @top-left {
    content: string[chapter_title];
  }
}

@page :right {
  @top-right {
    content: string[chapter_title];
  }
}

Kết xuất các liên kết dưới dạng chú thích bằng CSS

In một liên kết

@page {
  @bottom-center {
    content: 'Page ' counter[page] ' of ' counter[pages];
  }
}

7 không có nhiều ý nghĩa trên giấy. Đây là những gì tôi đã chọn để làm thay vì

Gạch dưới văn bản của văn bản liên kết để người đọc biết phần nào của văn bản là liên kết, nhưng sử dụng màu văn bản giống như văn bản bình thường [
```
@page {
  @bottom-center {
    content: 'Page ' counter[page] ' of ' counter[pages];
  }
}
```
8]
Thêm số chú thích sau văn bản liên kết
In URL liên kết dưới dạng chú thích cuối trang trên trang
Đặt lại đánh số chú thích cho mỗi trang hoặc chương mới [trong trường hợp của tôi là một bài viết trên blog]

Điều đó có nghĩa là một cái gì đó giống như


  
    Visit this awesome website and
    that one too.

Nên được kết xuất như

Truy cập trang web tuyệt vời này1 và trang đó< . 2 too.

với các chú thích sau được hiển thị ở cuối trang

1. https. //thí dụ. com/kiểm tra
2. https. //thí dụ. com/yay

Để làm được như vậy, các thuộc tính CSS thông thường là không đủ. Chúng tôi sẽ sử dụng bản nháp vẫn đang hoạt động tại W3C và không được hỗ trợ bởi các trình duyệt hiện tại [đây không phải là vấn đề nếu bạn đọc trên bài báo]

Mỗi chương được hiển thị bên trong thẻ HTML

@page {
  @bottom-center {
    content: 'Page ' counter[page] ' of ' counter[pages];
  }
}

3. Bộ đếm chú thích cuối trang sẽ được đặt lại cho mỗi bài viết. Chúng tôi sẽ nhận được chính xác những gì chúng tôi muốn bằng cách sử dụng CSS sau

article {
  counter-reset: footnote;
}

article a {
  text-decoration: underline;
  color: inherit;
}

article a::after {
  content: attr[href];
  float: footnote;
  font-size: 0.6rem;
  text-align: left;
  color: inherit;
}

Lưu ý


  Chapter title

0 cho phép chúng tôi hiển thị URL liên kết trong chú thích cuối trang và giá trị bất thường cho thuộc tính


  Chapter title

1 với


  Chapter title

Mục lục [TOC]

Chúng tôi muốn hiển thị mục lục ở đầu cuốn sách trông như thế này, với số trang động và dấu chấm để phân tách tiêu đề chương và số trang

Trước tiên, hãy cập nhật HTML của cuốn sách để thêm một số ID sao cho mỗi phần tử

@page {
  @bottom-center {
    content: 'Page ' counter[page] ' of ' counter[pages];
  }
}

3 và tạo mục lục [điều này có thể được tạo tự động bởi các tập lệnh hoặc React, như đã thấy trong phần 1]


  Table of contents

  
    Chapter title
    Chapter title 2
    William Coward
    Chamaeleon
  



  Chapter title
  



  Chapter title 2

Và sau đó thêm CSS

@page :first {
  margin: 2cm;
}

Những điều đáng chú ý

Hàm
```
  Chapter title

  
```
4 đặc biệt [là một phần của Mô-đun nội dung do CSS tạo cấp 3] sẽ hiển thị các dấu chấm trước số trang ở cuối dòng
Hàm
```
  Chapter title

  
```
5 là một phần của thông số kỹ thuật và cho phép sử dụng để lấy số trang mà các liên kết dẫn đến [điều đó thật tuyệt phải không?]
Tôi khuyên bạn nên đọc tài liệu của
```
  Chapter title

  
```
5 vì nó có một số tùy chọn khác, chẳng hạn như hiển thị trang với các kiểu khác

Trang bìa

Hãy thêm một trang bìa với hình nền kích thước đầy đủ và tiêu đề

Mã HTML

@page :first {
  margin: 2cm;
}

CSS

@page :first {
  margin: 2cm;
}

Các chỉnh sửa bố cục khác nhau

Xử lý các chương

Bắt đầu các chương mới trên một trang mới khá dễ dàng bằng cách sử dụng thuộc tính


  Chapter title

@page :first {
  margin: 2cm;
}

Nếu chương có phụ đề được hiển thị dưới dạng tiêu đề [ví dụ: _______17_______8], bạn nên tránh ngắt trang sau chúng

@page :first {
  margin: 2cm;
}

Bây giờ hãy tưởng tượng rằng bạn muốn mỗi chương bắt đầu ở đúng trang [ngược lại]. Thay vì


  Chapter title

9, chúng ta sẽ sử dụng giá trị

h2 {
  string-set: chapter_title content[];
}

@page :first {
  margin: 2cm;
}

Giá trị

h2 {
  string-set: chapter_title content[];
}

1 tất nhiên cũng có sẵn

Cải thiện kết xuất cho các đoạn văn

Nếu các đoạn trong cuốn sách của bạn nhỏ, bạn cũng có thể tránh chia chúng thành nhiều trang

@page :first {
  margin: 2cm;
}

Chúng ta thực sự có thể làm tốt hơn nữa. Hai thuộc tính CSS bổ sung từ mô-đun CSS Fragmentation cho phép chúng tôi xác định số lượng dòng phải để ở cuối trang [tránh chỉ có một dòng đoạn văn ở cuối trang] và số lượng dòng tối thiểu nên có trên . Hai tài sản là

h2 {
  string-set: chapter_title content[];
}

2 và

h2 {
  string-set: chapter_title content[];
}

3. Hãy cập nhật mã CSS

@page :first {
  margin: 2cm;
}

trang trống

Để hiển thị các trang trống, tôi tạo một lớp CSS đặc biệt cho phép tôi dễ dàng chèn các trang này vào tài liệu HTML của mình

@page :first {
  margin: 2cm;
}

Sau đó, tôi tạo kiểu cho chúng bằng các thuộc tính CSS sau

@page :first {
  margin: 2cm;
}

Với thuộc tính

@page {
  @bottom-center {
    content: 'Page ' counter[page] ' of ' counter[pages];
  }
}

0, chúng tôi đã xác định loại trang [trống không phải là từ khóa dành riêng, đó chỉ là một chuỗi mà tôi đã chọn]

Sau đó, chúng tôi có thể áp dụng một số kiểu cụ thể cho tất cả các trang có kiểu trống. Hãy xóa tiêu đề chương và số trang trên các trang trống để chúng thực sự trống

@page {
  @bottom-center {
    content: counter[page];
  }
}

Hiển thị sách dưới dạng tệp PDF

Các trình duyệt hiện đại [bao gồm Firefox và Chrome] không hỗ trợ hầu hết các tính năng CSS mà tôi đã sử dụng trong bài viết này. Mở tệp HTML và in dưới dạng tệp PDF sẽ không hiển thị kết quả như mong đợi

Nhưng có một công cụ tuyệt vời gọi là Prince XML, đây là công cụ dòng lệnh để chuyển đổi các tệp HTML sang PDF và hỗ trợ tất cả các tính năng CSS nâng cao [và thử nghiệm] này

Bạn có thể cài đặt nó cục bộ và tạo tệp PDF từ HTML. Tôi cũng đã tạo một hình ảnh Docker cho nó, giúp dễ dàng chuyển đổi tệp HTML mà không cần cài đặt bất cứ thứ gì. Để chuyển đổi tệp

h2 {
  string-set: chapter_title content[];
}

5 được lưu trữ cục bộ và lưu dưới dạng tệp

h2 {
  string-set: chapter_title content[];
}

6 trong thư mục

h2 {
  string-set: chapter_title content[];
}

7, chỉ cần chạy

@page {
  @bottom-center {
    content: counter[page];
  }
}

Bạn đã sẵn sàng. Chỉ cần tìm một dịch vụ in đẹp để gửi tệp PDF của bạn và nhận nó như một cuốn sách giấy cũ thực sự tốt. Tôi luôn rất hài lòng với Blurb cho cả sách ảnh và sách giáo khoa [tiểu thuyết], nhưng chắc hẳn còn rất nhiều sách khác

HTML có số trang không?

Hơn nữa bạn có thể thêm đánh số trang vào phần tử HTML từ đầu trang và chân trang .

Phương tiện in trong CSS là gì?

Có thể sử dụng quy tắc @media CSS để áp dụng một phần của biểu định kiểu dựa trên kết quả của một hoặc nhiều truy vấn phương tiện . Với nó, bạn chỉ định một truy vấn phương tiện và một khối CSS để áp dụng cho tài liệu khi và chỉ khi truy vấn phương tiện khớp với thiết bị có nội dung đang được sử dụng.