Mencetak halaman dengan page break

Saya membuat sebuah halaman website, di halaman tersebut terdapat dua buah heading 1, masing-masig heading memiliki paragraf. Setelah halaman tersebut dibuat tentunya halaman tersebut akan saya cetak menggunakan fasilitas cetak dengan ctrl+p yang ada di browser.

Nah, yang menjadi masalah adalah saya menginginkan setiap heading memiliki halamannya masing-masing, sedangkan saat ini, semua heading yang ada berada didalam satu halaman.

Untuk lebih jelasnya, silahkan lihat penampakan di bawah ini

Ini adalah html yang saya buat, dimana setiap heading dan paragraf dibungkus oleh sebuah class halaman

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cetak dengan page break</title>
</head>
<body>
	<div class="halaman">
		<h1>Ini akan muncul di halaman pertama</h1>
		<p>
			Ini adalah paragraf di halaman pertama dan Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, recusandae repudiandae tenetur adipisci! Ratione, voluptatem, numquam, quis in mollitia vel nobis eum impedit enim minima non beatae debitis quod ut?
		</p>
	</div>
	<!-- nah, yang saya inginkan disini akan dibuat halaman baru -->
	<div class="halaman">
		<h1>Ini akan muncul di halaman kedua</h1>
		<p>
			Ini adalah paragraf di halaman kedua dan Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, recusandae repudiandae tenetur adipisci! Ratione, voluptatem, numquam, quis in mollitia vel nobis eum impedit enim minima non beatae debitis quod ut?
		</p>
	</div>
</body>
</html>

dan gambar dibawah ini adalah tampilan setelah ctrl+p ditekan

Gambar-1

Yang saya inginkan setiap class halaman atau setiap heading berada di halaman baru ketika akan saya cetak atau saya convert ke pdf. Untuk menyelesaikan masalah ini, saya hanya perlu menambahkan sedikit css seperti di bawah ini

.halaman{
	page-break-after: always;
	page-break-inside: avoid;
}

sehingga, ketika saya kembali menekan ctrl+p hasilnya akan seperti ini : Gambar-2

Menyelesaikan masalah sepele diatas hanya memerlukan dua buah property, yaitu page-break-after yang memiliki fungsi untuk mengatur page-break(memisah halaman) setelah element tersebut, dan tentunya saya beri nilai always yang berarti buat sebuah halaman baru setelah tag class halaman, begitu juga dengan page-break-inside yang memiliki fungsi untuk mengatur page-break di dalam tag, pada kasus di atas saya memberikan nilai ‘avoid’ yang memerintahkan agar tidak membuat halaman baru di dalam tag class halaman jika memungkinkan.

Bagi anda yang ingin mempelajari seputar page-break secara mendalam, dapat membaca tulisan om Chris Coyier . Have fun dan semoga bermanfaat!

Lihat kode sumber

rss facebook twitter github youtube mail spotify instagram linkedin google pinterest medium vimeo