CSS text-wrap: balance

Một kỹ thuật sắp chữ cổ điển là tự tạo dấu ngắt dòng cho các khối văn bản cân bằng, đã có trong CSS.

Adam Argyle

Giá trị balance cho text-wrap là một phần của CSS Text Level 4. Hãy xem các ví dụ trong bài đăng này để tìm hiểu cách một dòng CSS này có thể cải thiện đáng kể bố cục văn bản của bạn.

Nếu không có text-wrap: balance, nhà thiết kế, người chỉnh sửa nội dung và nhà xuất bản sẽ có ít công cụ để thay đổi cách cân bằng các dòng. Các lựa chọn tốt nhất hiện có là sử dụng <wbr> hoặc ­ để giúp hướng dẫn bố cục văn bản đưa ra quyết định thông minh hơn về vị trí ngắt dòng và từ.

Là nhà phát triển, bạn không biết kích thước cuối cùng, kích thước phông chữ hoặc thậm chí là ngôn ngữ của tiêu đề hoặc đoạn văn. Tất cả các biến cần thiết để xử lý hiệu quả và thẩm mỹ việc xuống dòng tự động văn bản đều có trong trình duyệt. Đây là lý do chúng ta thấy tiêu đề xuống dòng như trong hình sau:

.unbalanced {
  max-inline-size: 50ch;
}

Với text-wrap: balance từ CSS Text 4, bạn có thể yêu cầu trình duyệt tìm ra giải pháp xuống dòng cân bằng tốt nhất cho văn bản. Trình duyệt biết tất cả các yếu tố, chẳng hạn như kích thước phông chữ, ngôn ngữ và vùng được phân bổ. Kết quả của việc xuống dòng tự động văn bản cân bằng trong trình duyệt hiện nay có dạng như sau:

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

Bạn nên xem các ví dụ này cạnh nhau, ở trạng thái tĩnh và không có thông tin gỡ lỗi.

Bạn sẽ hài lòng hơn nhiều với khối văn bản cân bằng. Khối văn bản này thu hút sự chú ý tốt hơn và nhìn chung dễ đọc hơn.

Tìm ra sự cân bằng

Tiêu đề là nội dung đầu tiên mà người đọc thấy; tiêu đề phải hấp dẫn về mặt hình ảnh và dễ đọc. Điều này thu hút sự chú ý của người dùng và mang lại cảm giác chất lượng và đảm bảo. Kỹ thuật sắp chữ tốt giúp người đọc tự tin, khuyến khích họ tiếp tục đọc.

Theo truyền thống, công việc này được thực hiện bằng tay hoặc bằng mắt, vì nhà thiết kế cân bằng văn bản muốn làm hài lòng mắt chứ không phải toán học. Chủ đề này thường được gọi là căn chỉnh theo chỉ số so với căn chỉnh bằng mắt. Đối với các ấn phẩm lớn như New York Times, việc cân bằng tiêu đề là một chi tiết rất quan trọng trong trải nghiệm người dùng.

Việc cân bằng văn bản trong kỹ thuật sắp chữ có từ những ngày đầu in ấn, khi người in sẽ đặt chữ bằng tay. Khi các công cụ và kỹ thuật phát triển, kết quả cũng phát triển theo. Ngày nay, nhà thiết kế có màu sắc, độ đậm, kích thước và nhiều yếu tố khác để cân bằng văn bản trong thiết kế của họ.

Tuy nhiên, trên web, bạn có ít quyền kiểm soát hơn vì tài liệu thay đổi kích thước và màu sắc dựa trên người dùng. text-wrap: balance mang nghệ thuật cân bằng văn bản lên web một cách tự động, dựa trên công việc và truyền thống của các nhà thiết kế trong ngành in.

Cân bằng tiêu đề

Đây sẽ và nên là trường hợp sử dụng chính cho text-wrap: balance. Thu hút sự chú ý bằng kích thước và làm cho tiêu đề đối xứng và dễ đọc. Đặt tất cả các tiêu đề thành xuống dòng tự động văn bản cân bằng bằng CSS sau:

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

Chỉ áp dụng kiểu này có thể không mang lại cho bạn kết quả như mong đợi, vì văn bản cần xuống dòng và do đó phải có độ dài dòng tối đa được áp dụng từ đâu đó. Bạn sẽ thấy một max-inline-size được đặt trên các ví dụ trong bài đăng này, kiểu này giống như max-width nhưng có thể được đặt một lần cho mọi ngôn ngữ.

Các điểm hạn chế

Việc cân bằng văn bản không miễn phí. Trình duyệt cần lặp lại các lần lặp để tìm ra giải pháp xuống dòng cân bằng tốt nhất. Chi phí hiệu suất này được giảm thiểu bằng một quy tắc, chỉ hoạt động cho 6 dòng trở xuống.

Xem xét hiệu suất

Bạn không nên áp dụng tính năng cân bằng xuống dòng văn bản cho toàn bộ thiết kế của mình. Đây là một yêu cầu lãng phí, do giới hạn 6 dòng và có thể ảnh hưởng đến tốc độ kết xuất trang.

* {
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

Một lợi ích lớn của tính năng này là bạn không cần phải chờ và tính thời gian cân bằng xuống dòng văn bản với quá trình tải phông chữ, như bạn có thể đang làm với JavaScript hiện nay. Trình duyệt sẽ xử lý việc này!

Tương tác với thuộc tính white-space

Việc cân bằng văn bản cạnh tranh với thuộc tính white-space vì một thuộc tính yêu cầu không xuống dòng và thuộc tính kia yêu cầu xuống dòng cân bằng. Để khắc phục vấn đề này, hãy huỷ đặt thuộc tính khoảng trắng, sau đó bạn có thể áp dụng lại tính năng xuống dòng cân bằng.

.balanced {
  white-space: unset;
  text-wrap: balance;
}

Việc cân bằng sẽ không thay đổi inline-size của phần tử

Một số giải pháp JavaScript có lợi thế về việc xuống dòng văn bản cân bằng, vì chúng thay đổi max-width của chính phần tử chứa. Điều này có thêm lợi ích là "thu nhỏ" thành khối cân bằng. text-wrap: balance không có hiệu ứng này và bạn có thể thấy trong ví dụ sau:

Bạn có thấy chiều rộng hiển thị từ Công cụ cho nhà phát triển có một khoảng trống ở cuối không? Đó là vì đây chỉ là kiểu xuống dòng, không phải kiểu thay đổi kích thước. Vì điều này, có một vài trường hợp mà text-wrap: balance không hiệu quả, ít nhất là theo ý kiến của tôi. Ví dụ: tiêu đề bên trong thẻ (hoặc bất kỳ vùng chứa nào có đường viền hoặc bóng).

Việc xuống dòng tự động cân bằng lại tạo ra sự mất cân bằng cho phần tử chứa.

Giải thích ngắn gọn về kỹ thuật mà trình duyệt đang sử dụng

Trình duyệt thực hiện hiệu quả việc tìm kiếm nhị phân cho chiều rộng nhỏ nhất không gây ra bất kỳ dòng nào khác, dừng ở một pixel CSS (không phải pixel hiển thị). Để giảm thiểu thêm các bước trong tìm kiếm nhị phân, trình duyệt bắt đầu với 80% chiều rộng dòng trung bình.