Nếu bạn là nhà phát triển web phát ốm với việc thiết lập bố cục tài liệu của mình
Tạo trang A4 của riêng bạn bằng HTML và CSS
Hello from h1 tag And I am h2
Cài đặt
git clone //github.com/kykungz/html-a4-paper.git
Chảy máu tùy chỉnh và lề
Bạn có thể chỉ định chảy máu và lề thông qua Biến CSS
Thêm nhiều trang
Bạn có thể thêm nhiều trang hơn với
Page 1 Page 2 Page 3
Lưu vào PDF
- Mở trong Chrome [Được khuyến nghị]
- Nhấn
Ctrl+P
hoặcCmd+P
- Thay đổi điểm đến thành
Save as PDF
Về cơ bản, tôi muốn có thể hiển thị trang HTML trong trình duyệt và phác thảo nội dung theo kích thước của trang khổ A4
Để đơn giản, tôi giả định rằng trang HTML sẽ chỉ chứa văn bản [không có hình ảnh, v.v. ] và sẽ không có thẻ
div.chapter, div.appendix {
page-break-after: always;
}
3 chẳng hạnNgoài ra, khi trang HTML được in ra, nó sẽ xuất hiện dưới dạng trang giấy khổ A4
Giải pháp tốt nhất
Nhiều năm trước, vào tháng 11 năm 2005, AlistApart. com đã xuất bản một bài báo về cách họ xuất bản một cuốn sách không sử dụng gì ngoài HTML và CSS. Nhìn thấy. http. // alistapart. com/bài viết/bùng nổ
Đây là một đoạn trích của bài báo đó
CSS2 có khái niệm về phương tiện được phân trang [nghĩ là các tờ giấy], trái ngược với phương tiện liên tục [nghĩ là thanh cuộn]. Biểu định kiểu có thể đặt kích thước của trang và lề của chúng. Các mẫu trang có thể được đặt tên và các thành phần có thể nêu trang được đặt tên mà chúng muốn được in trên đó. Ngoài ra, các thành phần trong tài liệu nguồn có thể buộc ngắt trang. Đây là một đoạn trích từ biểu định kiểu chúng tôi đã sử dụng
@page {
size: 7in 9.25in;
margin: 27mm 16mm 27mm 16mm;
}
Có một nhà xuất bản ở Hoa Kỳ, chúng tôi đã cung cấp kích thước trang tính bằng inch. Chúng tôi, là người châu Âu, tiếp tục với các phép đo số liệu. CSS chấp nhận cả hai
Sau khi thiết lập kích thước trang và lề, chúng tôi cần đảm bảo ngắt trang ở đúng vị trí. Đoạn trích sau đây cho thấy cách ngắt trang được tạo ra sau các chương và phụ lục
div.chapter, div.appendix {
page-break-after: always;
}
Ngoài ra, chúng tôi đã sử dụng CSS2 để khai báo các trang được đặt tên
div.titlepage {
page: blank;
}
Đó là, trang tiêu đề sẽ được in trên các trang có tên “trống. ” CSS2 đã mô tả khái niệm về các trang được đặt tên, nhưng giá trị của chúng chỉ trở nên rõ ràng khi có sẵn đầu trang và chân trang
Dù sao thì…
Vì bạn muốn in A4, tất nhiên bạn sẽ cần các kích thước khác nhau
________số 8_______Bài viết đi sâu vào những thứ như đặt ngắt trang, v.v. vì vậy bạn có thể muốn đọc nó hoàn toàn
Trong trường hợp của bạn, mẹo là tạo CSS in trước. Hầu hết các trình duyệt hiện đại [>2005] đều hỗ trợ thu phóng và đã có thể hiển thị trang web dựa trên CSS in
Bây giờ, bạn sẽ muốn làm cho màn hình web trông hơi khác một chút và điều chỉnh toàn bộ thiết kế để phù hợp với hầu hết các trình duyệt [kể cả những trình duyệt cũ, trước năm 2005]. Để làm được điều đó, bạn sẽ phải tạo một tệp CSS web hoặc ghi đè lên một số phần của CSS in của mình. Khi tạo CSS để hiển thị web, hãy nhớ rằng trình duyệt có thể có BẤT KỲ kích thước nào [nghĩ. “di động” cho đến “tivi màn hình lớn”]. Nghĩa. đối với CSS web, chiều rộng trang và chiều rộng hình ảnh của bạn được đặt tốt nhất bằng cách sử dụng chiều rộng thay đổi [%] để hỗ trợ nhiều thiết bị hiển thị và ứng dụng khách duyệt web nhất có thể
CHỈNH SỬA [26-02-2015]
Hôm nay, tôi tình cờ đọc được một bài báo khác, gần đây hơn tại SmashingMagazine, bài viết này cũng đi sâu vào thiết kế để in bằng HTML và CSS… đề phòng bạn có thể sử dụng thêm một hướng dẫn khác
CHỈNH SỬA [30-10-2018]
Tôi đã chú ý rằng
div.chapter, div.appendix {
page-break-after: always;
}
4 không hợp lệ CSS3, điều này thực sự đúng - tôi chỉ lặp lại đoạn mã được trích dẫn trong bài báo [như đã lưu ý] là CSS2 cũ tốt [điều này có ý nghĩa khi bạn nhìn vào năm bài báo . Dù sao, đây là mã CSS3 hợp lệ để thuận tiện cho việc sao chép và dán của bạn@media print {
body{
width: 21cm;
height: 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
}
Trong trường hợp bạn nghĩ rằng bạn thực sự cần pixel [bạn thực sự nên tránh sử dụng pixel], bạn sẽ phải quan tâm đến việc chọn đúng DPI để in
- 72 dpi [web] = 595 X 842 điểm ảnh
- 300 dpi [in] = 2480 X 3508 điểm ảnh
- 600 dpi [in chất lượng cao] = 4960 X 7016 điểm ảnh
Tuy nhiên, tôi sẽ tránh rắc rối và chỉ cần sử dụng
div.chapter, div.appendix {
page-break-after: always;
}
5 [centimet] hoặc div.chapter, div.appendix {
page-break-after: always;
}
6 [milimet] để định cỡ vì điều đó tránh các trục trặc hiển thị có thể phát sinh tùy thuộc vào ứng dụng khách mà bạn sử dụngGiải pháp liên quan
Html – Tạo một div lấp đầy chiều cao của không gian màn hình còn lại
cập nhật 2015. phương pháp flexbox
Có hai câu trả lời khác đề cập ngắn gọn đến flexbox; . Thông số kỹ thuật cho flexbox chắc chắn đã ổn định
Ghi chú. Mặc dù thông số kỹ thuật Bố cục hộp linh hoạt CSS đang ở giai đoạn Đề xuất ứng viên, nhưng không phải tất cả các trình duyệt đều đã triển khai nó. Việc triển khai WebKit phải có tiền tố là -webkit-; . 10 triển khai phiên bản mới nhất của thông số kỹ thuật, chưa được trộn. Xem bảng tương thích trên từng thuộc tính để biết trạng thái tương thích cập nhật
[lấy từ https. // nhà phát triển. mozilla. org/en-US/docs/Web/Guide/CSS/Flexible_boxes]
Tất cả các trình duyệt chính và IE11+ đều hỗ trợ Flexbox. Đối với IE 10 trở lên, bạn có thể sử dụng miếng đệm FlexieJS
Để kiểm tra hỗ trợ hiện tại, bạn cũng có thể xem tại đây.
ví dụ làm việc
Với flexbox, bạn có thể dễ dàng chuyển đổi giữa bất kỳ hàng hoặc cột nào có kích thước cố định, kích thước theo kích thước nội dung hoặc kích thước không gian còn lại. Trong ví dụ của tôi, tôi đã đặt tiêu đề để bắt kịp nội dung của nó [theo câu hỏi của OP], tôi đã thêm một chân trang để chỉ ra cách thêm vùng có chiều cao cố định và sau đó đặt vùng nội dung để lấp đầy khoảng trống còn lại
html,
body {
height: 100%;
margin: 0;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
header
[sized to content]
content
[fills remaining space]
footer [fixed height]
Trong CSS ở trên, thuộc tính flex viết tắt các thuộc tính flex-grow, flex-shrink và flex-basis để thiết lập tính linh hoạt của các mục flex. Mozilla có phần giới thiệu tốt về mô hình hộp linh hoạt
Html – Cách căn giữa phần tử theo chiều ngang
Bạn có thể áp dụng CSS này cho
div.chapter, div.appendix {
page-break-after: always;
}
7 bên trong#inner {
width: 50%;
margin: 0 auto;
}
Tất nhiên, bạn không cần phải đặt
div.chapter, div.appendix {
page-break-after: always;
}
8 thành div.chapter, div.appendix {
page-break-after: always;
}
9. Bất kỳ chiều rộng nào nhỏ hơn div.chapter, div.appendix {
page-break-after: always;
}
7 chứa sẽ hoạt động. div.titlepage {
page: blank;
}
1 là định tâm thực tếNếu bạn đang nhắm mục tiêu Internet Explorer 8 [và phiên bản mới hơn], thì tốt hơn là nên có cái này để thay thế
#inner {
display: table;
margin: 0 auto;
}
Nó sẽ làm cho phần tử bên trong ở giữa theo chiều ngang và nó hoạt động mà không cần thiết lập một
div.chapter, div.appendix {
page-break-after: always;
}
8 cụ thể