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