Bagaimana cara membuat Halaman HTML di halaman ukuran kertas A4?

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.

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.

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>

Ukuran A4 adalah 210x297mm

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

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

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;
}

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.

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).

<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;
}

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.

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

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

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.

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/

Banyak cara untuk dilakukan:

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


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

html,body{
    height: 842px;
    width: 595px;
}

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.