text-box-trim ของ CSS

เพิ่มพื้นที่ด้านบนและด้านล่างของเนื้อหาข้อความเพื่อให้เกิดความสมดุล

Adam Argyle

เผยแพร่: 14 ม.ค. 2025

ตั้งแต่ Chrome 133 text-box ช่วยให้นักพัฒนาซอฟต์แวร์และนักออกแบบปรับแต่งระยะห่างด้านบนและด้านล่างข้อความได้

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

ตัวเต็ม:

text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading;
line-fit-edge: alphabetic | text;

รูปแบบย่อ:

text-box: trim-both cap alphabetic;

พร็อพเพอร์ตี้นี้ช่วยให้คุณควบคุมระยะห่างด้านบนและด้านล่างข้อความได้ เช่น <h1>, <button> และ <p> แบบอักษรแต่ละแบบจะสร้างพื้นที่ทิศทางของบล็อกนี้ในปริมาณที่แตกต่างกัน ซึ่งส่งผลต่อขนาดขององค์ประกอบ ข้อมูลดังกล่าวซึ่งมาจากพื้นที่ทำงานที่ไม่เป็นระเบียบนั้นวัดได้ยากและควบคุมไม่ได้จนถึงตอนนี้

เมื่อแบบอักษรรู้แล้ว CSS ก็จะรู้ด้วย

https://codepen.io/web-dot-dev/pen/xbKjRxL

ระยะห่างด้านบนและด้านล่างแบบอักษรนั้นเกิดจากลักษณะการจัดวางข้อความของเว็บ ซึ่งเรียกว่า "การขึ้นบรรทัดแรกครึ่งตัว" เรื่องนี้ได้รับการอธิบายอย่างละเอียดในโพสต์ของ Matthias Ott ชื่อ The Thing With Leading In CSS โดยพื้นฐานแล้ว เมื่อจัดเรียงด้วยมือ จะใช้แผ่นตะกั่วแยกบรรทัดข้อความ เว็บซึ่งได้รับแรงบันดาลใจจากบรรทัดแรกจะแบ่งบรรทัดแรกนั้นออกเป็น 2 ส่วน แล้วแสดงบรรทัดแรก 1 ส่วนเหนือเนื้อหาและอีก 1 ส่วนใต้เนื้อหา

บรรทัดแรกจะแสดงพร้อมแถบสีชมพูร้อนเหนือและใต้ข้อความเพื่อแสดงการขึ้นบรรทัดแรกครึ่งหน้า
แหล่งที่มา

ประวัตินี้มีประโยชน์เนื่องจาก text-box ตั้งชื่อให้แต่ละครึ่งว่า "สูงกว่า" และ "ต่ำกว่า" รวมถึงความสามารถในการตัดออก

นอกจากนี้ ยังมีผลงานก่อนหน้าของ text-box ด้วย คุณอาจจำโพสต์ที่น่าตื่นเต้นจาก Ethan Wang ที่ชื่อ Leading-Trim: The Future Of Digital Typesetting ได้ ซึ่งมีการเปิดตัว leading-trim (ชื่อเดิมของ text-box) เป็นครั้งแรก

บรรทัดแรกแสดงโดยมีเว้นวรรคด้านบนและด้านล่างมากเกินไป ดูเหมือนว่าจะถูกตัดด้วยกรรไกรและนำออก

จุดเริ่มต้นในการตัดข้อความอาจมาจาก Figma และการควบคุม "ตัดแนวตั้ง" สำหรับนักออกแบบ โพสต์ X นี้แสดงตําแหน่งของตัวเลือกการตัดวิดีโอแนวตั้งนี้และประโยชน์ของตัวเลือกนี้สําหรับปุ่ม

แหล่งที่มา

ไม่ว่าคุณจะมาถึงส่วนนี้ด้วยวิธีใด การควบคุมแบบอักษรที่ดูเล็กน้อยนี้สามารถสร้างความแตกต่างได้อย่างมาก

ภาพรวมฟีเจอร์และไวยากรณ์

ต่อไปนี้เป็นคำสั่งสั้นๆ 2 รายการที่พบบ่อยที่สุดซึ่งคุณต้องใช้เมื่อทำงานกับ text-box

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

