Cách kiểm tra css in trong chrome

Gỡ lỗi các biểu định kiểu in luôn là một vấn đề khó khăn. Cách làm truyền thống là thay đổi thủ công thuộc tính

@page {
    /* Browser default, customizable by the user in the print dialogue. */
    size: auto;

    /* Default, but explicitly in portrait or landscape orientation and not user-
    customizable. In my instance of Chrome, this is a vertical or horizontal letter
    format, but you might find something different depending on your locale. */
    size: portrait;
    size: landscape;

    /* Predefined format, can be coupled with an orientation. */
    size: letter;
    size: A4;
    size: A4 landscape;

    /* Custom, with same width and height. */
    size: 10cm;
    size: 420px;
    size: 6in;

    /* Different width and height. */
    size: 640px 360px;
    size: 20cm 15cm;
}

3 của tất cả các thẻ

@page {
    /* Browser default, customizable by the user in the print dialogue. */
    size: auto;

    /* Default, but explicitly in portrait or landscape orientation and not user-
    customizable. In my instance of Chrome, this is a vertical or horizontal letter
    format, but you might find something different depending on your locale. */
    size: portrait;
    size: landscape;

    /* Predefined format, can be coupled with an orientation. */
    size: letter;
    size: A4;
    size: A4 landscape;

    /* Custom, with same width and height. */
    size: 10cm;
    size: 420px;
    size: 6in;

    /* Different width and height. */
    size: 640px 360px;
    size: 20cm 15cm;
}

4 từ

@page {
    /* Browser default, customizable by the user in the print dialogue. */
    size: auto;

    /* Default, but explicitly in portrait or landscape orientation and not user-
    customizable. In my instance of Chrome, this is a vertical or horizontal letter
    format, but you might find something different depending on your locale. */
    size: portrait;
    size: landscape;

    /* Predefined format, can be coupled with an orientation. */
    size: letter;
    size: A4;
    size: A4 landscape;

    /* Custom, with same width and height. */
    size: 10cm;
    size: 420px;
    size: 6in;

    /* Different width and height. */
    size: 640px 360px;
    size: 20cm 15cm;
}

5 thành

@page {
    /* Browser default, customizable by the user in the print dialogue. */
    size: auto;

    /* Default, but explicitly in portrait or landscape orientation and not user-
    customizable. In my instance of Chrome, this is a vertical or horizontal letter
    format, but you might find something different depending on your locale. */
    size: portrait;
    size: landscape;

    /* Predefined format, can be coupled with an orientation. */
    size: letter;
    size: A4;
    size: A4 landscape;

    /* Custom, with same width and height. */
    size: 10cm;
    size: 420px;
    size: 6in;

    /* Different width and height. */
    size: 640px 360px;
    size: 20cm 15cm;
}

6 hoặc

@page {
    /* Browser default, customizable by the user in the print dialogue. */
    size: auto;

    /* Default, but explicitly in portrait or landscape orientation and not user-
    customizable. In my instance of Chrome, this is a vertical or horizontal letter
    format, but you might find something different depending on your locale. */
    size: portrait;
    size: landscape;

    /* Predefined format, can be coupled with an orientation. */
    size: letter;
    size: A4;
    size: A4 landscape;

    /* Custom, with same width and height. */
    size: 10cm;
    size: 420px;
    size: 6in;

    /* Different width and height. */
    size: 640px 360px;
    size: 20cm 15cm;
}

7 trong khi thử nghiệm

Tiện ích bổ sung dành cho nhà phát triển web phổ biến dành cho Firefox thậm chí còn có tùy chọn tự động thực hiện việc này cho bạn

Sau đó, một cái gì đó đã thay đổi

Chúng tôi phát hiện ra rằng các yêu cầu HTTP không cần thiết là không tốt. Chúng tôi cũng phát hiện ra rằng có một số vấn đề nghiêm trọng về hiệu suất với bản định kiểu in

Do đó, theo sự dẫn dắt của các dự án như HTML5 Boilerplate, tất cả chúng tôi đã chuyển sang viết các kiểu in của mình cùng dòng với phần còn lại của CSS

@media print {
	body { font-size: larger; }
	#ads, #junk { display: none; }
}

Các kiểu in nội tuyến lưu các yêu cầu HTTP và dễ bảo trì hơn, nhưng thật không may, chúng khiến việc kiểm tra khó khăn hơn một chút. Chúng không hoạt động với Tiện ích bổ sung dành cho nhà phát triển web của Firefox và việc tìm và thay thế đơn giản giờ khó hơn một chút

