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.
0 komentar