การตัดทั้ง 2 รายการเป็น cap alphabetic จะเป็นการใช้งานฟีเจอร์นี้ที่พบบ่อยที่สุด การสาธิตต่อไปนี้ใช้คำสั่งนี้หลายครั้ง อย่างไรก็ตาม ตัวอย่างก่อนหน้านี้ยังแสดง ex alphabetic ด้วยเนื่องจากมีประโยชน์ต่อความสมดุลของภาพในแบบของตัวเอง

สนามเด็กเล่นของ Explorer

การสาธิตต่อไปนี้ช่วยให้คุณสำรวจไวยากรณ์และดูผลลัพธ์โดยใช้เมนูแบบเลื่อนลง คุณสามารถเปลี่ยนแบบอักษร เปลี่ยนค่าการตัดด้านบนและด้านล่าง และดูตามภาพและป้ายกำกับที่มีรหัสสี

ภาพหน้าจอของการสาธิตเครื่องมือสํารวจไวยากรณ์ แสดงแบบอักษรและเมนูแบบเลื่อนลงเพื่อเลือกแบบอักษรอื่น ตัวอย่างไวยากรณ์ที่มีกล่องข้อความ: ไวยากรณ์ตัวอักษรตัวพิมพ์ใหญ่และตัวพิมพ์เล็กทั้งแบบตัดและแบบไม่ตัดไฮไลต์และแสดงอยู่ สุดท้าย จะมีเมนูแบบเลื่อนลงอีก 3 รายการให้เลือกค่าการตัด

สิ่งที่ควรลองทำ

  1. ตรวจสอบด้วยสายตาว่า text-box-trim ทำงานอย่างไรกับตัวแปรข้อความแบบบรรทัดเดียวและแบบหลายบรรทัด
  2. วางเมาส์เหนือตัวแปรเพื่อดูค่าการตัดที่ใช้เพื่อให้ได้เอฟเฟกต์นั้น
  3. การเปลี่ยนแบบอักษร
  4. การตัดเฉพาะด้านใดด้านหนึ่งของกล่องข้อความ
  5. ตรวจสอบไวยากรณ์ขณะเล่น
https://codepen.io/web-dot-dev/pen/RNbyooE

ฉันจะสร้างอะไรได้บ้างหรือเครื่องมือนี้ช่วยแก้ปัญหาอะไรได้บ้าง

ความสามารถในการตัดวิดีโอนี้ช่วยให้คุณจัดตำแหน่งและจัดแนวได้ง่ายขึ้น คุณยังใช้เครื่องหมายนำที่เหมาะสมได้ เช่น gap ระหว่างเนื้อหา

การเปรียบเทียบจะแสดงระหว่างเนื้อหา 2 กลุ่ม กลุ่มแรกมีคำนำหน้าครึ่งตัว ส่วนกลุ่มที่ 2 มีคำนำหน้าที่ถูกตัด ผลลัพธ์คือกลุ่มที่ 2 จะมีความแน่นมากขึ้น
https://codepen.io/web-dot-dev/pen/RNbyoKE

การจัดกึ่งกลางที่ง่ายขึ้น

สำหรับองค์ประกอบที่เล็กกว่า อยู่ในบรรทัดเดียวกัน และเป็นส่วนประกอบของเนื้อหาโดยเนื้อแท้ padding: 10px เป็นรูปแบบที่เหมาะสมในการระบุสำหรับองค์ประกอบเพื่อให้มีระยะห่างเท่าๆ กันในทุกด้าน อย่างไรก็ตาม ผลลัพธ์ที่ได้อาจทำให้ผู้ใช้สับสน เนื่องจากมักจะมีพื้นที่ว่างด้านบนและด้านล่าง

ในการแก้ปัญหานี้ นักพัฒนาซอฟต์แวร์มักจะใส่ระยะห่างจากขอบน้อยลงที่ด้านบนและด้านล่าง (บล็อก) เพื่อชดเชยผลของค่านำหน้าครึ่งตัว

button {
  padding-block: 5px;
  padding-inline: 10px;
}

เมื่อถึงจุดนี้ เราเหลือเพียงการลองใช้ชุดค่าผสมต่างๆ จนกว่าทุกอย่างจะอยู่ในแนวกลางตามหลักทัศนศาสตร์ ไอคอนนี้อาจดูดีในหน้าจอและระบบปฏิบัติการหนึ่ง แต่ดูไม่ดีในอีกระบบหนึ่ง

