CSS Paged Media: Panduan Komprehensif untuk Pemula

Halo sana, para pengembang web yang bersemangat! Hari ini, kita akan meluncur ke dalam dunia yang menarik dari CSS Paged Media. Jangan khawatir jika Anda belum pernah mendengar tentang ini sebelumnya – kita akan mulai dari dasar dan naik tingkat perlahan-lahan. Pada akhir tutorial ini, Anda akan dapat menciptakan layout cetak yang memukau menggunakan CSS. Jadi, mari kita mulai!

Apa Itu CSS Paged Media?

CSS Paged Media adalah sekumpulan fitur CSS yang memungkinkan Anda mengontrol bagaimana konten web Anda terlihat saat dicetak atau dilihat dalam format berhalaman (seperti PDF). Itu seperti memberikan website Anda sebuah make-over untuk printer!

Bayangkan Anda telah menciptakan sebuah website yang indah, tapi saat Anda mencoba mencetaknya, semuanya terlihat kacau dan keluar dari tempatnya. Itu di mana CSS Paged Media datang untuk menyelamatkan! Itu membantu Anda mempertahankan kontrol atas layout Anda, bahkan saat itu tidak di layar.

Properti Terkait CSS Paged Media

mari kita lihat beberapa properti kunci yang membuat CSS Paged Media berkerja dengan magic:

Properti	Deskripsi	Contoh
@page	Menentukan dimensi dan margin halaman	@page { size: A4; margin: 2cm; }
size	Mengatur ukuran kotak halaman	size: 8.5in 11in;
marks	Menambahkan tanda pemotong dan/atau silang ke dokumen	marks: crop cross;
bleed	Menentukan area bleed untuk konten cetak	bleed: 0.5cm;
page-break-before	Mengontrol pemisahan halaman sebelum elemen	page-break-before: always;
page-break-after	Mengontrol pemisahan halaman setelah elemen	page-break-after: avoid;
page-break-inside	Mengontrol pemisahan halaman dalam elemen	page-break-inside: avoid;

mari kita lihat beberapa contoh penggunaannya:

@page {
size: A4;
margin: 2cm;
@top-center {
content: "My Awesome Document";
}
@bottom-right {
content: counter(page);
}
}

h1 {
page-break-before: always;
}

table {
page-break-inside: avoid;
}

Dalam contoh ini, kita menyiapkan halaman A4 dengan margin 2cm. Kita menambahkan header di bagian atas tengah setiap halaman dan nomor halaman di bagian bawah kanan. Kita juga memastikan bahwa setiap h1 dimulai di halaman baru dan tabel tidak terpotong diantara halaman.

At-rule CSS

CSS at-rule adalah pernyataan yang memberi perintah pada CSS bagaimana harus berperilaku. Mereka dimulai dengan tanda at (@) diikuti oleh identifier. mari kita lihat beberapa at-rule khusus untuk Media Halaman:

At-rule	Deskripsi	Contoh
@page	Menentukan kotak halaman untuk media berhalaman	@page :first { margin-top: 10cm; }
@top-left	Menentukan konten untuk sudut kiri atas halaman	@top-left { content: "Chapter 1"; }
@top-center	Menentukan konten untuk bagian tengah atas halaman	@top-center { content: "My Book"; }
@top-right	Menentukan konten untuk sudut kanan atas halaman	@top-right { content: date("yyyy-mm-dd"); }
@bottom-left	Menentukan konten untuk sudut kiri bawah halaman	@bottom-left { content: "Confidential"; }
@bottom-center	Menentukan konten untuk bagian tengah bawah halaman	@bottom-center { content: "Copyright 2023"; }
@bottom-right	Menentukan konten untuk sudut kanan bawah halaman	@bottom-right { content: counter(page); }

Berikut adalah contoh penggunaannya:

@page {
@top-center {
content: "Alice's Adventures in Wonderland";
font-family: "Times New Roman", serif;
font-size: 12pt;
}
@bottom-right {
content: "Page " counter(page);
}
}

@page :first {
@top-center { content: none; }
@bottom-right { content: none; }
}

Dalam contoh ini, kita menambahkan header ke setiap halaman dengan judul buku dan nomor halaman di bagian bawah kanan. Kita juga menghapus elemen ini dari halaman pertama untuk mendapatkan penampilan halaman judul yang lebih bersih.

Pseudo-Class CSS

Pseudo-class digunakan untuk menentukan keadaan khusus dari elemen. Dalam konteks Media Halaman, ada beberapa pseudo-class yang berguna:

Pseudo-class	Deskripsi	Contoh
:first	Memilih halaman pertama	@page :first { margin-top: 10cm; }
:left	Memilih semua halaman kiri	@page :left { margin-left: 4cm; }
:right	Memilih semua halaman kanan	@page :right { margin-right: 4cm; }
:blank	Memilih semua halaman kosong	@page :blank { @top-center { content: none; } }

mari kita lihat bagaimana kita dapat menggunakannya:

@page :first {
margin-top: 10cm;
@top-center { content: none; }
@bottom-right { content: none; }
}

@page :left {
margin-left: 4cm;
margin-right: 3cm;
@top-left {
content: "Alice's Adventures in Wonderland";
}
}

@page :right {
margin-left: 3cm;
margin-right: 4cm;
@top-right {
content: "Chapter " counter(chapter);
}
}

Dalam contoh ini, kita menciptakan layout yang berbeda untuk halaman pertama, halaman kiri, dan halaman kanan. Halaman pertama memiliki margin atas yang besar dan tanpa header atau footer. Halaman kiri memiliki judul buku di sudut kiri atas, sedangkan halaman kanan memiliki nomor bab di sudut kanan atas.

Kesimpulan

Dan begitu, teman-teman! Kita telah berjalan melalui dunia yang menarik dari CSS Paged Media. Dari menentukan ukuran halaman dan margin hingga mengontrol pemisahan halaman dan menambahkan header dan footer, Anda sekarang memiliki alat untuk menciptakan layout cetak yang indah dengan CSS.

Ingat, latihan membuat ahli. Cobalah untuk meng eksperimenkan properti dan at-rule ini dalam proyek Anda sendiri. Anda mungkin terkejut melihat betapa banyak kontrol Anda dapat mempunyai atas layout cetak Anda!

Selamat coding, dan mayat cetakan Anda selalu jernih dan indah!

Credits: Image by storyset