Lấy lại khoảng trống phía trên và phía dưới nội dung văn bản; đạt được sự cân bằng quang học.
Ngày xuất bản: 14 tháng 1 năm 2025
Kể từ Chrome 133, text-box cho phép nhà phát triển và nhà thiết kế điều chỉnh khoảng trống phía trên và phía dưới văn bản.
Chữ viết tay:
text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading + alphabetic | text;
Viết tắt:
text-box: trim-both cap alphabetic;
Thuộc tính này cho phép bạn kiểm soát khoảng trống phía trên và phía dưới văn bản, ví dụ: , và . Mỗi phông chữ tạo ra một lượng không gian định hướng khối khác nhau, góp phần vào kích thước của phần tử. Mức đóng góp không gian hỗn loạn này không dễ đo lường và không thể kiểm soát cho đến thời điểm hiện tại.
Phông chữ đã biết, giờ CSS cũng biết!
Khoảng trắng phía trên và phía dưới phông chữ là do cách web bố trí văn bản, được gọi là "half-leading" (một nửa khoảng cách dòng). Matthias Ott đã đề cập chuyên sâu về vấn đề này trong một bài đăng có tên The Thing With Leading In CSS (Vấn đề về dấu cách đầu dòng trong CSS). Về cơ bản, khi sắp chữ bằng tay, người ta dùng các mảnh chì kim loại để phân tách các dòng văn bản. Lấy cảm hứng từ dòng chữ đầu tiên, web chia dòng chữ đó làm đôi và phân phối một phần ở phía trên và một phần ở phía dưới nội dung.
Nhật ký này có ý nghĩa vì text-box cung cấp tên cho mỗi nửa: trên và dưới. Ngoài ra, bạn có thể cắt bớt phần lề.
text-box cũng có nghệ thuật trước đó, bạn có thể nhớ lại bài đăng thú vị của Ethan Wang có tên Leading-Trim: The Future Of Digital Typesetting (Đầu trang: Tương lai của hoạt động dàn trang kỹ thuật số), trong đó leading-trim (tên trước đây của text-box) được giới thiệu lần đầu tiên.
Điểm truy cập của bạn vào tính năng cắt văn bản có thể là từ Figma và các chế độ điều khiển "cắt dọc" của Figma dành cho nhà thiết kế. Bài đăng X này minh hoạ vị trí của tuỳ chọn cắt dọc này và lợi ích của tuỳ chọn này đối với các nút.
Bất kể bạn đã đến đây bằng cách nào, chế độ kiểm soát kiểu chữ nghe có vẻ nhỏ bé này có thể tạo ra sự khác biệt lớn.
Tổng quan về tính năng và cú pháp
Theo tôi, đây là hai dòng lệnh phổ biến nhất mà bạn cần khi làm việc với 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;
}
Việc cắt cả hai thành cap alphabetic sẽ là cách sử dụng phổ biến nhất của tính năng này. Các bản minh hoạ sau đây sử dụng phương thức này nhiều lần. Tuy nhiên, ví dụ trước cũng cho thấy ex alphabetic vì nó hữu ích cho việc cân bằng quang học theo cách riêng.
Sân chơi Explorer
Bản minh hoạ sau đây cho phép bạn khám phá cú pháp và xem kết quả bằng trình đơn thả xuống. Bạn có thể thay đổi phông chữ, thay đổi giá trị cắt bớt và cắt bớt, đồng thời làm theo hình ảnh và nhãn được mã hoá bằng màu sắc.
Những điều nên thử:
- Kiểm tra trực quan cách
text-box-trimhoạt động trên các biến thể văn bản một dòng và nhiều dòng. - Di chuột qua một biến thể, bạn sẽ thấy các giá trị cắt được dùng để tạo hiệu ứng đó.
- Thay đổi phông chữ.
- Chỉ cắt một bên của hộp văn bản.
- Xem lại cú pháp khi bạn chơi.
Tôi có thể xây dựng gì bằng công cụ này hoặc công cụ này giải quyết vấn đề gì?
Có một số giải pháp căn giữa và căn chỉnh đơn giản hơn nhiều nhờ khả năng cắt bớt này. Bạn thậm chí có thể tiến gần hơn đến khoảng cách lề phù hợp, trong đó có thể sử dụng một nội dung như gap giữa các nội dung.
Dễ căn giữa hơn
Đối với các thành phần nội dung nội tại nhỏ hơn, nội tuyến hơn, padding: 10px là kiểu hợp lý để chỉ định cho một phần tử có khoảng cách bằng nhau ở tất cả các cạnh. Tuy nhiên, kết quả có thể gây nhầm lẫn cho người dùng vì thường có thêm không gian ở trên cùng và dưới cùng.
Để giải quyết vấn đề này, các nhà phát triển thường giảm khoảng đệm ở trên cùng và dưới cùng (khối) để bù lại hiệu ứng của khoảng cách dòng một nửa.
button {
padding-block: 5px;
padding-inline: 10px;
}
Tại thời điểm này, chúng ta sẽ thử các tổ hợp giá trị cho đến khi mọi thứ được căn giữa theo cách quang học. Điều này có thể trông ổn trên một màn hình và hệ điều hành, nhưng không ổn trên màn hình và hệ điều hành khác.
text-box cho phép chúng ta cắt bớt một nửa khoảng trắng ở đầu văn bản, giúp các giá trị khoảng đệm bằng nhau như 10px trở nên hữu ích:
button {
text-box: trim-both cap alphabetic;
padding: 10px;
}
Sau đây là một vài phần tử cho thấy cách cắt bớt không gian bằng text-box giúp padding: 10px trông cân bằng ở mọi cạnh trong một phần tử tương tác thực tế. Hãy lưu ý cách phông chữ thay thế có thể tạo ra một số khoảng cách dòng giữa khác nhau.
Sau đây là các phần tử , thường được dùng để hiển thị danh mục hoặc huy hiệu. Một trường hợp khác mà khoảng đệm bằng nhau ở các cạnh là giải pháp tốt nhất, nhưng cho đến text-box, chúng ta đã phải giải quyết vấn đề này.
Căn chỉnh dễ dàng hơn
Dấu cách thừa, không kiểm soát được, nửa khoảng cách lề ở phía trên (over) và phía dưới (under) hộp văn bản cũng khiến việc căn chỉnh trở nên khó khăn. Các ví dụ sau đây cho thấy trường hợp khoảng cách dòng một nửa có thể gây khó khăn cho việc căn chỉnh và cách cắt bớt các cạnh khối của hộp văn bản có thể tạo ra các căn chỉnh tốt hơn.
Ở đây, hình ảnh được đặt bên cạnh văn bản. Hình ảnh sẽ tăng lên chiều cao mà văn bản cần, nhưng nếu không có text-box, hình ảnh sẽ luôn cao hơn một chút. Với text-box, hình ảnh có thể căn chỉnh hoàn hảo với nội dung văn bản.
Lưu ý khoảng trắng nằm phía trên dòng văn bản được định dạng đầu tiên và phía dưới dòng văn bản được định dạng cuối cùng trong các trường hợp có tính năng xuống dòng.
Trong ví dụ sau, hãy lưu ý cách tính năng điều chỉnh một cách hợp lý đối với thay đổi trong writing-mode. Hãy thử thay đổi văn bản, xem bố cục tiếp tục căn chỉnh như thế nào.
Tiếp tục nghiên cứu
Bạn muốn tìm hiểu thêm? Danh sách đường liên kết sau đây cung cấp nhiều thông tin bổ sung và trường hợp sử dụng.
- https://codepen.io/collection/zxQBaL – một bộ sưu tập Codepen gồm tất cả các bản minh hoạ ở trên
- https://github.com/jantimon/text-box-trim-examples – Nghiên cứu và minh hoạ tuyệt vời của Jan Nicklas
- https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/
- https://drafts.csswg.org/css-inline-3/#text-edges
- Đừng nhầm lẫn với
size-adjusthoặcascent-overridehttps://web.dev/articles/css-size-adjust - https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/
- https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/
- được áp dụng cho nhiều phần tử HTML https://codepen.io/nileshprajapati/pen/RweKdmw
- Bài đăng trên blog của Safari https://webkit.org/blog/16301/webkit-features-in-safari-18-2/
- https://piccalil.li/blog/why-im-excited-about-text-box-trim-as-a-designer/