text-box ช่วยให้เราตัดการเว้นวรรคนำครึ่งหน้าออกจากข้อความได้ ซึ่งทำให้ค่าการเว้นวรรคเท่ากัน เช่น 10px มีประโยชน์

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
ตัวอย่าง 2 รายการจะแสดงขึ้น รายการแรกแสดงองค์ประกอบที่มีระยะห่างจากขอบ: 10 พิกเซลและระยะนำครึ่งตัว รายการที่ 2 แสดงองค์ประกอบเดียวกันที่มี text-box: trim-both cap alphabetic ผลลัพธ์ที่ได้คือปุ่มที่ 2 จะอยู่ตรงกลางตามหลักทัศนศาสตร์
https://codepen.io/web-dot-dev/pen/NPKMbgq

ต่อไปนี้คือองค์ประกอบ <button> 2-3 รายการที่แสดงให้เห็นว่าการลดพื้นที่ว่างด้วย text-box ทําให้ padding: 10px มีขนาดเท่ากันทุกด้านในองค์ประกอบอินเทอร์แอกทีฟที่ใช้งานได้จริง สังเกตว่าแบบอักษรอื่นสร้างระยะห่างบรรทัดครึ่งที่แตกต่างกันมากเพียงใด

ปุ่ม 3 กลุ่มจะปรากฏขึ้น กลุ่มแรกแสดงแบบอักษร Sans Serif ปกติ กลุ่มที่ 2 แสดงแบบอักษรแฟนซีหรือสนุกๆ กลุ่มที่ 3 แสดงเอฟเฟกต์เดียวกันแต่เป็นแบบอักษรเขียนด้วยมือ จุดประสงค์คือเพื่อแสดงให้เห็นว่าแบบอักษรแต่ละแบบมีการเว้นวรรคขึ้นต้นครึ่งหน้าแตกต่างกัน แต่ค่าการตัดแต่งเหมือนกันและสามารถทำให้ช่องว่างเป็นมาตรฐานได้
https://codepen.io/web-dot-dev/pen/mybLOMg

องค์ประกอบ <span> ต่อไปนี้มักใช้เพื่อแสดงหมวดหมู่หรือป้าย อีกกรณีที่การใส่ระยะห่างจากขอบเท่าๆ กันควรเป็นวิธีแก้ปัญหาที่ดีที่สุด แต่เราจำเป็นต้องหาวิธีแก้ปัญหาชั่วคราวไปก่อนจนถึงวันที่ text-box

แท็กจะแสดงเปรียบเทียบกัน กลุ่มแรกมีคำนำหน้าครึ่งคำ ส่วนกลุ่มที่ 2 มีคำนำหน้าที่ถูกตัด ผลที่ได้คือกลุ่มที่ 2 จะชิดกันมากขึ้นและอยู่ตรงกลางตามหลักทัศนศาสตร์
https://codepen.io/web-dot-dev/pen/mybLOMg

การจัดตำแหน่งที่ง่ายขึ้น

การเว้นวรรคขึ้นต้นครึ่งช่องที่ควบคุมไม่ได้ด้านบน (over) และด้านล่าง (under) กล่องข้อความยังทําให้การจัดแนวทำได้ยากด้วย ตัวอย่างต่อไปนี้แสดงกรณีที่การขึ้นบรรทัดแรกครึ่งบรรทัดทำให้การจัดตำแหน่งทำได้ยาก และวิธีตัดขอบบล็อกของกล่องข้อความเพื่อให้การจัดตำแหน่งดีขึ้น

รูปภาพอยู่ข้างข้อความ รูปภาพจะขยายให้มีความสูงตามที่ต้องการสำหรับข้อความ แต่หากไม่มี text-box รูปภาพจะสูงขึ้นเล็กน้อยเสมอ text-box ช่วยให้รูปภาพจัดวางในแนวเดียวกับเนื้อหาข้อความได้อย่างสมบูรณ์

https://codepen.io/web-dot-dev/pen/yyBjVpg

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

ในตัวอย่างต่อไปนี้ โปรดสังเกตวิธีที่ฟีเจอร์ปรับตัวอย่างมีเหตุผลตามการเปลี่ยนแปลงใน writing-mode ลองเปลี่ยนข้อความ แล้วดูว่าเลย์เอาต์ยังคงจัดแนวกันอยู่ไหม

https://codepen.io/web-dot-dev/pen/dPbeOJQ

ศึกษาต่อ

หากต้องการข้อมูลเพิ่มเติม รายการลิงก์ต่อไปนี้มีข้อมูลเพิ่มเติมและกรณีการใช้งานในปริมาณที่แตกต่างกัน