Bagaimana cara membuat Halaman HTML di halaman ukuran kertas A4?

388

Apakah mungkin untuk membuat halaman HTML berperilaku, misalnya, seperti halaman berukuran A4 di MS Word?

Pada dasarnya, saya ingin dapat menampilkan halaman HTML di browser, dan menguraikan konten dalam dimensi halaman ukuran A4.

Demi kesederhanaan, saya berasumsi bahwa halaman HTML hanya akan berisi teks (tidak ada gambar dll) dan tidak akan ada <br>tag misalnya.

Juga, ketika halaman HTML dicetak, itu akan keluar sebagai halaman kertas berukuran A4.

Zabba
sumber
1
The nyata "HTML untuk cetak" adalah comig! Lihat semua riwayat di stackoverflow.com/q/10641667/287948 dan modul fragmentasi level 3 W3C CSS , itu akan datang!
Peter Krauss
Apa niat untuk melakukan itu? Apakah meninggalkan MS Office untuk teknologi web? Setidaknya itulah yang saya coba tetapi masih butuh beberapa masukan bagaimana . Menjawab itu akan menyelesaikan cerita apa yang dimulai dengan pertanyaan ini.
Stefan

Jawaban:

318

Berabad-abad yang lalu, pada November 2005, AlistApart.com menerbitkan sebuah artikel tentang bagaimana mereka menerbitkan sebuah buku dengan menggunakan apa-apa selain HTML dan CSS. Lihat: http://alistapart.com/article/boom

Berikut kutipan dari artikel itu:

CSS2 memiliki gagasan tentang media paged (think sheets of paper), sebagai lawan dari media yang berkelanjutan (think scrollbars). Style sheet dapat mengatur ukuran halaman dan marginnya. Templat halaman dapat diberi nama dan elemen dapat menyatakan halaman bernama mana mereka ingin dicetak. Juga, elemen-elemen dalam dokumen sumber dapat memaksa istirahat halaman. Berikut cuplikan dari style sheet yang kami gunakan:

@page {
   size: 7in 9.25in;
   margin: 27mm 16mm 27mm 16mm;
}

Memiliki penerbit yang berbasis di AS, kami diberi ukuran halaman dalam inci. Kami, sebagai orang Eropa, melanjutkan pengukuran metrik. CSS menerima keduanya.

Setelah mengatur ukuran halaman dan margin, kami perlu memastikan ada istirahat halaman di tempat yang tepat. Kutipan berikut menunjukkan bagaimana page break dihasilkan setelah bab dan lampiran:

div.chapter, div.appendix {
    page-break-after: always;
}

Kami juga menggunakan CSS2 untuk mendeklarasikan halaman bernama:

div.titlepage {
  page: blank;
}

Yaitu, halaman judul harus dicetak pada halaman dengan nama "kosong." CSS2 menjelaskan konsep halaman bernama, tetapi nilainya hanya menjadi jelas ketika header dan footer tersedia.

Bagaimanapun…

Karena Anda ingin mencetak A4, tentu saja Anda membutuhkan dimensi yang berbeda:

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */
}

Artikel ini beralih ke hal-hal seperti pengaturan istirahat halaman, dll. Jadi Anda mungkin ingin membacanya sepenuhnya.

Dalam kasus Anda, triknya adalah membuat CSS cetak terlebih dahulu. Sebagian besar peramban modern (> 2005) mendukung pembesaran dan sudah dapat menampilkan situs web berdasarkan CSS cetak.

Sekarang, Anda ingin membuat tampilan web terlihat sedikit berbeda dan mengadaptasi seluruh desain agar sesuai dengan sebagian besar browser juga (termasuk yang lama, pra-2005). Untuk itu, Anda harus membuat file CSS web atau mengganti beberapa bagian CSS cetak Anda. Saat membuat CSS untuk tampilan web, ingat bahwa browser dapat memiliki ukuran APAPUN (pikirkan: "seluler" hingga "TV layar lebar"). Artinya: untuk CSS web, lebar halaman dan lebar gambar Anda paling baik diatur menggunakan lebar variabel (%) untuk mendukung sebanyak mungkin perangkat tampilan dan klien penelusuran web.