Tin tốt

Một phương tiện để mô phỏng loại phương tiện

@page {
    /* Browser default, customizable by the user in the print dialogue. */
    size: auto;

    /* Default, but explicitly in portrait or landscape orientation and not user-
    customizable. In my instance of Chrome, this is a vertical or horizontal letter
    format, but you might find something different depending on your locale. */
    size: portrait;
    size: landscape;

    /* Predefined format, can be coupled with an orientation. */
    size: letter;
    size: A4;
    size: A4 landscape;

    /* Custom, with same width and height. */
    size: 10cm;
    size: 420px;
    size: 6in;

    /* Different width and height. */
    size: 640px 360px;
    size: 20cm 15cm;
}

5 vừa cập bến Chrome Canary

Để sử dụng nó, trước tiên hãy mở cài đặt bằng cách nhấp vào bánh răng ở góc dưới cùng bên phải của DevTools

Tiếp theo, chọn menu Ghi đè, chọn hộp kiểm “Giả lập phương tiện CSS” và chọn “in”

Đó là nó. Điều này sẽ áp dụng cả hai quy tắc được xác định trong các biểu định kiểu

@page {
    /* Browser default, customizable by the user in the print dialogue. */
    size: auto;

    /* Default, but explicitly in portrait or landscape orientation and not user-
    customizable. In my instance of Chrome, this is a vertical or horizontal letter
    format, but you might find something different depending on your locale. */
    size: portrait;
    size: landscape;

    /* Predefined format, can be coupled with an orientation. */
    size: letter;
    size: A4;
    size: A4 landscape;

    /* Custom, with same width and height. */
    size: 10cm;
    size: 420px;
    size: 6in;

    /* Different width and height. */
    size: 640px 360px;
    size: 20cm 15cm;
}

9 bên ngoài cũng như các quy tắc trong các khối

@page {
    /* No margin, hide the header and footer. */
    margin: 0;

    /* Some margin. Header and footer will be shown if the browser thinks there's
    enough space (in my ad-hoc tests, anything larger than 8mm will trigger them). */
    margin: 1in;

    /* Different margins vertically and horizontally. */
    margin: 2cm 4cm;

    /* Wildly different margins – the order matches the standard CSS margin property:
    north, east, south, west. */
    margin: 1cm 2cm 3cm 4cm;

    /* You can also specify single margins only. */
    margin-left: 20pt;
}

0 nội tuyến. Để có điểm thưởng, hãy kết hợp điều này với một ứng dụng như LiveReload có thể áp dụng các thay đổi CSS mà không cần làm mới trang và bạn có một phương tiện mạnh mẽ để phát triển và gỡ lỗi các biểu định kiểu in

Tính năng này đã được thêm vào phiên bản 25 của Chrome Canary, vì vậy, hy vọng tính năng này sẽ ổn định trong Chrome vào khoảng Chrome 27. Nếu bạn chưa có Canary, bạn nên cân nhắc cài đặt nó song song với bản phát hành ổn định

KHÔNG AI NGHĨ VỀ CÂY

Tất nhiên, cách dứt khoát để kiểm tra biểu định kiểu in là in một trang web trên các mảnh giấy thực tế. Tôi đã làm điều này rất nhiều lần. Và nếu bạn đã đọc đến đây thì rất có thể bạn phải. Hy vọng rằng lần sau khi gỡ lỗi in, bạn có thể tiết kiệm được một ít giấy

Lần cuối cùng bạn in một trang web là khi nào? . Ví dụ

• Dự án của tôi markdeep-slides, được xây dựng dựa trên trình kết xuất Markdown trong trình duyệt Markdeep để cho phép tạo và phát lại trang trình bày liền mạch, không cần thiết lập, dựa vào công cụ in tích hợp sẵn của trình duyệt để xuất PDF

• Tương tự, markdeep-thesis, mà sự phát triển ban đầu là một phần của luận án Thạc sĩ của tôi (với mục đích sắp chữ nó), sẽ trở nên vô nghĩa nếu không có tính năng in trong trình duyệt vững chắc

• Bởi vì tôi là người không thể sửa chữa được, tôi cũng đã định dạng mẫu sơ yếu lý lịch và thư xin việc cá nhân của mình (dựa trên sơ yếu lý lịch html của Min-Zhong John Lu) bằng cách sử dụng HTML và CSS – không thể nếu không tin tưởng vào chức năng in của trình duyệt. Trong trường hợp này, tôi đang sử dụng Makefile kiểu cũ tốt để tạo tệp PDF bằng phiên bản Chrome không đầu. (Thông tin thêm về điều đó ở dưới cùng của bài viết này. )

Nhưng các trình duyệt muốn làm quen với trang của bạn trên đường tạo PDF. Với mục đích tốt nhất, họ thêm các lề bổ sung, điền vào chúng một số siêu dữ liệu mà bạn không muốn trên tài liệu đã tạo của mình và loại bỏ tất cả các màu nền. Tuyệt vời để in, nhưng không phải tất cả những gì bạn muốn trên bản PDF riêng của mình. Hãy xem ảnh chụp màn hình đối thoại In của Chrome bị cắt xén kém này

Hộp thoại In của Chrome (như xuất hiện trên máy Mac vào đầu năm 2021) đang hiển thị bản xem trước của Bách khoa toàn thư về Chế tác bản khắc gỗ của David Bull, với tất cả cài đặt được đặt thành mặc định

Trong số rất nhiều tùy chọn này, năm tùy chọn có thể được kiểm soát trực tiếp hoặc gián tiếp thông qua CSS. Bố cục, khổ giấy, Lề, Đầu trang và cuối trang và Đồ họa nền

Trong bài đăng này, tôi sẽ tập trung vào Chrome đơn giản vì tất cả các trình duyệt chính, công cụ in của nó đã tuân thủ các tiêu chuẩn web chặt chẽ hơn các trình duyệt khác trong ít nhất vài năm qua. Điều quan trọng là kể từ đầu năm 2021, các trình duyệt không dựa trên Chromium không cho phép chỉ định kích thước giấy tùy ý bằng CSS – đây là điều đầu tiên chúng tôi sẽ xem xét

Ở cuối bài đăng này, tôi cũng sẽ viết về các tính năng liên quan khác của CSS trong bối cảnh in, cộng với cách in sang PDF bằng Chrome không đầu

Đặt kích thước “giấy”

Bạn không nên ra lệnh cho khổ giấy trên bất kỳ trang web cũ nào – xét cho cùng, người dùng có thể có sở thích riêng của họ. Tuy nhiên, tính năng CSS này có ích khi đã biết kích thước giấy mong muốn, chẳng hạn như trong ngữ cảnh của markdeep-thesis nơi người dùng có thể định cấu hình nó trong mã nguồn hoặc cho các trang trình bày markdeep, trong đó bạn muốn chính xác một trang trình bày trên mỗi trang

Bên trong bộ chọn

@page {
    /* No margin, hide the header and footer. */
    margin: 0;

    /* Some margin. Header and footer will be shown if the browser thinks there's
    enough space (in my ad-hoc tests, anything larger than 8mm will trigger them). */
    margin: 1in;

    /* Different margins vertically and horizontally. */
    margin: 2cm 4cm;

    /* Wildly different margins – the order matches the standard CSS margin property:
    north, east, south, west. */
    margin: 1cm 2cm 3cm 4cm;

    /* You can also specify single margins only. */
    margin-left: 20pt;
}

2 của CSS, bạn có thể chỉ định thuộc tính

@page {
    /* No margin, hide the header and footer. */
    margin: 0;

    /* Some margin. Header and footer will be shown if the browser thinks there's
    enough space (in my ad-hoc tests, anything larger than 8mm will trigger them). */
    margin: 1in;

    /* Different margins vertically and horizontally. */
    margin: 2cm 4cm;

    /* Wildly different margins – the order matches the standard CSS margin property:
    north, east, south, west. */
    margin: 1cm 2cm 3cm 4cm;

    /* You can also specify single margins only. */
    margin-left: 20pt;
}

0 có giá trị xác định khổ giấy. Bất kỳ cái nào cũng sẽ hoạt động – gần như chắc chắn có cái gì đó cho trường hợp sử dụng của bạn

