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

Chọn sử dụng quy trình xuống dòng tự động được tối ưu hoá để tăng tốc độ làm đẹp.

Adam Argyle
Adam Argyle

Trên Chrome 117, bạn có thể sử dụng tính năng xuống dòng tự động mới – text-wrap: pretty từ CSS Text cấp 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ữ là các từ đơn đứng độc lập ở cuối một đoạn văn hoặc khối văn bản. Goá phụ là các từ độc lập ở đầu khối văn bản và trẻ mồ côi ở cuối khối văn bả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. Một số nhà thiết kế tránh chúng bằng mọi giá và cố gắng hết sức để ngăn chặn chúng.

Một đoạn văn sẽ xuất hiện hình ảnh góa phụ ở đầu và hình ảnh trẻ em mồ côi ở cuối, so với cùng một đoạn văn không có hình ảnh của những góa góa phụ hoặc trẻ mồ côi.
Hình ảnh lấy nguồn từ Google Fonts — Widows & Orphans

Trên Chrome 117, trẻ có thể tránh được 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 đoạn không kết thúc bằng một từ duy nhất mà còn điều chỉnh dấu gạch nối nếu các dòng có dấu gạch nối 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 không gian. Chế độ đồng ý cũng sẽ điều chỉnh cho phù hợp để lý giải về văn bản. text-wrap: pretty thường dành cho tính năng xuống dòng và ngắt văn bản hiệu quả hơn, hiện tập trung vào trẻ mồ côi. Trong tương lai, text-wrap: pretty có thể cải tiến thêm.

So sánh một đoạn văn có nội dung về trẻ 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 từ thiện hoặc không tốt.
Nguồn hình ảnh 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 chặn trẻ mồ côi, nhưng đảm bảo văn bản được gói theo cách tạo ra một khối văn bản hài hoà. Cá nhân tôi dùng balance cho tiêu đề và pretty cho các đoạn.

Nếu bạn quan tâm đến thông tin chi tiết của thuật toán dùng để xác định số dòng tối ưu hoặc những 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ư tạo cho tính năng này, Koji Ishii.

Nếu bạn có đề xuất hoặc cải thiện khác về ngắt dòng, chúng tôi rất muốn nghe họ! Hãy báo cáo vấn đề trong công cụ theo dõi lỗi Chromium kèm theo thông tin chi tiết, ví dụ về dấu ngắt dòng hợp lệ và không hợp lệ, sau đó chúng tôi sẽ liên hệ lại với bạn.