เพิ่มเนื้อหาในขอบของหน้าเว็บเมื่อพิมพ์โดยใช้ CSS

เผยแพร่เมื่อวันที่ 30 ตุลาคม 2024

ตั้งแต่ Chrome 131 คุณสามารถใช้ CSS เพื่อเพิ่มเนื้อหาลงในขอบของหน้าเมื่อพิมพ์ได้ โพสต์นี้จะอธิบายรูปแบบหน้าสำหรับสื่อแบบแบ่งหน้า และวิธีใช้ฟีเจอร์นี้เพื่อปรับปรุงเอาต์พุตการพิมพ์จากหน้าเว็บ

CSS มีข้อกำหนดจำเพาะเกี่ยวกับสื่อที่มีการแบ่งหน้า, โมดูลสื่อที่มีการแบ่งหน้าของ CSS และเนื้อหาที่ CSS สร้างสำหรับสื่อที่มีการแบ่งหน้า มีการกำหนดฟีเจอร์ที่จะใช้เมื่อพิมพ์หน้าเว็บเท่านั้น (รวมถึงไฟล์ PDF) มี User Agent ที่รองรับ CSS นี้และให้คุณสร้างหนังสือและสื่อสิ่งพิมพ์อื่นๆ จาก HTML และ CSS ได้ อย่างไรก็ตาม ฟังก์ชันการทำงานนี้ไม่เคยได้รับการรองรับที่ดีในเว็บเบราว์เซอร์ แม้ว่าเราจะต้องพิมพ์หรือสร้าง PDF จากแอปพลิเคชันบ่อยครั้ง

Chrome และ Firefox รองรับแอตทริบิวต์ @page กฎนี้จะช่วยคุณกำหนดขนาดของหน้าที่จะพิมพ์และขนาดระยะขอบรอบเนื้อหา ตั้งแต่ Chrome 131 เป็นต้นไป คุณยังใช้เนื้อหาที่สร้างขึ้นเพื่อเพิ่มเนื้อหาลงในขอบได้ด้วย โดยกำหนดเป้าหมายที่ at-rule ของขอบที่เกี่ยวข้อง

โมเดลหน้าเว็บ

รูปแบบหน้าเว็บที่ใช้ในสื่อแบบแบ่งหน้าจะกำหนดกล่องหน้าเว็บ ซึ่งเป็นแผ่นกระดาษ ภายในช่องของหน้าคือขอบหน้า ขอบหน้า ระยะห่างจากขอบของหน้า และสุดท้ายคือพื้นที่หน้าที่เนื้อหาของคุณจะแสดง เมื่อพิมพ์เนื้อหา ระบบจะแบ่งเนื้อหาออกเป็นหน้าต่างๆ ตามความจําเป็น

จากนั้นระบบจะแบ่งระยะขอบของหน้าออกเป็น 16 ช่อง โดยแต่ละช่องจะมี at-rule ที่เกี่ยวข้อง

  • @top-left-corner
  • @top-left
  • @top-center
  • @top-right
  • @top-right-corner
  • @left-top
  • @left-middle
  • @left-bottom
  • @right-top
  • @right-middle
  • @right-bottom
  • @bottom-left-corner
  • @bottom-left
  • @bottom-center
  • @bottom-right
  • @bottom-right-corner

การปรับขนาดกล่องระยะขอบ

ความสูงของกล่องด้านบนและด้านล่าง รวมถึงความกว้างของกล่องด้านซ้ายและขวาจะกำหนดโดยขนาดระยะขอบที่ตั้งค่าโดยใช้ @page ดังนั้นกล่องมุมจึงมีขนาดคงที่ซึ่งเกิดจากการตัดกันของระยะขอบเหล่านั้น แต่ช่อง 3 ช่องระหว่างแต่ละมุมนั้นมีความยืดหยุ่น กล่องเหล่านี้จะทำงานคล้ายกับกล่องในเลย์เอาต์ Flex ที่ใช้ flex: auto ดังนั้นจึงจะขยายเพื่อเติมเต็มพื้นที่ แต่หากคุณใส่สตริงข้อความยาวๆ ไว้ในกล่องหนึ่งและไม่มีข้อความในกล่องอื่นๆ กล่องที่มีข้อความจะขยายขึ้นแทนที่จะตัดข้อความ

หน้าที่มีช่อง 16 ช่องแสดงในขอบ
พื้นที่หน้าเว็บล้อมรอบด้วยขอบที่มีช่องขอบที่มีชื่อ 16 ช่อง

เพิ่มเนื้อหาลงในช่องขอบ

หากต้องการเพิ่มเนื้อหาลงในกล่องระยะขอบ ให้ใช้เนื้อหาที่ CSS สร้าง เช่นเดียวกับที่คุณจะทํากับองค์ประกอบจำลอง ::before และ ::after ในกรณีนี้ ให้ใช้แอตทริบิวต์ at ที่เกี่ยวข้องกับช่องที่ต้องการกําหนดเป้าหมาย CSS ต่อไปนี้จะเพิ่มข้อความ "สมุดภาพของฉัน" ลงในกล่องระยะขอบด้านซ้ายล่างหรือหน้าขวา และยังจัดรูปแบบข้อความดังกล่าวด้วย

@page :right {
  @bottom-left {  
    content: "My book";  
    font-size: 9pt;  
    color: #333; 
  }
}