@page {
    /* Browser default, customizable by the user in the print dialogue. */
    size: auto;

    /* Default, but explicitly in portrait or landscape orientation and not user-
    customizable. In my instance of Chrome, this is a vertical or horizontal letter
    format, but you might find something different depending on your locale. */
    size: portrait;
    size: landscape;

    /* Predefined format, can be coupled with an orientation. */
    size: letter;
    size: A4;
    size: A4 landscape;

    /* Custom, with same width and height. */
    size: 10cm;
    size: 420px;
    size: 6in;

    /* Different width and height. */
    size: 640px 360px;
    size: 20cm 15cm;
}

Theo caniuse. com, tính năng này chỉ hoạt động trong các trình duyệt dựa trên Chromium như Chrome, Edge và Opera – cả Firefox và Safari đều không triển khai tính năng này

Bởi vì tôi biết bạn sẽ hỏi. Bạn có thể lồng bộ chọn

@page {
    /* No margin, hide the header and footer. */
    margin: 0;

    /* Some margin. Header and footer will be shown if the browser thinks there's
    enough space (in my ad-hoc tests, anything larger than 8mm will trigger them). */
    margin: 1in;

    /* Different margins vertically and horizontally. */
    margin: 2cm 4cm;

    /* Wildly different margins – the order matches the standard CSS margin property:
    north, east, south, west. */
    margin: 1cm 2cm 3cm 4cm;

    /* You can also specify single margins only. */
    margin-left: 20pt;
}

2 bên trong truy vấn

@page {
    /* No margin, hide the header and footer. */
    margin: 0;

    /* Some margin. Header and footer will be shown if the browser thinks there's
    enough space (in my ad-hoc tests, anything larger than 8mm will trigger them). */
    margin: 1in;

    /* Different margins vertically and horizontally. */
    margin: 2cm 4cm;

    /* Wildly different margins – the order matches the standard CSS margin property:
    north, east, south, west. */
    margin: 1cm 2cm 3cm 4cm;

    /* You can also specify single margins only. */
    margin-left: 20pt;
}

2 – xét cho cùng, kích thước giấy chỉ phù hợp trong ngữ cảnh in – nhưng không sử dụng truy vấn phương tiện này sẽ không làm hỏng bất cứ thứ gì

Thêm hoặc xóa lề

Tương tự, điều này hữu ích nếu tài liệu của bạn đã chứa lề mà bạn muốn, trong trường hợp đó, bạn muốn loại bỏ bất kỳ lề bổ sung nào mà trình duyệt sẽ thêm vào. Là một lợi ích bổ sung, việc đặt lề thành 0 sẽ ẩn các dòng đầu trang và chân trang mặc định mà trình duyệt của bạn hiển thị trên mỗi trang – không có đủ dung lượng cho chúng

@page {
    /* No margin, hide the header and footer. */
    margin: 0;

    /* Some margin. Header and footer will be shown if the browser thinks there's
    enough space (in my ad-hoc tests, anything larger than 8mm will trigger them). */
    margin: 1in;

    /* Different margins vertically and horizontally. */
    margin: 2cm 4cm;

    /* Wildly different margins – the order matches the standard CSS margin property:
    north, east, south, west. */
    margin: 1cm 2cm 3cm 4cm;

    /* You can also specify single margins only. */
    margin-left: 20pt;
}

Theo caniuse. com, tính năng này hoạt động trong các trình duyệt dựa trên Chromium như Chrome, Edge và Opera, cũng như trong Firefox và – tin hay không tùy bạn. – Internet Explorer, quay lại IE 8. Safari, trong khi đó, chưa bao giờ nghe nói về điều này

Nhưng xin chờ chút nữa. Bạn có thể nhắm mục tiêu trang đầu tiên của tài liệu của mình một cách riêng biệt bằng cách sử dụng lớp giả

@page {
    /* No margin, hide the header and footer. */
    margin: 0;

    /* Some margin. Header and footer will be shown if the browser thinks there's
    enough space (in my ad-hoc tests, anything larger than 8mm will trigger them). */
    margin: 1in;

    /* Different margins vertically and horizontally. */
    margin: 2cm 4cm;

    /* Wildly different margins – the order matches the standard CSS margin property:
    north, east, south, west. */
    margin: 1cm 2cm 3cm 4cm;

    /* You can also specify single margins only. */
    margin-left: 20pt;
}

3. Các trang dành cho

