CSS page-break-before

จดไว้เดี๋ยวลืม

ความต้องการคือ สั่งพิมพ์จากหน้าเวบ แล้วให้มันแบ่งหน้าให้ตรงจุดที่เราต้องการให้ขึ้นหน้าใหม่
คุ้นๆ ว่า CSS มันมีพร็อพเพอตี้ตัวนึง เลยไปหาดูใน W3C
แล้วก็เจอตัวอย่าง เค้าใช้แบบนี้

ในแท็ก style ก็สร้างคลาสสำหรับ div ขั้นมาคลาสนึง
สมมุติตั้งว่า pageBreak ก็จะเป็นแบบนี้

<style>
    div.pageBreak { page-break-before: always; }
</style>

เวลาจะใช้ ก็ใส่แท็ก div ตรงที่จะให้ขึ้นหน้าใหม่เวลาสั่งพิมพ์

<div class="pageBreak"></div>

ง่ายๆ แค่นี้แหละ
ลองทดสอบดู

<html><head>
<style>
    div.pageBreak { page-break-before: always; }
</style>
</head>
<body>
xxxxx
<div class="pageBreak"></div>
yyyyy
<div class="pageBreak"></div>
zzzzz
</body>
</html>

เรียบร้อย…เปิดดูแล้วกด Print Preview…x, y, z พิมพ์แยกกัน 3 หน้าถูกต้อง

ที่จริงในตัวอย่างเค้าเขียนแท็ก div แบบนี้
<div class="pageBreak" />
ซึ่งปรากฏว่าบน IE มันแสดงผลถูกจริง แต่พอใช้ Firefox แล้วเจ๊ง
y กับ z มันอยู่หน้าเดียวกันเฉยไม่ยอมแยก ก็เลยต้องเขียน <div></div> อย่างที่เห็น
เพื่อให้ใช้ได้ทั้งสองบราวเซอร์หลักๆ นี่ก่อน
(ดูเหมือนจิ้งจอกไฟยังไม่ซัพพอร์ตการย่อปิดแท็กที่ควรมีอิลิเมนท์
เลยเขียนแบบในตัวอย่างไม่ได้)

วันนี้เอาแค่นี้ก่อน ^_^

Leave a Reply

Your email address will not be published.