คุณยังเพิ่มตัวนับหน้าในขอบได้นอกเหนือจากสตริงข้อความ ตัวนับ page ที่กําหนดไว้ล่วงหน้ามีหน้าปัจจุบัน CSS ต่อไปนี้จะเพิ่มข้อความดังกล่าวลงที่ด้านขวาล่างของหน้าขวามือและด้านซ้ายล่างของหน้าซ้ายมือ

@page :right {  
  @bottom-right {  
    content: counter(page);  
  }
}

@page :left {
  @bottom-left {
    content: counter(page);
  }
}

นอกจากนี้ ยังมีตัวนับ pages ที่แสดงจำนวนหน้าทั้งหมดเสมอ

สิ่งที่ควรทราบเมื่อใช้ระยะขอบหน้า

หากพิมพ์จากเบราว์เซอร์ เบราว์เซอร์จะเพิ่มเนื้อหาบางส่วนที่ขอบหน้าโดยอัตโนมัติหากมีพื้นที่ให้แสดง การดำเนินการนี้จะดำเนินการแม้ว่าคุณจะเพิ่มเนื้อหาแล้วก็ตาม คุณปิดส่วนหัวและส่วนท้ายที่สร้างขึ้นโดยอัตโนมัติเหล่านี้ได้ในกล่องโต้ตอบการพิมพ์

หากคุณตั้งค่าระยะขอบในหน้าเป็น 0 หรือค่าที่น้อยมากจนไม่มีพื้นที่สำหรับส่วนหัวและส่วนท้ายของเบราว์เซอร์ ระบบจะไม่แสดงส่วนดังกล่าว

จากแนวคิดของการจัดวางหน้าเริ่มต้นใน Chromium หากหน้าแรกของเอกสารที่พิมพ์ไม่มีพื้นที่สำหรับอัปโหลดเนื้อหาอัตโนมัติ จะทำให้เนื้อหาของเบราว์เซอร์ไม่แสดงในหน้าถัดๆ ไป แม้ว่าจะมีพื้นที่ก็ตาม

โอกาสในอนาคตสําหรับสื่อแบบหน้าเว็บ

ข้อกำหนดเฉพาะของสื่อแบบแบ่งหน้ามีฟีเจอร์อื่นๆ อีกหลายอย่างตามที่อธิบายไว้ในบทความการออกแบบสำหรับสิ่งพิมพ์ด้วย CSS หากคุณมี Use Case สำหรับฟีเจอร์ต่อไปนี้ ให้เพิ่มลงในข้อบกพร่องที่ลิงก์ไว้

สตริงการตั้งค่า

หนังสือมักจะพิมพ์ชื่อบทปัจจุบันไว้ที่ขอบ คุณไม่สามารถกำหนดชื่อนี้ใน CSS แบบฮาร์ดโค้ดได้ เนื่องจากชื่อจะเปลี่ยนไปเมื่อคุณเลื่อนดูหนังสือ พร็อพเพอร์ตี้ string-set ให้คุณตั้งค่าจาก HTML เพื่อใช้ในเนื้อหาที่สร้าง CSS ต่อไปนี้จะถือว่ามีการมาร์กอัปชื่อบทเป็น <h1> นำเนื้อหาของ <h1> แต่ละรายการไปใช้ที่ขอบด้านขวาบนในหน้าขวามือ เมื่อไปถึง <h1> รายการถัดไป ระบบจะอัปเดตค่าสำหรับระยะขอบหลังจากจุดนั้น

h1 {
  string-set: doctitle content();
}

@page :right {
  @top-right {
    content: string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 8pt;
  }
}

ข้อบกพร่องของ Chromium สำหรับ string-set และ string()

ตรวจสอบแบบอ้างอิง

เมื่อพิมพ์เอกสารแล้ว ปกติแล้วการอ้างอิงไปยังหน้าอื่นๆ จะระบุโดยใช้หมายเลขหน้าที่พบการอ้างอิง คุณสร้างการอ้างอิงข้ามเหล่านี้ได้โดยใช้ target-counter เมื่อใช้กับลิงก์ ลิงก์จะทำงานเพื่อข้ามไปยังข้อมูลอ้างอิงบนเว็บเมื่อพิมพ์หมายเลขหน้าปรากฏอยู่

<a class="xref" href="#ref1">my reference</a>
a.xref:after {
  content: " (page " target-counter(attr(href, url), page) ")";
}

ข้อบกพร่องของ Chromium สําหรับการอ้างอิงข้าม

เชิงอรรถ

เชิงอรรถยังเป็นฟีเจอร์ของข้อกำหนดเฉพาะของสื่อแบบแบ่งหน้าด้วย ใน HTML ให้ใช้คลาสเพื่อระบุข้อความที่ควรเป็นเชิงอรรถ เช่น

<p>This is some text <span class=”fn”>this is a footnote</span>.</p>

จากนั้นใช้ค่า footnote ของ float เพื่อเปลี่ยนข้อความนี้เป็นเชิงอรรถ โดยระบบจะนำออกจากย่อหน้าเมื่อพิมพ์เอกสารและแสดงเป็นเชิงอรรถ

.fn {
  float: footnote;
}

ข้อบกพร่องของ Chromium สำหรับเชิงอรรถ