Gói văn bản CSS: đẹp

Lựa chọn sử dụng tính năng xuống dòng tối ưu hoá văn bản để đẹp hơn tốc độ.

Adam Argyle
Adam Argyle

Từ Chrome 117, bạn có thể sử dụng tính năng xuống dòng tự động mới: text-wrap: pretty trong CSS Text Level 4 (Văn bản CSS 4).

p {
  text-wrap: pretty;
}
https://codepen.io/web-dot-dev/pen/yLGmzLJ

Góa phụ và trẻ mồ côi trong kiểu chữ có hình ảnh độc thân các từ đứng riêng lẻ ở cuối đoạn văn hoặc khối văn bản. Goá chồng là từ một mình ở đầu khối văn bản còn trẻ mồ côi thì nằm một mình ở cuối văn bản chặn. Chúng có thể làm gián đoạn cách mắt chúng ta đọc lướt văn bản, khiến nội dung khó đọc hơn để đọc. Một số nhà thiết kế tránh sử dụng những quảng cáo này bằng mọi giá và nỗ lực rất nhiều để ngăn chặn chúng.

Một đoạn được hiển thị với hình ảnh một góa phụ ở đầu và một đứa trẻ mồ côi ở cuối, được so sánh với cùng một đoạn không có những người góa phụ hoặc trẻ mồ côi.
Hình ảnh lấy nguồn từ Google Fonts—Góa phụ và Trẻ mồ côi

Từ Chrome 117, bạn có thể tránh trẻ mồ côi bằng một dòng CSS: text-wrap: pretty.

Tính năng này không chỉ đảm bảo các đoạn văn bản không kết thúc bằng từ đơn lẻ, công cụ này cũng điều chỉnh dấu gạch nối nếu các dòng liên tiếp xuất hiện ở cuối đoạn hoặc điều chỉnh các dòng trước để tạo chỗ trống. Việc này cũng sẽ điều chỉnh cho phù hợp với lý do của văn bản. text-wrap: pretty dành cho thường tốt hơn xuống dòng tự động và ngắt văn bản, hiện tập trung vào trẻ mồ côi. Trong tương lai, text-wrap: pretty có thể cung cấp nhiều cải tiến hơn.

So sánh một đoạn văn có trẻ em mồ côi và một đoạn văn không có trẻ mồ côi, mỗi đoạn có một huy hiệu là xấu hoặc tốt.
Hình ảnh được lấy từ Lý do bạn nên xoá trẻ mồ côi khỏi văn bản nội dung.

Ngoài ra còn có text-wrap: balance, không ngăn trẻ em mất tích, nhưng đảm bảo rằng văn bản được gói theo cách tạo ra khối văn bản hài hoà. Cá nhân tôi sử dụng balance cho dòng tiêu đề và pretty cho đoạn văn bản.

Nếu bạn muốn biết thông tin chi tiết về thuật toán được sử dụng để xác định số lượng dòng tối ưu hoặc các cân nhắc về hiệu suất, đây là đường liên kết đến tài liệu thiết kế do kỹ sư này tạo đằng sau tính năng này, Koji Ishii.

Nếu bạn có đề xuất hoặc cải tiến khác về việc ngắt dòng, vui lòng cho chúng tôi biết họ! Báo cáo một vấn đề trong trình theo dõi lỗi Chromium kèm theo thông tin chi tiết, ví dụ về ngắt dòng đúng và không hợp lệ, chúng tôi sẽ liên hệ lại với bạn.