EDIT (26-02-2015)

Hari ini, saya kebetulan menemukan artikel lain yang lebih baru di SmashingMagazine yang juga beralih ke mendesain untuk dicetak dengan HTML dan CSS ... untuk berjaga-jaga jika Anda masih bisa menggunakan tutorial lain.

EDIT (30-10-2018)

Telah menarik perhatian saya bahwa sizeitu bukan CSS3 yang valid, yang memang benar - saya hanya mengulangi kode yang dikutip dalam artikel yang (seperti disebutkan) adalah CSS2 lama yang baik (yang masuk akal ketika Anda melihat tahun artikel dan jawaban ini pertama kali dipublikasikan). Bagaimanapun, ini kode CSS3 yang valid untuk kenyamanan salin dan tempel Anda:

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */
   } 
}

Jika Anda merasa Anda benar-benar membutuhkan piksel ( sebenarnya Anda harus menghindari menggunakan piksel ), Anda harus berhati-hati dalam memilih DPI yang benar untuk dicetak:

  • 72 dpi (web) = 595 X 842 piksel
  • 300 dpi (cetak) = 2480 X 3508 piksel
  • 600 dpi (kualitas cetak tinggi) = 4960 X 7016 piksel

Namun, saya akan menghindari kerumitan dan hanya menggunakan cm(sentimeter) atau mm(milimeter) untuk ukuran karena itu menghindari rendering gangguan yang dapat timbul tergantung pada klien yang Anda gunakan.

e-sushi
sumber
1
Terima kasih telah memperbarui jawaban ini agar sesuai dengan standar saat ini!
jumps4fun
@ A.com Tidak ada px karena itu akan tergantung pada DPI ... itulah sebabnya CSS mendukung unit pengukuran yang jelas ini yang disebut cmet al. Saya menyarankan Anda untuk membaca artikel terkait dan / atau setidaknya jawaban saya. Dengan begitu, Anda akan segera menyadari bahwa pertanyaan Anda sebenarnya tidak masuk akal. Juga, Anda mungkin ingin memposting pertanyaan Anda sebagai pertanyaan baru jika semuanya masih belum jelas. Ini adalah situs tanya jawab, bukan forum. \ o /
e-sushi
67

Akan cukup mudah untuk memaksa browser web untuk menampilkan halaman dengan dimensi piksel yang sama dengan A4. Namun, mungkin ada beberapa kebiasaan ketika hal-hal yang diberikan.

Dengan asumsi monitor Anda menampilkan 72 dpi, Anda dapat menambahkan sesuatu seperti ini:

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  </head>
  <body>
  </body>
</html>
Tim McNamara
sumber
19
Mengikuti saran Will Dean (yang masuk akal) menggunakan milimeter, Anda dapat memaksa browser untuk menghitung lebar / tinggi piksel: tubuh {tinggi: 420mm; lebar: 297mm; ...}
Tim McNamara
49
A4 sebenarnya 210x297 mm.
Fouronnes
8
Jadi, akhirnya potret DINA4:body { height:297mm; width:210mm; margin-left:auto; margin-right:auto; }
daVe
1
Melakukan sedikit wajar bekerja pada ini sekarang dan sementara 210x297 dimensi yang baik, mereka tidak harus dianggap sebagai mutlak cocok untuk halaman A4. Tes yang baik adalah mencetak-> PDF langsung dari Chrome dan gulir melalui halaman pratinjau jempol; bahkan tanpa margin ditetapkan, ketinggian penuh harus dikurangi untuk menghindari overflow -> yang menyebabkan semua halaman bernomor genap kosong.
cbmtrx
36

Ukuran A4 adalah 210x297mm

Jadi Anda dapat mengatur halaman HTML agar sesuai dengan ukuran tersebut dengan CSS:

html,body{
    height:297mm;
    width:210mm;
}
zurfyx
sumber
Bagaimana jika kita memiliki konten dinamis yang bisa mencapai 3-4 atau lebih halaman?
jazzbpn
24

Buat bagian dengan setiap halaman, dan gunakan kode di bawah ini untuk menyesuaikan margin, tinggi dan lebar.

Jika Anda mencetak ukuran A4.

Lalu pengguna

Size : 8.27in and 11.69 inches

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}

div.Section1 {
    page: Section1;
} 

kemudian buat div dengan semua konten Anda di dalamnya.

<div class="Section1"> 
    type your content here... 
</div>

atau

@media print {
    .page-break { 
        height: 0; 
        page-break-before: always; 
        margin: 0; 
        border-top: none; 
    }
}

body, p, a,
span, td { 
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin-left: 2em; 
    margin-right: 2em;
}

.page {
    height: 947px;
    padding-top: 5px;
    page-break-after: always;   
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    border-bottom: 1px solid #000;
}
Pir Abdul
sumber
Apakah Anda yakin itu berfungsi? Saya tidak dapat mereproduksi ini di Firefox dan Chrome terbaru.
Dan7
ya, kebanyakan saya melakukan pengembangan untuk chrome ... bekerja dengan baik dengan saya.
Pir Abdul
3
Saya tidak bisa @page Section1bekerja dengan Chrome 41.0.2272.77. Apakah Anda benar-benar yakin bahwa jawaban Anda berhasil? Coba misalnya untuk mengunjungi data:text/html,<style>@page x{size:100pt 200pt}</style><div style="page:x">x</div>dan membuka pratinjau cetak. Saya tidak melihat perbedaan antara itu dan data:text/html,x. Ketika saya ganti @page xdengan @page, maka itu berfungsi, tapi itu bukan pemilih halaman-spesifik.
Rob W
Bagi mereka yang tidak terbiasa meletakkan CSS dalam dokumen (seperti saya pada saat penulisan), Anda memasukkan kode ini dalam tag <style> </style> dan kemudian memanggil div (mis. <Div class = halaman> Stuff </ div > <div class = halaman> Lebih banyak barang </div>) di mana "Barang" dan "lebih banyak barang" adalah konten yang harus dimuat dalam satu halaman.
mkingsbu
16

Saya telah menggunakan HTML untuk menghasilkan laporan yang dicetak dengan benar pada ukuran sebenarnya di kertas nyata.

Jika Anda menggunakan mm sebagai unit Anda dengan hati-hati dalam file CSS, Anda akan baik-baik saja, setidaknya untuk satu halaman. Orang-orang dapat mengacaukan Anda dengan mengubah zoom cetak di browser mereka.

Sepertinya saya ingat semua yang saya lakukan hanya satu halaman, jadi saya tidak perlu khawatir tentang pagination - itu mungkin jauh lebih sulit.

Will Dean
sumber
14

Saya melihat solusi ini setelah mencari di google, mencari "template halaman CSS A4" (codepen.io). Ini menunjukkan area berukuran A4 (A3, A5, juga potret) di browser, menggunakan tag <page>. Di dalam tag ini, konten ditampilkan, tetapi posisi absolut masih berkaitan dengan area browser.

body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}
<page size="A4">A4</page>
<page size="A4" layout="portrait">A4 portrait</page>

Ini berfungsi untuk saya tanpa css / js-library lain untuk dimasukkan. Bekerja untuk browser saat ini (IE, FF, Chrome).

Cas Knook
sumber
Menggunakan contoh ini dengan FF 53.0.3 dan menempatkan dua halaman landscape setelah satu sama lain tidak berfungsi. Terlihat bagus dalam tampilan biasa, tetapi ketika memilih Print preview, ia membentang hingga 3 halaman.
lofihelsinki
Jangan bermaksud menyeret sapi tua keluar dari parit, tapi saya percaya bayangan kotak seharusnya box-shadow: none;dan bukan 0
NoobishPro
ini bekerja untuk saya dan saya harus mengubah ketinggian
Jomal Johny
Bagaimana jika kita memiliki konten dinamis yang bisa mencapai 3-4 atau lebih halaman?
jazzbpn
11
<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

