CSS Paged Media - กฎ @page
สื่อเพจแตกต่างจากสื่อต่อเนื่องตรงที่เนื้อหาของเอกสารถูกแบ่งออกเป็นหน้าแยกอย่างน้อยหนึ่งหน้า สื่อเพจ ได้แก่ กระดาษแผ่นใสหน้าที่แสดงบนหน้าจอคอมพิวเตอร์เป็นต้น
มาตรฐาน CSS2 แนะนำคุณสมบัติการควบคุมการแบ่งหน้าขั้นพื้นฐานบางอย่างที่ให้ผู้เขียนช่วยเบราว์เซอร์หาวิธีพิมพ์เอกสารได้ดีที่สุด
โมเดลเพจ CSS2 ระบุวิธีจัดรูปแบบเอกสารภายในพื้นที่สี่เหลี่ยม - กล่องเพจ - ที่มีความกว้างและความสูง จำกัด คุณลักษณะเหล่านี้แบ่งออกเป็นสองกลุ่ม -
- คุณสมบัติ CSS2 ที่กำหนดโครงร่างหน้าเฉพาะ
- คุณสมบัติ CSS2 ที่ควบคุมการแบ่งหน้าของเอกสาร
การกำหนดเพจ: กฎ @page
CSS2 กำหนด "กล่องหน้า" ซึ่งเป็นกล่องของมิติข้อมูลที่ จำกัด ซึ่งจะแสดงเนื้อหา กล่องหน้าเป็นพื้นที่สี่เหลี่ยมที่มีสองพื้นที่ -
The page area- พื้นที่หน้ารวมถึงกล่องที่วางไว้ในหน้านั้น ขอบของพื้นที่หน้าทำหน้าที่เป็นบล็อกเริ่มต้นสำหรับโครงร่างที่เกิดขึ้นระหว่างตัวแบ่งหน้า
The margin area - ล้อมรอบพื้นที่หน้า
คุณสามารถระบุมิติการวางแนวระยะขอบ ฯลฯ ของกล่องเพจภายในกฎ @page ขนาดของกล่องเพจถูกตั้งค่าด้วยคุณสมบัติ "ขนาด" ขนาดของพื้นที่เพจคือขนาดของกล่องเพจลบด้วยพื้นที่ขอบ
ตัวอย่างเช่นกฎ @page ต่อไปนี้ตั้งค่าขนาดกล่องเพจเป็น 8.5 × 11 นิ้วและสร้างระยะขอบ '2 ซม.' ทุกด้านระหว่างขอบกล่องหน้าและพื้นที่หน้า -
<style type = "text/css">
<!--
@page { size:8.5in 11in; margin: 2cm }
-->
</style>
คุณสามารถใช้คุณสมบัติระยะขอบขอบบนขอบล่างขอบซ้ายและขอบขวาภายในกฎ @page เพื่อกำหนดระยะขอบสำหรับเพจของคุณ
สุดท้ายคุณสมบัติเครื่องหมายจะถูกใช้ภายในกฎ @page เพื่อสร้างเครื่องหมายครอบตัดและการลงทะเบียนนอกกล่องหน้าบนแผ่นงานเป้าหมาย โดยค่าเริ่มต้นจะไม่มีการพิมพ์เครื่องหมายใด ๆ คุณอาจจะใช้อย่างใดอย่างหนึ่งหรือทั้งสองของพืชและข้ามคำหลักในการสร้างเครื่องหมายครอบตัดและเครื่องหมายการลงทะเบียนตามลำดับหน้าพิมพ์เป้าหมาย
การตั้งค่าขนาดหน้า
ขนาดคุณสมบัติระบุขนาดและทิศทางของกล่องหน้า มีสี่ค่าที่สามารถใช้สำหรับขนาดหน้า -
auto - กล่องหน้าจะถูกกำหนดขนาดและการวางแนวของแผ่นงานเป้าหมาย
landscape- ลบล้างการวางแนวของเป้าหมาย กล่องหน้ามีขนาดเดียวกับเป้าหมายและด้านยาวจะเป็นแนวนอน
portrait- ลบล้างการวางแนวของเป้าหมาย กล่องหน้ามีขนาดเดียวกับเป้าหมายและด้านที่สั้นกว่าจะอยู่ในแนวนอน
length- ค่าความยาวสำหรับคุณสมบัติ "ขนาด" สร้างกล่องหน้าแบบสัมบูรณ์ หากระบุค่าความยาวเพียงค่าเดียวค่านี้จะกำหนดทั้งความกว้างและความสูงของกล่องหน้า ไม่อนุญาตให้ใช้ค่าเปอร์เซ็นต์สำหรับคุณสมบัติ "ขนาด"
ในตัวอย่างต่อไปนี้ขอบด้านนอกของกล่องหน้าจะสอดคล้องกับเป้าหมาย ค่าเปอร์เซ็นต์ของคุณสมบัติ "ระยะขอบ" จะสัมพันธ์กับขนาดเป้าหมายดังนั้นหากขนาดแผ่นงานเป้าหมายคือ 21.0 ซม. × 29.7 ซม. (เช่น A4) ระยะขอบจะเท่ากับ 2.10 ซม. และ 2.97 ซม.
<style type = "text/css">
<!--
@page {
size: auto; /* auto is the initial value */
margin: 10%;
}
-->
</style>
ตัวอย่างต่อไปนี้กำหนดความกว้างของกล่องหน้าเป็น 8.5 นิ้วและความสูงคือ 11 นิ้ว กล่องหน้าในตัวอย่างนี้ต้องการขนาดแผ่นงานเป้าหมาย 8.5 "× 11" หรือใหญ่กว่า
<style type = "text/css">
<!--
@page {
size: 8.5in 11in; /* width height */
}
-->
</style>
เมื่อคุณสร้างเค้าโครงเพจที่ตั้งชื่อแล้วคุณสามารถใช้มันในเอกสารของคุณได้โดยการเพิ่มคุณสมบัติเพจเป็นสไตล์ที่จะนำไปใช้กับองค์ประกอบในเอกสารของคุณในภายหลัง ตัวอย่างเช่นลักษณะนี้แสดงตารางทั้งหมดในเอกสารของคุณบนหน้าแนวนอน -
<style type = "text/css">
<!--
@page { size : portrait }
@page rotated { size : landscape }
table { page : rotated }
-->
</style>
เนื่องจากกฎข้างต้นขณะพิมพ์หากเบราว์เซอร์พบองค์ประกอบ <table> ในเอกสารของคุณและเค้าโครงหน้าปัจจุบันเป็นเค้าโครงแนวตั้งเริ่มต้นจะเริ่มหน้าใหม่และพิมพ์ตารางในหน้าแนวนอน
หน้าซ้ายขวาและหน้าแรก
เมื่อพิมพ์เอกสารสองด้านกล่องหน้าที่อยู่ทางซ้ายและขวาควรแตกต่างกัน สามารถแสดงผ่าน CSS หลอกสองคลาสดังนี้ -
<style type = "text/css">
<!--
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
-->
</style>
คุณสามารถระบุสไตล์สำหรับหน้าแรกของเอกสารด้วย: first pseudo-class -
<style type = "text/css">
<!--
@page { margin: 2cm } /* All margins set to 2cm */
@page :first {
margin-top: 10cm /* Top margin on first page 10cm */
}
-->
</style>
การควบคุมการแบ่งหน้า
เว้นแต่คุณจะระบุเป็นอย่างอื่นการแบ่งหน้าจะเกิดขึ้นเฉพาะเมื่อรูปแบบเพจเปลี่ยนไปหรือเมื่อเนื้อหาล้นกล่องเพจปัจจุบัน มิฉะนั้นการบังคับหรือแบ่งหน้าปราบใช้แบ่งหน้าก่อนหน้าแตกหลัง,และแบ่งหน้า-ภายในคุณสมบัติ
ทั้งpage-break-beforeและpage-break-afterยอมรับคำหลักอัตโนมัติหลีกเลี่ยงซ้ายและขวาเสมอ
คำหลักอัตโนมัติเป็นค่าเริ่มต้นซึ่งจะช่วยให้เบราว์เซอร์สร้างตัวแบ่งหน้าได้ตามต้องการ คำหลักจะบังคับให้มีการแบ่งหน้าก่อนหรือหลังองค์ประกอบเสมอในขณะที่หลีกเลี่ยงการหยุดการแบ่งหน้าทันทีก่อนหรือหลังองค์ประกอบ ซ้ายและขวาคำหลักบังคับหนึ่งหรือสองแบ่งหน้าเพื่อให้องค์ประกอบมีการแสดงบนซ้ายมือหรือหน้าขวามือ
การใช้คุณสมบัติการแบ่งหน้าค่อนข้างตรงไปตรงมา สมมติว่าเอกสารของคุณมีส่วนหัวระดับ 1 เริ่มต้นบทใหม่ด้วยส่วนหัวระดับ 2 เพื่อแสดงถึงส่วนต่างๆ คุณต้องการให้แต่ละบทเริ่มต้นในหน้าใหม่ทางขวามือ แต่คุณไม่ต้องการให้ส่วนหัวของส่วนถูกแบ่งออกจากตัวแบ่งหน้าจากเนื้อหาที่ตามมา คุณสามารถทำได้โดยใช้กฎต่อไปนี้ -
<style type = "text/css">
<!--
h1 { page-break-before : right }
h2 { page-break-after : avoid }
-->
</style>
ใช้เฉพาะรถยนต์และหลีกเลี่ยงค่ากับแบ่งหน้า-ภายในสถานที่ให้บริการ หากคุณไม่ต้องการให้ตารางของคุณแตกในหลายหน้าถ้าเป็นไปได้คุณจะต้องเขียนกฎ -
<style type = "text/css">
<!--
table { page-break-inside : avoid }
-->
</style>
การควบคุมแม่ม่ายและเด็กกำพร้า
ในศัพท์แสงแบบตัวพิมพ์เด็กกำพร้าคือบรรทัดของย่อหน้าที่ติดอยู่ที่ด้านล่างของหน้าเนื่องจากมีการแบ่งหน้าในขณะที่ม่ายคือบรรทัดที่เหลืออยู่ที่ด้านบนของหน้าหลังจากการแบ่งหน้า โดยทั่วไปแล้วหน้าที่พิมพ์จะดูไม่น่าสนใจเมื่อมีข้อความบรรทัดเดียวที่ติดอยู่ที่ด้านบนหรือด้านล่าง เครื่องพิมพ์ส่วนใหญ่พยายามทิ้งข้อความไว้อย่างน้อยสองบรรทัดที่ด้านบนหรือด้านล่างของแต่ละหน้า
orphans คุณสมบัติระบุจำนวนบรรทัดขั้นต่ำของย่อหน้าที่ต้องอยู่ด้านล่างสุดของหน้า
widows คุณสมบัติระบุจำนวนบรรทัดขั้นต่ำของย่อหน้าที่ต้องอยู่ด้านบนสุดของหน้า
นี่คือตัวอย่างการสร้าง 4 บรรทัดที่ด้านล่างและ 3 บรรทัดที่ด้านบนของแต่ละเพจ -
<style type = "text/css">
<!--
@page{orphans:4; widows:2;}
-->
</style>