Membuat halaman website untuk mencetak

Selain menata tampilan di layar, kita juga bisa menata tampilan konten website untuk media cetak, Dengan kita melalui properti page-brea...


halaman web untuk mencetak
Selain menata tampilan di layar, kita juga bisa menata tampilan konten website untuk media cetak, Dengan kita melalui properti page-break-*, Kita bisa memecah mecah sebuah halaman website menjadi beberapa halaman saat dicetak, Cobalah untuk contoh berikut lalu lakukan Print Previw atau cetak langsung halaman website untuk melihat hasil pemecahananya.
<!DOCTYPE html>
<html>
    <head>
      <title>Menata Halaman Cetak</title>
      <style>
       @media print {
           h2 {page-break-before: always;}
           hr {page-break-after: always;}
           p {page-break-inside: avold}
        }
      </style>
    </head>
   
    <body>
      <h1>Halaman Pertama</h1>
      <p>Paragraf ini dicetak di halaman pertama</p>
      <h2>Halaman Pertama</h2>
      <p>Paragraf ini dicetak di halaman kedua</p>
      <h3>Halaman Pertama</h3>
      <p>Paragraf ini dicetak di halaman ketiga</p>
      <h4>Halaman Pertama</h4>
      <p>Paragraf ini dicetak di halaman keempat</p>
    </body>
</html>

Berikut penjelasan properti yang digunakan :
# page-break-after
Opsi nilai nya menentukan apakah setelah elemen ini koten di cetak di halaman baru, Nilainya "auto, always, avoid, atau right". Default nya adalah auto.

# page-break-before
Opsi nilainya menetukan apakah sebelum elemen ini, konten dicetak di halaman baru, Nilainya "auto, always, avoid, left, atau right". Defaultnya auto.

#page-break-inside
Opsi nilainya menentukan apakah konten di dalam elemen ini boleh dipecah menjadi halaman baru (di-page-break). Nilainya avoid atau auto. Default nya auto.

Postingan Terkait

0 komentar