Căn chỉnh văn bản chính xác

Tính năng web: text-box

Vấn đề

Trình duyệt tự động thêm khoảng trắng phía trên và phía dưới các ký tự văn bản để phù hợp với chiều cao dòng và các chỉ số cụ thể của phông chữ như nét nhô lên và nét kéo xuống. "Khoảng trống ảo" này khiến bạn không thể căn chỉnh theo chiều dọc một cách hoàn hảo bằng CSS chuẩn.

Các vấn đề thường gặp gồm có:

  • Biểu tượng không thẳng hàng: Văn bản xuất hiện thấp hơn hoặc cao hơn so với biểu tượng liền kề ngay cả khi sử dụng align-items: center.
  • Khoảng đệm không chính xác: Một nút có padding: 12px dường như có nhiều không gian hơn ở trên cùng hoặc dưới cùng do khoảng cách dòng bên trong của phông chữ.
  • Căn chỉnh phẳng: Bạn không thể căn chỉnh phần trên cùng của chữ cái viết hoa chính xác với phần trên cùng của vùng chứa hoặc hình ảnh liền kề mà không sử dụng lề âm "số ma thuật".

Giải pháp

Các thuộc tính text-box-trim và text-box-edge (viết tắt là text-box) cho phép bạn cắt bớt khoảng cách dòng bên trong này dựa trên các chỉ số phông chữ cụ thể. Bằng cách cắt bớt hộp văn bản theo chiều cao chữ hoa (phần trên cùng của chữ in hoa) và đường cơ sở chữ cái (phần dưới cùng của hầu hết chữ cái), bạn có thể đảm bảo hộp giới hạn của phần tử khớp với nội dung hình ảnh của phần tử đó.

Chiến lược triển khai

  1. BẮT BUỘC: Áp dụng text-box-trim: trim-both (hoặc viết tắt text-box) cho phần tử chứa văn bản.
  2. BẮT BUỘC: Chỉ định những chỉ số cần dùng để cắt bớt bằng text-box-edge. Đối với hầu hết các cách căn chỉnh giao diện người dùng, hãy sử dụng cap alphabetic.
  3. NÊN sử dụng thuộc tính này để căn giữa theo chiều dọc trong vùng chứa flex hoặc grid.
  4. NÊN sử dụng thuộc tính này để đảm bảo các giá trị padding CSS khớp với khoảng cách trực quan giữa văn bản và cạnh vùng chứa.
  5. KHÔNG sử dụng thuộc tính này cho văn bản nội dung dạng dài, trong đó khoảng cách dòng truyền thống là cần thiết để dễ đọc. Phông chữ này phù hợp nhất cho tiêu đề, nút và nhãn giao diện người dùng.

Hướng dẫn triển khai

Trường hợp sử dụng 1: Cắt khoảng cách dòng bên trong cho huy hiệu

Mỗi phông chữ có khoảng cách tích hợp khác nhau ở phía trên và phía dưới văn bản. Điều này có thể gây khó khăn trong việc khớp thiết kế hoặc căn giữa văn bản trong huy hiệu. Khi bạn muốn khoảng đệm của vùng chứa ôm sát văn bản, hãy sử dụng text-box: trim-both cap alphabetic. Điều này đặc biệt hữu ích cho các thành phần giao diện người dùng dày đặc như huy hiệu hoặc thẻ. Điều này cho phép khoảng đệm bắt đầu ngay tại cạnh văn bản ở tất cả các bên.

.badge {
  padding: 10px;
  background: hotpink;
  border-radius: 10px;
  /* 
    Trims the top to the cap-height and 
    the bottom to the alphabetic baseline.
  */
  text-box: trim-both cap alphabetic;
}

Trường hợp sử dụng 2: Văn bản ở giữa có biểu tượng

Khi sử dụng Flexbox để căn chỉnh văn bản và biểu tượng, "khoảng trống ảo" thường khiến văn bản có vẻ hơi lệch tâm. Việc cắt bớt hộp đảm bảo công cụ bố cục sử dụng chiều cao chữ cái thực tế hiển thị để căn chỉnh.

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px; 
}
/* 
  text-box does NOT inherit, and must be applied directly to the text element.
*/
.button-text{
  /* 
    The flex container now centers against the 
    visible letters, not the invisible font box.
  */
  text-box: trim-both cap alphabetic;
}

Trường hợp sử dụng 3: Căn chỉnh văn bản ngang bằng với các cạnh trên cùng

Để căn chỉnh tiêu đề sao cho khớp hoàn hảo với phần đầu của hình ảnh hoặc phần tử trang trí liền kề, hãy sử dụng trim-start cap alphabetic. Mặc dù phần cuối sẽ không bị cắt bớt, nhưng bạn vẫn phải xác định cạnh cuối.

.hero {
  display: flex;
  align-items: flex-start;
}

h1 {
  /* MANDATORY: The bottom edge must also be defined, even though only the top is trimmed. */
  text-box: trim-start cap alphabetic;
}

Các phương pháp hay nhất

  • NÊN sử dụng cú pháp viết tắt text-box để ngắn gọn: text-box: <trim-direction> <edges>.
  • NÊN luôn chỉ định cả hai cạnh, ngay cả khi chỉ cắt một cạnh (trừ phi sử dụng cạnh text mặc định).
  • NÊN kết hợp với line-height để kiểm soát khoảng cách. Thao tác cắt bớt sẽ xoá khoảng cách dòng trước dòng đầu tiên và dòng cuối cùng của văn bản, nhưng line-height vẫn ảnh hưởng đến khoảng cách giữa các dòng trong văn bản nhiều dòng.
  • KHÔNG áp dụng cho mọi phần tử. Chỉ sử dụng khi cần căn chỉnh chính xác.

Chiến lược dự phòng

text-box là một tính năng cải tiến tăng dần. Trong các trình duyệt không hỗ trợ, văn bản sẽ chỉ hiển thị với khoảng cách dòng mặc định. Bố cục của bạn vẫn sẽ hoạt động, mặc dù kém chính xác hơn một chút. Bạn không cần mã dự phòng đặc biệt vì các thuộc tính này được các trình duyệt cũ bỏ qua một cách an toàn.

Những điều cần xem xét khác

  1. Chỉ số phông chữ: Mỗi phông chữ có các chỉ số nội bộ riêng. cap alphabetic là giá trị mặc định đáng tin cậy, nhưng một số phông chữ hoặc trường hợp sử dụng có thể yêu cầu ex (chiều cao x) để căn chỉnh chữ thường tốt hơn.
  2. Văn bản nhiều dòng: Thao tác cắt bớt áp dụng cho dòng đầu tiên và dòng cuối cùng của khối. Các đường dây nội bộ không bị ảnh hưởng.