text-box-trim ของ CSS

Adam Argyle

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

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

Browser Support

• 133
• 133
• x
• 18.2

Source

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 ก็ทราบด้วย

ลองใช้ใน CodePen

พื้นที่เหนือและใต้แบบอักษรมีอยู่เนื่องจากวิธีที่เว็บจัดวางข้อความ ซึ่งเรียกว่า "ระยะบรรทัดครึ่ง" เรื่องนี้มีการอธิบายอย่างละเอียดในโพสต์ของ 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;
}

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

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

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

ตัวอย่างไวยากรณ์ที่มีกล่องข้อความ: ไวยากรณ์ตัวอักษร trim-both cap ไฮไลต์และแสดง และมีเมนูแบบเลื่อนลงอีก 3 รายการให้เลือกค่าการตัด

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

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

ลองใช้ใน CodePen

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

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

กลุ่มแรกมีระยะบรรทัดครึ่ง กลุ่มที่สองมีระยะบรรทัดที่ตัด ผลลัพธ์คือกลุ่มที่ 2 จะอยู่ใกล้กันมากขึ้น ลองใช้ใน CodePen

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

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

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

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

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

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

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

ภาพแรกแสดงองค์ประกอบที่มีระยะห่าง 10 พิกเซลและระยะห่างบรรทัดครึ่ง ส่วนตัวที่ 2 แสดงองค์ประกอบเดียวกันโดยมี text-box: trim-both cap alphabetic ผลลัพธ์ คือปุ่มที่ 2 จะอยู่ตรงกลาง ลองใช้ใน CodePen

หมายเหตุ: ตัวอย่างต่อไปนี้แสดงแบบอักษร Sans Serif ปกติและแบบอักษร แฟนซีหรือแบบอักษรสนุกๆ ที่ใช้แทน การแสดงแบบอักษรหลายแบบจะช่วยแสดงให้เห็นถึงความสามารถแบบไดนามิกของ text-box และวิธีการทำงานในชุดแบบอักษรต่างๆ

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

ฟอนต์แต่ละแบบมีระยะครึ่งบรรทัดที่แตกต่างกัน แต่ค่าการตัดจะเหมือนกัน และสามารถปรับระยะให้เป็นมาตรฐานได้ ลองใช้ใน CodePen

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

กลุ่มแท็กที่ 2 มีความกระชับและอยู่ตรงกลางสายตามากขึ้นเนื่องจากการตัดบรรทัดแรก

จัดแนวได้ง่ายขึ้น

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

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

ลองใช้ใน CodePen

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

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

ลองใช้ใน CodePen

ศึกษาต่อ

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

• คอลเล็กชันการสาธิตทั้งหมดใน 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 ในฐานะดีไซเนอร์