Làm cách nào để thay đổi kích thước trang trên a4 trong html?

Question

Giấy HTML A4

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

Nội dung chính Show

Cài đặt
Chảy máu tùy chỉnh và lề
Thêm nhiều trang
Lưu vào PDF
cập nhật 2015. phương pháp flexbox
ví dụ làm việc
Kích thước của tờ A4 trong HTML là bao nhiêu?
Chiều rộng của bảng trong HTML cho A4 là bao nhiêu?
Kích thước chiều cao và chiều rộng của A4 trong PX HTML là bao nhiêu?
Kích thước của A4 trong CSS PX là gì?

Tạo trang A4 của riêng bạn bằng HTML và CSS

<body>
  <div class="page">
    
    <h1>Hello from h1 tagh1>
    <h2>And I am h2h2>
    
  div>
body>

Làm cách nào để thay đổi kích thước trang trên a4 trong html?

Cài đặt

git clone https://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

<body style="--bleeding: 0.5cm;--margin: 1cm;">
  <div class="page">
    
  div>
body>

Thêm nhiều trang

Bạn có thể thêm nhiều trang hơn với

<body>
  
  <div class="page">Page 1div>
  <div class="page">Page 2div>
  <div class="page">Page 3div>
body>

Lưu vào PDF

Mở trong Chrome (Được khuyến nghị)
Nhấn Ctrl+P hoặc Cmd+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ạn

Ngoà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ụng

Giả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ể

Kích thước của tờ A4 trong HTML là bao nhiêu?

A4. Điều này phù hợp với tiêu chuẩn, kích thước ISO. 210mm x 297mm .

Chiều rộng của bảng trong HTML cho A4 là bao nhiêu?

Chiều rộng trang A4 tính bằng px là 2480 pixel x 3508 pixel . vì vậy bạn sẽ đặt chiều rộng tối đa của bảng thành 2480px để nó không vượt quá khổ giấy. Hãy đoán bảng của bạn id="table", sau đó phong cách của bạn sẽ là. Lưu câu trả lời này.

Kích thước chiều cao và chiều rộng của A4 trong PX HTML là bao nhiêu?

Kích thước A4 tính bằng pixel ở 300 DPI. 2480 x 3508 pixel

Kích thước của A4 trong CSS PX là gì?

Kích thước giấy A4 tương đương tính bằng pixel ở 300 DPI và 72 DPI tương ứng là. 2480 pixel x 3508 pixel (độ phân giải bản in) 595 pixel x 842 pixel (độ phân giải màn hình)

programming html

Làm cách nào để thay đổi kích thước trang trên a4 trong html?

Cài đặt

Chảy máu tùy chỉnh và lề

Thêm nhiều trang

Lưu vào PDF

Giải pháp tốt nhất

Giả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

ví dụ làm việc

Html – Cách căn giữa phần tử theo chiều ngang

Kích thước của tờ A4 trong HTML là bao nhiêu?

Chiều rộng của bảng trong HTML cho A4 là bao nhiêu?

Kích thước chiều cao và chiều rộng của A4 trong PX HTML là bao nhiêu?

Kích thước của A4 trong CSS PX là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội