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>