Mengatur Pemisahan Halaman HTML pageBreakAfter Style DOM
Properti Style pageBreakAfter DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai behavior page break setelah elemen berada pada mode print atau mode print preview. Properti Style pageBreakAfter tidak berdampak untuk elemen posisi absolut.
Sebelum memahami lebih dalam materi tentang Mengatur Pemisahan Halaman HTML pageBreakAfter Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Lapisan Atas HTML Menggunakan paddingTop Style DOM, Mengatur Lapisan Kanan HTML Menggunakan paddingRight Style DOM, dan Mengatur Lapisan Kiri HTML Menggunakan paddingLeft Style DOM.
Sintak:
Return Values: Berfungsi untuk mengembalikan sebuah string yang merepresentasikan behavior page break setelah elemen yang dicetak.
Sintak:
- Untuk mendapatkan nilai properti: object.style.pageBreakAfter
- Untuk mengatur nilai properti: object.style.pageBreakAfter = "auto|always|avoid|emptystring|left|right|initial|inherit"
Return Values: Berfungsi untuk mengembalikan sebuah string yang merepresentasikan behavior page break setelah elemen yang dicetak.
Property Values:
Contoh: Pengaturan sebuah halaman break setelah elemen <p> dengan nilai id="footer". Berikut adalah program ilustrasi dari properti Style pageBreakAfter.
Catatan: Untuk melihat hasil output, simpan kode program pada dokumen HTML dan jalankan hasilnya menggunakan browser. Hasil atau output akan terlihat ketika dilakukan PRINT PREVIEW dari file HTML.
- auto: Digunakan untuk menambahkan page break setelah elemen tertentu jika diperlukan.
- always: Digunakan untuk menambahkan sebuah page break sebelum dan sesudah elemen.
- avoid: Digunakan untuk menghindari sebuah halaman sebelum dan sesudah elemen tertentu.
- emptystring: Page break tidak dimasukkan setelah elemen tertentu.
- left: Digunakan untuk menambahkan satu atau dua halaman break setelah elemen tertentu, sehingga halaman selanjutnya dianggap sebagai left page.
- right: Digunakan untuk menambahkan satu atau dua halaman break setelah elemen tertentu, sehingga halaman selanjutnya dianggap sebagai right page.
- initial: Digunakan untuk mengatur nilai properti menjadi nilai default-nya.
- inherit: Digunakan untuk menerima nilai turunan properti dari elemen parent.
Contoh: Pengaturan sebuah halaman break setelah elemen <p> dengan nilai id="footer". Berikut adalah program ilustrasi dari properti Style pageBreakAfter.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style pageBreakAfter
pada HTML
</title>
<style>
h1
{
color: green;
}
h2
{
font-family: Impact;
}
body
{
text-align: center;
}
</style>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h2>
Properti Style pageBreakAfter
</h2>
<br>
<p id="myfooter">
Blog TIK merupakan portal ilmu
komputer.
</p>
<p>
Untuk mengatur page break
setelah paragraf footer,
double klik pada tombol "Set
Page Break":
</p>
<br>
<button ondblclick="pagebreak()">
Set Page Break
</button>
<script>
function pagebreak()
{
document.getElementById("myfooter")
.style.pageBreakAfter = "always";
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style pageBreakAfter
Untuk mengatur page break setelah paragraf footer, double klik pada tombol "Set Page Break":
Catatan: Untuk melihat hasil output, simpan kode program pada dokumen HTML dan jalankan hasilnya menggunakan browser. Hasil atau output akan terlihat ketika dilakukan PRINT PREVIEW dari file HTML.
Pemisahan halaman dalam pengaturan tata letak halaman sebuah dokumen dapat dilakukan dengan menggunakan berbagai cara yang disediakan oleh fitur desain halaman. Salah satunya adalah menggunakan properti dalam pengaturan gaya elemen HTML yang disebut dengan pageBreakAfter. Properti ini berperan dalam mengatur apakah pemisahan halaman dilakukan setelah elemen tertentu pada dokumen. Dengan mengoptimalkan penggunaan pageBreakAfter, pengalaman membaca atau mencetak halaman dapat ditingkatkan.
Pemisahan halaman pada dasarnya digunakan untuk memisahkan konten dalam dokumen yang panjang, terutama dalam pencetakan atau dalam tampilan cetak. Tanpa pengaturan pemisahan halaman yang baik, konten bisa terlihat tumpang tindih atau terpotong ketika dicetak. Oleh karena itu, pageBreakAfter menjadi salah satu pengaturan yang dapat digunakan untuk menentukan titik pemisahan halaman secara otomatis setelah elemen yang dipilih.
Dalam konteks elemen HTML, properti pageBreakAfter dapat diatur untuk elemen blok seperti div, paragraf, atau elemen lainnya. Penggunaan properti ini biasanya lebih terlihat pengaruhnya dalam proses pencetakan dokumen, namun bisa juga berdampak pada tampilan halaman pada perangkat yang mendukung pengaturan pemisahan halaman. Penggunaan pengaturan ini memberikan kontrol lebih bagi desainer web atau pengembang dalam mengatur tata letak halaman dokumen.
Baca Juga:
Secara umum, pageBreakAfter diatur dengan memilih nilai tertentu yang menentukan apakah elemen tersebut akan diikuti dengan pemisahan halaman. Nilai-nilai yang umum digunakan dalam properti ini meliputi 'auto', 'always', 'avoid', dan 'left' atau 'right' dalam beberapa kasus tertentu. Masing-masing nilai ini memiliki peran yang berbeda, yang mempengaruhi apakah pemisahan halaman dilakukan dan bagaimana elemen-elemen yang ada di halaman tersebut ditampilkan dalam hal pemisahan antarhalaman.
Nilai 'auto' adalah nilai default dari properti ini. Ketika menggunakan nilai ini, browser akan menilai secara otomatis apakah pemisahan halaman diperlukan setelah elemen tersebut, tergantung pada kebutuhan dan format dokumen. Nilai ini memungkinkan penataan halaman menjadi lebih fleksibel, karena browser akan memutuskan pemisahan halaman berdasarkan elemen yang ada dan panjang konten.
Sementara itu, nilai 'always' memberi instruksi kepada browser untuk selalu melakukan pemisahan halaman setelah elemen yang ditentukan, tanpa melihat panjang konten atau elemen lainnya. Hal ini sangat berguna dalam konteks pengaturan cetakan formal, seperti laporan atau dokumen yang memerlukan pemisahan halaman yang konsisten setelah setiap bagian atau bab tertentu.
Nilai 'avoid', di sisi lain, berfungsi untuk menghindari pemisahan halaman setelah elemen yang ditentukan. Ini berguna saat pengaturan dokumen memerlukan agar elemen tertentu tetap berada dalam satu halaman yang sama tanpa terpotong. Biasanya, pengaturan ini digunakan pada elemen yang memiliki konten penting atau panjang, yang tidak seharusnya terpecah menjadi dua bagian ketika dicetak atau ditampilkan pada layar.
Ada pula nilai-nilai lain seperti 'left' dan 'right' yang dapat diterapkan pada beberapa format halaman atau tata letak khusus. Nilai ini lebih sering digunakan pada dokumen yang diformat untuk pencetakan buku atau jurnal, di mana halaman kiri dan kanan memiliki pengaturan yang berbeda terkait pemisahan halaman.
Penting untuk memahami bahwa pengaturan pemisahan halaman dengan pageBreakAfter biasanya berfokus pada bagaimana elemen-elemen di dalam halaman dipisahkan saat proses pencetakan atau tampilan print media. Hal ini berarti bahwa pengaturan ini tidak selalu berlaku pada tampilan biasa di layar perangkat. Namun, pengaturan ini memberikan fleksibilitas tambahan dalam mencetak dokumen, terutama dalam skenario penggunaan media cetak atau dokumen yang dihasilkan dalam bentuk PDF.
Selain itu, penggunaan pageBreakAfter dapat diatur pada berbagai elemen dalam dokumen HTML. Sebagai contoh, pengaturan ini dapat diterapkan pada elemen pembungkus seperti div, paragraf, tabel, dan elemen lainnya yang memiliki tampilan blok. Pengaturan yang tepat akan memastikan bahwa elemen-elemen tersebut tidak terpotong atau terdistorsi saat dicetak, memberikan pengalaman yang lebih baik bagi pembaca dokumen.
Sebagai tambahan, pengaturan pemisahan halaman yang tepat dapat membantu meningkatkan aksesibilitas dokumen dalam berbagai situasi. Misalnya, bagi mereka yang perlu mencetak dokumen dengan format tertentu, properti ini memberikan kemampuan untuk memisahkan konten dengan cara yang terstruktur dan rapi. Hal ini tidak hanya bermanfaat untuk presentasi visual, tetapi juga untuk kepentingan organisasi dan struktur dokumen yang lebih baik.
Namun, penggunaan properti pageBreakAfter harus disesuaikan dengan kebutuhan dan tujuan dari dokumen tersebut. Dalam dokumen yang tidak memerlukan pemisahan halaman setelah setiap elemen, pengaturan ini mungkin tidak perlu diterapkan. Sebaliknya, pada dokumen yang panjang dan kompleks, pemisahan halaman yang teratur dapat membantu menjaga konten tetap terorganisir dan mudah dipahami.
Meskipun begitu, penting juga untuk mempertimbangkan tampilan di layar, bukan hanya hasil cetak. Pengaturan pemisahan halaman sering kali lebih relevan pada konteks pencetakan, tetapi ada kalanya penggunaan pengaturan ini dapat mempengaruhi tampilan halaman web pada perangkat tertentu. Oleh karena itu, pengembang atau desainer perlu mempertimbangkan dengan seksama bagaimana properti ini diterapkan agar tidak mengganggu pengalaman pengguna.
Penting untuk dicatat bahwa tidak semua browser mendukung properti ini dengan cara yang sama. Dalam beberapa kasus, pengaturan ini mungkin tidak berfungsi sesuai harapan, tergantung pada dukungan browser atau perangkat yang digunakan untuk menampilkan atau mencetak dokumen. Oleh karena itu, pengujian dan pengecekan yang teliti terhadap tampilan dan hasil cetak sangat disarankan sebelum menggunakan pengaturan ini secara luas dalam proyek desain halaman.
Dalam pengembangan web, properti seperti pageBreakAfter memberikan cara untuk mengontrol tata letak halaman dalam konteks media cetak atau layar khusus. Dengan memanfaatkan pengaturan ini dengan bijaksana, dokumen yang dihasilkan dapat memberikan pengalaman membaca yang lebih terstruktur dan profesional. Pemisahan halaman yang rapi dan teratur memungkinkan pembaca untuk menikmati dokumen dengan cara yang lebih nyaman, menghindari gangguan atau kesalahan dalam pencetakan.
Secara keseluruhan, properti pageBreakAfter dalam pengaturan gaya elemen HTML memberikan fleksibilitas tambahan dalam mengelola bagaimana elemen-elemen halaman dipisahkan ketika proses pencetakan dilakukan. Dengan pengaturan yang tepat, pemisahan halaman dapat membantu menciptakan dokumen yang lebih rapi, teratur, dan profesional. Hal ini tidak hanya meningkatkan pengalaman pencetakan, tetapi juga membantu dalam memastikan bahwa konten disajikan dengan cara yang sesuai dengan tujuan desain dan pengaturan tata letak halaman.
Referensi Tambahan:
- 7 Value Properti Position Style DOM pada HTML
- 11 Karakter Tanda Kutip Style DOM pada HTML
- 6 Value Properti Resize Style DOM pada HTML
- 5 Value Properti Right Style DOM pada HTML
- 4 Contoh Properti tableLayout Style DOM pada HTML
- 4 Value Properti tabSize Style DOM pada HTML
- 5 Value Properti textAlign Style DOM pada HTML
Artikel ini akan dibaca oleh: Dina Agustianingsih, Dinar Hari Syahputra, Dinda Suci Anggraeni, Dionicius Cita Buana Liman, dan Dirra Eka Aprillyanti.
5 komentar untuk "Mengatur Pemisahan Halaman HTML pageBreakAfter Style DOM"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti pageBreakAfter Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan oleh seorang pengembang web untuk mengaktifkan properti pageBreakAfter Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Apple Safari
Apa yang dimaksud dengan properti pageBreakAfter Style DOM pada HTML?
BalasHapusProperti pageBreakAfter Style DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai behavior page break setelah elemen yang digunakan untuk pencetakkan atau pratinjau cetak.
HapusProperti pageBreakAfter Style DOM pada HTML merupakan properti yang digunakan untuk mengembalikan dan memodifikasi behavior page break untuk pencetakkan atau pratinjau cetak setelah elemen HTML yang terdapat dalam dokumen HTML.
Hapus