@page {
    /* No margin, hide the header and footer. */
    margin: 0;

    /* Some margin. Header and footer will be shown if the browser thinks there's
    enough space (in my ad-hoc tests, anything larger than 8mm will trigger them). */
    margin: 1in;

    /* Different margins vertically and horizontally. */
    margin: 2cm 4cm;

    /* Wildly different margins – the order matches the standard CSS margin property:
    north, east, south, west. */
    margin: 1cm 2cm 3cm 4cm;

    /* You can also specify single margins only. */
    margin-left: 20pt;
}

4 (được đánh số lẻ, giả sử tài liệu của bạn được viết bằng chữ viết từ trái sang phải) và

@page {
    /* No margin, hide the header and footer. */
    margin: 0;

    /* Some margin. Header and footer will be shown if the browser thinks there's
    enough space (in my ad-hoc tests, anything larger than 8mm will trigger them). */
    margin: 1in;

    /* Different margins vertically and horizontally. */
    margin: 2cm 4cm;

    /* Wildly different margins – the order matches the standard CSS margin property:
    north, east, south, west. */
    margin: 1cm 2cm 3cm 4cm;

    /* You can also specify single margins only. */
    margin-left: 20pt;
}

5 (được đánh số chẵn)

@page :first {
    margin: auto 3cm;
}

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

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

Điều này có vẻ hơi lỗi thời – tại sao người ta lại cần các lề khác nhau trên các trang bên trái và bên phải? . e. , lề phải của trang bên trái và lề trái của trang bên phải) có hình thức giống nhau, sau khi được liên kết, với từng lề bên ngoài, điều này có thể yêu cầu các điều chỉnh mà các lớp giả này cho phép

Nếu bạn sử dụng các lớp giả này, Firefox sẽ không hiểu bạn nữa – tôi tin rằng bạn đang bắt đầu hiểu tại sao tôi lại thêm tuyên bố từ chối trách nhiệm chỉ hoạt động trong Chrome ở đầu bài viết này

Buộc màu nền

Tất cả các trình duyệt mặc định không in màu nền để tiết kiệm mực – rất hữu ích. Nếu thực sự cần, bạn có thể buộc bật lại nền trên cơ sở từng thành phần, chẳng hạn như đối với các đoạn trích

@page {
    /* No margin, hide the header and footer. */
    margin: 0;

    /* Some margin. Header and footer will be shown if the browser thinks there's
    enough space (in my ad-hoc tests, anything larger than 8mm will trigger them). */
    margin: 1in;

    /* Different margins vertically and horizontally. */
    margin: 2cm 4cm;

    /* Wildly different margins – the order matches the standard CSS margin property:
    north, east, south, west. */
    margin: 1cm 2cm 3cm 4cm;

    /* You can also specify single margins only. */
    margin-left: 20pt;
}

6 được xen kẽ với văn xuôi của bạn có nền màu xám nhạt mà bạn muốn giữ nguyên

@media print {
	body { font-size: larger; }
	#ads, #junk { display: none; }
}

1

Chế độ

@page {
    /* No margin, hide the header and footer. */
    margin: 0;

    /* Some margin. Header and footer will be shown if the browser thinks there's
    enough space (in my ad-hoc tests, anything larger than 8mm will trigger them). */
    margin: 1in;

    /* Different margins vertically and horizontally. */
    margin: 2cm 4cm;

    /* Wildly different margins – the order matches the standard CSS margin property:
    north, east, south, west. */
    margin: 1cm 2cm 3cm 4cm;

    /* You can also specify single margins only. */
    margin-left: 20pt;
}

7 này cũng vô hiệu hóa việc điều chỉnh các thành phần có độ tương phản thấp của một số trình duyệt trong chế độ in

Không có gì ngăn cản bạn sử dụng bộ chọn

@page {
    /* No margin, hide the header and footer. */
    margin: 0;

    /* Some margin. Header and footer will be shown if the browser thinks there's
    enough space (in my ad-hoc tests, anything larger than 8mm will trigger them). */
    margin: 1in;

    /* Different margins vertically and horizontally. */
    margin: 2cm 4cm;

    /* Wildly different margins – the order matches the standard CSS margin property:
    north, east, south, west. */
    margin: 1cm 2cm 3cm 4cm;

    /* You can also specify single margins only. */
    margin-left: 20pt;
}

8 ở đây, nhưng hãy suy nghĩ kỹ trước khi làm như vậy - những người dùng thực sự in trên giấy có thể không hài lòng nếu bạn làm như vậy (nhưng người bán mực sẽ tôn thờ bạn trong các nghi lễ bí mật của họ)

