text-box-trim ของ CSS

Adam Argyle

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

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

Longhand:

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

Shorthand:

text-box: trim-both cap alphabetic;

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

แบบอักษรทราบแล้ว ตอนนี้ CSS ก็ทราบด้วย

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

ประวัติศาสตร์นี้มีความหมายเนื่องจาก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;
}

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

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

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

สิ่งที่คุณลองทำได้

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

ฉันสร้างอะไรได้บ้างและช่วยแก้ปัญหาอะไรได้

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

จัดกึ่งกลางได้ง่ายขึ้น

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

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

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

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

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

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}

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

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

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

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

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

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

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

ศึกษาต่อ

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

• คอลเล็กชันการสาธิตทั้งหมดใน Codepen
• การวิจัยและการสาธิตที่ยอดเยี่ยมโดย Jan Nicklas
• Two CSS Properties for Trimming Text Box Whitespace ใน CSS Tricks
• เลย์เอาต์แบบอินไลน์ของ CSS ที่ขอบข้อความ
• อย่าสับสนกับ size-adjust หรือ ascent-override
• CSS Baseline: The Good, The Bad And The Ugly
• ใช้กับองค์ประกอบ HTML หลายรายการ: CodePen
• บล็อกโพสต์ของ Safari
• เหตุผลที่ฉันตื่นเต้นกับ text-box-trim ในฐานะดีไซเนอร์