เผยแพร่เมื่อวันที่ 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 ดังนั้นจึงจะขยายเพื่อเติมเต็มพื้นที่ แต่หากคุณใส่สตริงข้อความยาวๆ ไว้ในกล่องหนึ่งและไม่มีข้อความในกล่องอื่นๆ กล่องที่มีข้อความจะขยายขึ้นแทนที่จะตัดข้อความ
เพิ่มเนื้อหาลงในช่องขอบ
หากต้องการเพิ่มเนื้อหาลงในกล่องระยะขอบ ให้ใช้เนื้อหาที่ 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;
}