เผยแพร่เมื่อวันที่ 30 ตุลาคม 2024
ตั้งแต่ Chrome 131 คุณสามารถใช้ CSS เพื่อเพิ่มเนื้อหาลงในขอบของหน้าเมื่อพิมพ์ได้ โพสต์นี้จะอธิบายรูปแบบหน้าสำหรับสื่อแบบแบ่งหน้า และวิธีใช้ฟีเจอร์นี้เพื่อปรับปรุงเอาต์พุตการพิมพ์จากหน้าเว็บ
CSS มีข้อกำหนดที่เกี่ยวข้องกับสื่อแบบหน้าเว็บ ซึ่งได้แก่ ข้อบังคับของ CSS สำหรับสื่อแบบหน้าเว็บ และเนื้อหาที่ CSS สร้างสำหรับสื่อแบบหน้าเว็บ ซึ่งจะกำหนดฟีเจอร์ที่ใช้เมื่อพิมพ์หน้าเว็บเท่านั้น (รวมถึงการพิมพ์เป็น PDF) มี User Agent ที่รองรับ CSS นี้และให้คุณสร้างหนังสือและสื่อสิ่งพิมพ์อื่นๆ จาก HTML และ CSS ได้ อย่างไรก็ตาม ฟังก์ชันการทำงานนี้ไม่เคยได้รับการรองรับที่ดีในเว็บเบราว์เซอร์ แม้ว่าเราจะต้องพิมพ์หรือสร้าง PDF จากแอปพลิเคชันบ่อยครั้ง
Chrome และ Firefox รองรับแอตทริบิวต์ @page กฎนี้ช่วยให้คุณกำหนดขนาดของหน้าที่จะพิมพ์และขนาดของระยะขอบรอบๆ เนื้อหาได้ ตั้งแต่ Chrome 131 เป็นต้นไป คุณยังใช้เนื้อหาที่สร้างขึ้นเพื่อเพิ่มเนื้อหาลงในขอบได้ด้วย โดยกำหนดเป้าหมายที่แอตทริบิวต์ margin ที่เกี่ยวข้อง
โมเดลหน้าเว็บ
รูปแบบหน้าเว็บที่ใช้ในสื่อแบบแบ่งหน้าจะกำหนดกล่องหน้าเว็บ ซึ่งเป็นแผ่นกระดาษ ภายในกล่องหน้าเว็บคือระยะขอบหน้า ขอบหน้า ระยะห่างจากขอบหน้า และสุดท้ายคือพื้นที่หน้าที่แสดงเนื้อหา เมื่อพิมพ์เนื้อหา ระบบจะแบ่งเนื้อหาออกเป็นหน้าต่างๆ ตามความจําเป็น
จากนั้นระบบจะแบ่งระยะขอบของหน้าออกเป็น 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 ดังนั้นจึงจะขยายเพื่อเติมเต็มพื้นที่ว่าง แต่หากคุณใส่สตริงข้อความยาวๆ ไว้ในกล่องหนึ่งและไม่มีข้อความในกล่องอื่นๆ กล่องที่มีข้อความจะขยายขึ้นแทนที่จะตัดข้อความ
เพิ่มเนื้อหาลงในกล่องระยะขอบ
หากต้องการเพิ่มเนื้อหาลงในกล่องระยะขอบ ให้ใช้เนื้อหาที่ 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;
}