Theo caniuse. com, tính năng này được hiểu bởi tất cả các trình duyệt chính. vâng

Tại sao lại phải dựa vào chức năng in của trình duyệt khi có jsPDF và các thư viện tương tự?

Vì các tính năng CSS mà tôi đã thảo luận trong bài viết này phụ thuộc vào người dùng đang chạy các phiên bản hiện đại của các trình duyệt cụ thể, nên sẽ rất tuyệt nếu có khả năng tạo PDF (bất kể là để in hay chỉ để đọc ngoại tuyến) từ một

Có rất nhiều thư viện có mục đích thực hiện điều này, bao gồm cả jsPDF. Họ ít nhiều hoàn thành công việc bằng cách triển khai trình kết xuất HTML tùy chỉnh trong JavaScript – một nhiệm vụ khó khăn không có cơ hội tương thích hoàn toàn với các tiêu chuẩn web đang phát triển. phông chữ web và các tính năng CSS nâng cao có xu hướng giảm dần

Trừ khi tài liệu bạn đang cố gắng tạo PDF rất đơn giản, nếu không tài liệu đó sẽ trông không giống với trong trình duyệt – điều này không quá quan trọng trong nhiều ngữ cảnh, nhưng như bất kỳ người cầu toàn về bố cục và kiểu chữ nào cũng có thể chứng thực, là

phụ lục. Các tính năng CSS liền kề in khác

Trong khi viết bài viết này, tôi đã nghĩ đến hai tính năng CSS bổ sung không tương tác với cài đặt trong hộp thoại In của Chrome nhưng lại rất phù hợp khi thiết kế tài liệu có thể in được

gạch nối

Thuộc tính

@page {
    /* No margin, hide the header and footer. */
    margin: 0;

    /* Some margin. Header and footer will be shown if the browser thinks there's
    enough space (in my ad-hoc tests, anything larger than 8mm will trigger them). */
    margin: 1in;

    /* Different margins vertically and horizontally. */
    margin: 2cm 4cm;

    /* Wildly different margins – the order matches the standard CSS margin property:
    north, east, south, west. */
    margin: 1cm 2cm 3cm 4cm;

    /* You can also specify single margins only. */
    margin-left: 20pt;
}

9 bị tắt theo mặc định xác định cách văn bản được gạch nối khi nó ngắt dòng trên nhiều dòng. Để đảm bảo đặt đúng dấu gạch nối, hãy chỉ định ngôn ngữ mà tài liệu của bạn được viết – e. g. ,

@page :first {
    margin: auto 3cm;
}

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

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

0 nếu nó bằng tiếng Anh

@media print {
	body { font-size: larger; }
	#ads, #junk { display: none; }
}

6

Giải thích chi tiết hơn về chức năng này và cách gợi ý thủ công tại các điểm ngắt dòng, cùng với ghi chú về hỗ trợ trình duyệt, có sẵn trên MDN. Điều khiển gạch nối nâng cao được thảo luận trong bài viết của Richard Rutter

Kiểm soát ngắt trang

Bạn có thể yêu cầu trình duyệt tránh phá vỡ một phần tử nhất định trên các trang (hoặc cột). Ví dụ: bạn sẽ không muốn một

@page :first {
    margin: auto 3cm;
}

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

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

1 chứa một hình ảnh và chú thích của nó được chia thành hai trang – nói một cách dễ hiểu, chú thích không phải là chú thích nếu nó không theo dõi những thứ liên quan đến nó

Đó là những gì tài sản của

@page :first {
    margin: auto 3cm;
}

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

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

2 (nghệ sĩ trước đây gọi là

@page :first {
    margin: auto 3cm;
}

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

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

3) dành cho

@page {
    /* No margin, hide the header and footer. */
    margin: 0;

    /* Some margin. Header and footer will be shown if the browser thinks there's
    enough space (in my ad-hoc tests, anything larger than 8mm will trigger them). */
    margin: 1in;

    /* Different margins vertically and horizontally. */
    margin: 2cm 4cm;

    /* Wildly different margins – the order matches the standard CSS margin property:
    north, east, south, west. */
    margin: 1cm 2cm 3cm 4cm;

    /* You can also specify single margins only. */
    margin-left: 20pt;
}

0

Thông tin chi tiết khác, bao gồm hỗ trợ trình duyệt, có sẵn trên MDN. Ngoài ra còn có các thuộc tính liên quan, nếu bí truyền hơn một chút,

