HTML DOM Style pageBreakBefore প্রপার্টি একটি HTML ডকুমেন্টে একটি HTML এলিমেন্টের আগে প্রিন্টিং বা প্রিন্ট প্রিভিউয়ের জন্য পেজ-ব্রেক বিহেবিয়র রিটার্ন এবং মডিফাই করে।
সিনট্যাক্স
নিচে সিনট্যাক্স দেওয়া হলো:
১. pageBreakBefore রিটার্ন করা
object.pageBreakBefore
২. pageBreakBefore মডিফাই করা
object.pageBreakBefore = “value”
এখানে value হতে পারে:
| মান | ব্যাখ্যা |
|---|---|
| Initial | এটি এই প্রপার্টির মানকে এর ডিফল্ট মান সেট করে। |
| inherit | এটি এই প্রপার্টির মানকে এর প্যারেন্ট এলিমেন্ট থেকে ইনহেরিট করে |
| auto | এটি এলিমেন্টের আগে পেজ ব্রেক ইনসার্ট করে যদি প্রয়োজন হয়। |
| always | এটি সবসময় এলিমেন্টের আগে পেজ ব্রেক ইনসার্ট করে। |
| avoid | এটি এলিমেন্টের আগে পেজ ব্রেক এড়িয়ে চলে। |
| left | এতে নেক্স্ট পেজকে লেফট পেজ ধরা হয় যখন এক বা দুই পেজ ব্রেক ইনসার্ট করা হয় এলিমেন্টের আগে। |
| right | এতে নেক্স্ট পেজকে রাইট পেজ ধরা হয় যখন এক বা দুই পেজ ব্রেক ইনসার্ট করা হয় এলিমেন্টের আগে। |
| খালি স্ট্রিং(“”) | এটি এলিমেন্টের আগে কোনো পেজ ব্রেক ইনসার্ট করে না। |
HTML DOM Style pageBreakBefore প্রপার্টির একটি উদাহরণ দেখা যাক:
উদাহরণ
<!DOCTYPE html> <html> <style> body { color: #000; height: 100vh; background-color: #8BC6EC; background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%); } .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; } p { text-align: center; } </style> <body> <h1 style="text-align:center">DOM Style pageBreakBefore প্রপার্টি ডেমো</h1> <p> Hi! I'm a para element with some dummy text. Hi! I'm a para element with some dummy text. </p> <p class="page-break"> Hi! I'm second para element with some dummy text. Hi! I'm a second element with some dummy text. </p> <button onclick="set()" class="btn">এখানে পেজ ব্রেক করুন</button> <p> Hi! I'm another para element with some dummy text. Hi! I'm another para element with some dummy text. </p> <script> function set() { document.querySelector(".page-break").style.pageBreakBefore = "always"; } </script> </body> </html>আউটপুট
এখন প্রিন্ট প্রিভিউ খুলুন এবং নিরীক্ষণ করুন আমাদের HTML পেজ কীভাবে প্রদর্শিত হবে।
এখন ওয়েব পেজে উপলব্ধ লাল বাটনে ক্লিক করুন এবং আবার প্রিন্ট প্রিভিউ খুলুন আমাদের ওয়েবপেজটি আবার देखने के लिए। এখানে আপনি স্পষ্টভাবে দেখতে পাবেন যে আমাদের ওয়েব পেজ দুটি পেজে বিভক্ত হয়েছে।
