Dipublikasikan: 30 Oktober 2024
Mulai Chrome 131, Anda dapat menggunakan CSS untuk menambahkan konten ke margin halaman saat dicetak. Postingan ini menjelaskan model halaman untuk media yang dipaginasi, dan cara menggunakan fitur ini untuk meningkatkan kualitas output cetak dari halaman web Anda.
CSS mencakup spesifikasi yang berkaitan dengan media berhalaman, yaitu Modul Media Berhalaman CSS dan Konten Buatan CSS untuk Media Berhalaman. Aturan ini menentukan fitur yang hanya digunakan saat halaman dicetak (termasuk ke PDF). Ada agen pengguna yang mendukung CSS ini, dan memungkinkan Anda membuat buku dan materi cetak lainnya dari HTML dan CSS. Namun, fungsi ini tidak pernah didukung dengan baik di browser web, meskipun kita cukup sering perlu mencetak atau membuat PDF dari aplikasi.
Chrome dan Firefox mendukung aturan
@page @. Aturan ini
memungkinkan Anda menentukan ukuran halaman yang akan dicetak, dan ukuran
margin di sekitar konten. Mulai Chrome 131, Anda juga dapat menggunakan konten yang dihasilkan untuk menambahkan konten ke margin, dengan menargetkan aturan @margin yang relevan.
Model halaman
Model halaman yang digunakan dalam media berhalaman menentukan kotak halaman, yang merupakan lembar kertas Anda. Di dalam kotak halaman terdapat margin halaman, batas halaman, padding halaman, dan terakhir area halaman tempat konten Anda ditampilkan. Saat konten dicetak, konten tersebut akan dibagi menjadi beberapa halaman sesuai kebutuhan agar dapat memuatnya.
Margin halaman kemudian dibagi menjadi 16 kotak, dengan masing-masing memiliki aturan @ yang sesuai.
@top-left-corner@top-left@top-center@top-right@top-right-corner@left-top@left-middle@left-bottom@right-top@right-middle@right-bottom@bottom-left-corner@bottom-left@bottom-center@bottom-right@bottom-right-corner
Pengukuran kotak margin
Tinggi kotak atas dan bawah serta lebar kotak sisi kiri dan kanan ditentukan oleh ukuran margin yang ditetapkan menggunakan @page. Oleh karena itu, kotak sudut memiliki ukuran tetap yang dibuat oleh persimpangan margin tersebut. Tiga kotak di antara setiap sudut bersifat fleksibel. Perilakunya serupa dengan
kotak dalam tata letak fleksibel menggunakan flex: auto, sehingga kotak tersebut direntangkan untuk mengisi
ruang, tetapi jika Anda memasukkan string teks panjang ke dalam salah satu kotak, dan tidak ada teks di kotak lainnya,
kotak yang berisi teks akan bertambah besar, bukan melipat teks.
Menambahkan konten ke kotak margin
Untuk menambahkan konten ke kotak margin, gunakan konten yang dihasilkan CSS, seperti yang Anda lakukan dengan
pseudo-elemen ::before dan ::after. Dalam hal ini, gunakan aturan @ yang terkait dengan kotak yang ingin Anda targetkan. CSS berikut menambahkan teks "Buku saya" ke kotak margin kiri bawah atau halaman sebelah kanan. Teks tersebut juga diberi gaya.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
Selain string teks, Anda dapat menambahkan penghitung halaman ke margin. Penghitung page yang telah ditentukan sebelumnya berisi halaman saat ini. CSS berikut menambahkannya
ke kanan bawah halaman sebelah kanan dan kiri bawah halaman sebelah kiri.
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
Ada juga penghitung pages yang selalu berisi jumlah total halaman.
Hal yang perlu diperhatikan saat menggunakan margin halaman
Jika mencetak dari browser, browser akan otomatis menambahkan beberapa konten margin halaman jika ada ruang untuk menampilkannya. Tindakan ini akan dilakukan meskipun Anda telah menambahkan konten. Header dan footer yang dibuat otomatis ini dapat dinonaktifkan di dialog cetak.
Jika Anda menyetel margin di halaman ke 0, atau nilai yang sangat kecil sehingga tidak ada ruang untuk header dan footer browser, header dan footer tersebut tidak akan ditampilkan.
Karena konsep tata letak halaman default di Chromium, jika halaman pertama dokumen cetak Anda tidak memiliki ruang untuk konten otomatis, hal ini akan mencegah konten browser ditampilkan di halaman berikutnya, meskipun halaman tersebut memiliki ruang.
Kemungkinan masa depan untuk media berhalaman
Spesifikasi media yang dipaginasi mencakup beberapa fitur lain, yang dijelaskan dalam artikel Mendesain untuk Cetak dengan CSS. Jika Anda memiliki kasus penggunaan untuk salah satu fitur berikut, tambahkan ke bug yang ditautkan.
Tetapkan string
Buku sering kali mencetak judul bab saat ini di margin. Judul ini tidak dapat dikodekan secara permanen ke dalam CSS karena berubah saat Anda membaca buku. Properti
string-set memungkinkan Anda menetapkan nilai dari HTML untuk digunakan dalam
konten yang dihasilkan. CSS berikut mengasumsikan bahwa judul bab ditandai
sebagai <h1>. Mengambil konten setiap <h1> dan menggunakannya di margin kanan atas pada halaman sebelah kanan. Saat mencapai <h1> berikutnya, nilai akan diperbarui untuk margin setelah titik tersebut.
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
Bug Chromium untuk string-set dan string().
Referensi silang
Setelah dokumen dicetak, referensi ke halaman lain biasanya ditunjukkan dengan
menggunakan nomor halaman tempat referensi dapat ditemukan. Referensi silang ini dapat dibuat menggunakan target-counter. Jika diterapkan ke link, link akan berfungsi untuk
melompat ke referensi di web, saat dicetak, nomor halaman akan ditampilkan.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
Bug Chromium untuk referensi silang.
Catatan kaki
Catatan kaki juga merupakan fitur spesifikasi media yang dipaginasi. Di HTML, gunakan class untuk mengidentifikasi teks yang harus menjadi catatan kaki, misalnya:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
Kemudian, gunakan nilai footnote dari float untuk mengubah teks ini menjadi catatan kaki. Teks tersebut
akan dihapus dari paragraf saat dokumen dicetak dan ditampilkan sebagai
catatan kaki.
.fn {
float: footnote;
}