@page :first {
    margin: auto 3cm;
}

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

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

4 và

@page :first {
    margin: auto 3cm;
}

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

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

5

phụ lục. In không đầu

Vì tôi thích Safari hơn Chrome để lướt web hàng ngày, nên khá bất tiện khi phải kích hoạt Chrome mỗi khi tôi muốn, chẳng hạn như tạo phiên bản PDF cho sơ yếu lý lịch của mình. May mắn thay, mọi phiên bản Chrome gần đây đều có thể chạy ở chế độ không đầu – tôi. e. , trên dòng lệnh và không cần mở GUI của nó

Điều này liên quan đến việc tìm ra vị trí mà tệp thực thi Chrome của bạn tồn tại – vị trí sẽ khác nhau giữa các nền tảng. Vì tôi đang dùng máy Mac nên bạn có thể tìm thấy của tôi tại

@page :first {
    margin: auto 3cm;
}

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

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

6. Bởi vì quá dài để gõ mỗi lần, tôi đã xác định một bí danh trong

@page :first {
    margin: auto 3cm;
}

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

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

7 của mình

@page {
    /* No margin, hide the header and footer. */
    margin: 0;

    /* Some margin. Header and footer will be shown if the browser thinks there's
    enough space (in my ad-hoc tests, anything larger than 8mm will trigger them). */
    margin: 1in;

    /* Different margins vertically and horizontally. */
    margin: 2cm 4cm;

    /* Wildly different margins – the order matches the standard CSS margin property:
    north, east, south, west. */
    margin: 1cm 2cm 3cm 4cm;

    /* You can also specify single margins only. */
    margin-left: 20pt;
}

5

Sau đó, để tạo tệp PDF

@page :first {
    margin: auto 3cm;
}

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

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

8 từ tài liệu HTML

@page :first {
    margin: auto 3cm;
}

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

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

9, hãy chạy

@page {
    /* No margin, hide the header and footer. */
    margin: 0;

    /* Some margin. Header and footer will be shown if the browser thinks there's
    enough space (in my ad-hoc tests, anything larger than 8mm will trigger them). */
    margin: 1in;

    /* Different margins vertically and horizontally. */
    margin: 2cm 4cm;

    /* Wildly different margins – the order matches the standard CSS margin property:
    north, east, south, west. */
    margin: 1cm 2cm 3cm 4cm;

    /* You can also specify single margins only. */
    margin-left: 20pt;
}

8

Cờ

@media print {
	body { font-size: larger; }
	#ads, #junk { display: none; }
}

10 xác định thời gian Chrome chờ giữa tải trang và in – điều này cho phép bố cục ổn định và mã JavaScript chạy. Các tài liệu phức tạp có thể yêu cầu giá trị cao hơn

@media print {
	body { font-size: larger; }
	#ads, #junk { display: none; }
}

11. Trên một số nền tảng, bạn cũng có thể cần cung cấp cờ

@media print {
	body { font-size: larger; }
	#ads, #junk { display: none; }
}

12

1. Giá trị yêu thích của mọi kỹ sư cơ sở dữ liệu – nó không bao giờ gây ra bất kỳ rắc rối nào.  

2. Hoặc, dài dòng hơn. Trong quá trình vừa tốt nghiệp đại học, tôi thấy mình vừa tốt nghiệp vừa muốn sử dụng LaTeX cho mọi thứ – và chắc chắn bạn sẽ hiểu rằng một lập trình viên nghiêm túc không thể viết sơ yếu lý lịch của họ trong Google Docs. (Trên thực tế, một lập trình viên nghiêm túc sẽ hoàn toàn làm điều đó bởi vì họ quá bận viết các chương trình nghiêm túc để bận tâm đến các chi tiết nhỏ của định dạng sơ yếu lý lịch. )

3. Bạn sẽ nghĩ rằng nếu có cờ

   @media print {
   	body { font-size: larger; }
   	#ads, #junk { display: none; }
   }
   

   13, thì cũng sẽ có cờ để định cấu hình các cài đặt còn lại thường xuất hiện trong hộp thoại In. Tuy nhiên, theo hiểu biết tốt nhất của tôi, không có.  

4. Đó chỉ là một ước tính gần đúng của những gì xảy ra - ngân sách thời gian ảo thực sự phức tạp hơn thế một chút.