Dalam normal Anda style.css:

table.tableclassname {
  width: 400px;
}

Di Anda print.css:

table.tableclassname {
  width: 16 cm;
}
Yakub
sumber
10

PPI dan DPI sama sekali tidak ada bedanya dengan bagaimana dokumen akan mencetak peramban. printer tidak mengambil informasi pada dot pitch layar atau DPI gambar dll. jika Anda mencetak gambar mereka akan mencetak pada ukuran yang serupa dengan proporsi bagaimana mereka ditampilkan di layar. prosesor cetak browser akan meningkatkan DPI gambar dari sesuatu yang agak rendah seperti 72dpi ke DPI apa pun sisa dokumen. katakanlah gambar ditampilkan sebagai setengah halaman lebar, maka secara fisik sekitar 4 "lebar. lebar piksel gambar akan kira-kira 300px untuk ditampilkan dengan benar di browser. Pada saat itu dicetak pada 300DPI nominal, prosesor telah menambahkan piksel dan gambar akan tumbuh sekitar 1200px yang pada 300 DPI adalah 4 ".

ketika datang ke elemen berbasis vektor atau non pixel seperti teks, printer memilih DPI sendiri dari driver yang tidak berhubungan dengan layar dot pitch atau lebar browser dll. jika browser adalah 3000px lebar, prosesor cetak akan membungkus teks yang sesuai.

Inilah yang menyulitkan pembuatan tampilan cetak: setiap browser dan printer akan menginterpretasikan ukuran teks (pt, em, px) dan mengatur jarak dengan caranya sendiri. tergantung pada apa printer, browser dan bahkan mungkin OS yang Anda gunakan, Anda akan mendapatkan jumlah garis dan karakter yang berbeda per halaman. jadi bahkan jika Anda menguji pada komputer Anda menggunakan browser dan printer Anda dan mencari tahu bahwa Anda dapat menampilkan teks dalam kotak di 640x900px dan itu sempurna di cetak, orang berikutnya yang mencoba untuk mencetak mungkin akan membuatnya mencetak dengan cara berbeda. benar-benar tidak ada cara untuk memaksa setiap printer dan browser untuk membuatnya identik setiap kali.

lupakan piksel dan lebih banyak lupakan DPI, satu-satunya hal yang dapat Anda gunakan untuk piksel adalah mengatur lebar tabel yang mensimulasikan lebar area cetak pada printer Anda. dalam hal ini saya menemukan bahwa lebar 640px dekat.

Quintin Humphreys
sumber
Baca banyak halaman dan semuanya menunjukkan bahwa peningkatan DPI akan menghasilkan ukuran yang lebih kecil saat mencetak (3000px / 300dpi = 10 inci). Tetapi ketika mencetak dari browser chrome saya, 600 DPI dan 1200 DPI mengarah ke ukuran yang sama persis di atas kertas. Benar-benar bingung sampai saya membaca ini!
Wang Sheng
10

Mencari masalah serupa yang saya temukan ini - http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4 adalah format dokumen, sebagai gambar layar yang akan tergantung pada resolusi gambar, misalnya dokumen A4 yang diubah ukurannya menjadi:

  • 72 dpi (web) = 595 X 842 piksel
  • 300 dpi (cetak) = 2480 X 3508 piksel (Ini adalah "A4" seperti yang saya tahu, yaitu "210mm X 297mm @ 300 dpi")
  • 600 dpi (cetak) = 4960 X 7016 piksel
Wojciech Bednarski
sumber
8

Saya tahu bahwa subjek ini sudah cukup tua tetapi saya ingin berbagi pengalaman tentang topik itu. Sebenarnya, saya sedang mencari modul yang dapat membantu saya dengan laporan harian saya. Saya sedang menulis beberapa dokumentasi dan beberapa laporan dalam HTML + CSS (bukan Word, Latex, OO, ...). Tujuannya adalah untuk mencetaknya di kertas A4 untuk dibagikan kepada teman-teman, ... Alih-alih mencari, saya memutuskan untuk memiliki sesi pengkodean lucu kecil untuk mengimplementasikan lib sederhana yang dapat menangani "halaman", nomor halaman, ringkasan, tajuk , footer, .... Akhirnya, saya melakukannya di ~~ 2j dan saya tahu itu bukan alat terbaik yang pernah ada tapi hampir ok untuk tujuan saya. Anda dapat melihat proyek ini di repo saya dan jangan ragu untuk membagikan ide Anda. Mungkin bukan yang Anda cari 100%, tetapi saya pikir modul ini dapat membantu Anda.

Pada dasarnya saya membuat halaman tubuh "width: 200mm;" dan wadah tinggi: 290mm (lebih kecil dari A4). Lalu saya menggunakan page-break-after: always; jadi opsi "cetak" browser tahu kapan harus membagi halaman.

repo: https://github.com/kursion/jsprint

Yves Lange
sumber
6

Secara teknis, Anda bisa, tetapi akan membutuhkan banyak usaha untuk membuat semua browser mencetak halaman persis seperti yang ditampilkan di layar. Juga, sebagian besar browser memaksa URL, tanggal cetak dan penomoran halaman pada hasil cetak, yang tidak selalu diinginkan. Ini tidak dapat diubah atau dinonaktifkan.

Sebagai gantinya, saya akan menyarankan untuk membuat PDF berdasarkan pada konten di layar dan melayani PDF untuk diunduh dan / atau dicetak. Meskipun sebagian besar pustaka PDF berbayar, ada beberapa alternatif gratis yang tersedia untuk membuat PDF dasar.

Prutswonder
sumber
5

Saya telah menggunakan 680px dalam laporan komersial untuk mencetak pada halaman A4 sejak tahun 1998. 700px tidak dapat dengan benar tergantung pada ukuran margin. Browser modern dapat mengecilkan halaman agar sesuai dengan halaman pada printer, tetapi jika Anda menggunakan 680 piksel Anda akan mencetak dengan benar di hampir semua browser.

Itu HTML untuk Anda Jalankan cuplikan kode dan lihat hasil de:

window.print();
<table width=680 border=1 cellpadding=20 cellspacing=0>
<tr><th>#</th><th>name</th></tr>
<tr align=center><td>1</td><td>DONALD TRUMP</td></tr>
<tr align=center><td>2</td><td>BARACK OBAMA</td></tr>
</table>

JSFiddle:

https://jsfiddle.net/ajofmm7r/

lynx_74
sumber
berapa tinggi untuk satu halaman penuh di px?
khaverim
4

Banyak cara untuk dilakukan:

html,body{
    height:297mm;
    width:210mm;
}


html,body{
    height:29.7cm;
    width:21cm;
}

html,body{
    height: 842px;
    width: 595px;
}
Nalan Madheswaran
sumber
3

Sangat mungkin untuk mengatur tata letak Anda untuk mengasumsikan proporsi halaman a4. Anda hanya perlu mengatur lebar dan tinggi sesuai (mungkin memeriksa window.innerHeightdan window.innerWidthmeskipun saya tidak yakin apakah itu dapat diandalkan).

Bagian yang sulit adalah dengan mencetak A4. Javascript misalnya hanya mendukung pencetakan halaman secara sementara dengan window.printmetode ini. Sebagai @Prutswonder menyarankan untuk membuat PDF dari halaman web mungkin adalah cara paling canggih untuk melakukan ini (selain memasok dokumentasi PDF di tempat pertama). Namun, ini tidak sepele seperti yang mungkin dipikirkan orang. Berikut ini tautan yang memiliki deskripsi kelas Java semua sumber terbuka untuk membuat PDF dari HTML: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .

Jelas sekali Anda telah membuat PDF dengan proporsi cetak A4 itu akan menghasilkan cetak A4 yang bersih dari halaman Anda. Apakah itu sepadan dengan investasi waktu adalah pertanyaan lain.

FK82
sumber