Thể hiện typography tốt hơn với `text-wrap: pretty`

• Giới thiệu text-wrap: pretty, một tính năng giúp typography trên web đẹp hơn
• Đây là tính năng mới được đưa vào Safari Technology Preview 216, giúp typography trên web tinh tế hơn và dễ đọc hơn
• Trước đây, việc dàn văn bản trên web được xử lý theo từng dòng một, nhưng pretty sẽ điều chỉnh vị trí xuống dòng bằng cách xem xét toàn bộ đoạn văn
• Tính năng này cải thiện khả năng đọc và khả năng tiếp cận, được triển khai với cảm hứng từ cách sắp chữ truyền thống

Học cách xuống dòng tốt từ typography truyền thống

• Tránh dòng cuối quá ngắn: Việc chỉ còn lại một từ ở dòng cuối không đẹp về mặt thẩm mỹ
• Cải thiện hình dạng phần cuối đoạn văn bị gồ ghề: Khi phần cuối các dòng lởm chởm, khả năng đọc sẽ giảm, nên cần điều chỉnh sao cho cân bằng nhất có thể
• Tránh dùng dấu gạch nối không hợp lý: Nếu dấu gạch nối xuất hiện ở hai dòng liên tiếp hoặc cắt từ quá mức sẽ khiến việc đọc trở nên khó hơn
• Ngăn hiện tượng river trong typography: Cần tránh hiện tượng khoảng trắng giữa các dòng nối thành dải dọc gây phân tán ánh nhìn

Lịch sử của cách xuống dòng trên web

• Từ năm 1991, web đã sử dụng cách xử lý “từng dòng một bắt đầu từ dòng đầu tiên”
• Cách này tính riêng độ dài văn bản của từng dòng và không xét đến sự hài hòa giữa các dòng
• Các công cụ như InDesign hay LaTeX căn chỉnh dựa trên toàn bộ đoạn văn, nhưng web thì cho đến gần đây vẫn chưa làm được như vậy
• Trong Safari Technology Preview 216, lần đầu tiên cơ chế xuống dòng có xét đến toàn bộ đoạn văn đã được giới thiệu

Những vấn đề mà text-wrap: pretty giải quyết

• Đánh giá toàn bộ đoạn văn để xác định vị trí xuống dòng tối ưu
• Giúp tránh dòng cuối quá ngắn, cải thiện phần rag ở cuối dòng và giảm các dấu gạch nối không cần thiết
• Các trình duyệt dựa trên Chromium chỉ cải thiện 4 dòng cuối của đoạn văn, trong khi WebKit áp dụng cho toàn bộ đoạn
• Hiện tượng river vẫn chưa được cải thiện, nhưng đã có kế hoạch bổ sung trong tương lai

Khác biệt trong cách triển khai giữa các trình duyệt

• pretty có thể hoạt động khác nhau giữa các trình duyệt theo đúng cách CSS Working Group đã định nghĩa
• WebKit áp dụng cho toàn bộ đoạn văn, còn Chromium chỉ áp dụng cho 4 dòng cuối
• Vì vậy, nhà phát triển không nên chỉ dùng nó để cải thiện dòng cuối, mà có thể dùng để nâng cấp tổng thể typography

Xem demo

• Có thể thử các tổ hợp giữa pretty, balance, gạch nối, căn chỉnh... trong demo CodePen
• Bật “show guides” và “show ghosts” để so sánh trước và sau khi thay đổi
• Có thể kiểm tra hiệu quả trên nhiều ngôn ngữ khác nhau (tiếng Anh, tiếng Ả Rập, tiếng Đức, tiếng Trung, tiếng Nhật)

Giải tỏa lo ngại về hiệu năng

• Với nội dung có nhiều dòng, hiệu năng có thể bị ảnh hưởng, nhưng với các đoạn văn thông thường thì không có vấn đề gì
• Có thể dùng thoải mái miễn là đó không phải các đoạn dài hàng trăm đến hàng nghìn dòng
• Khi cần, WebKit dự kiến sẽ chia các đoạn dài để xử lý nhằm đảm bảo hiệu năng

Sự khác biệt giữa pretty và balance

• pretty vẫn giữ cho văn bản lấp đầy chiều rộng vùng chứa, đồng thời làm cho việc xuống dòng tự nhiên hơn
• balance tập trung vào việc làm cho mọi dòng có độ dài tương đương nhau, nên văn bản sẽ lấp đầy vùng chứa ít hơn
• Nhìn chung, pretty phù hợp với văn bản thân bài, còn balance phù hợp với tiêu đề, chú thích và teaser text
• Cả hai đều có thể dùng cho văn bản ngắn, nhưng với thân bài dài thì nên tránh balance

Giải thích các giá trị khác của thuộc tính text-wrap

text-wrap: avoid-short-last-lines

• Đây là giá trị mới được bổ sung, chỉ tập trung vào việc tránh dòng cuối quá ngắn
• Hiện chưa được trình duyệt nào triển khai

text-wrap: auto

• Đây là giá trị mặc định, dùng thuật toán “greedy line breaking” theo từng dòng đã được sử dụng từ năm 1991
• Trong tương lai, bản thân giá trị mặc định này cũng có thể được các trình duyệt cải thiện

text-wrap: stable

• Hiện tại hoạt động giống auto, nhưng cung cấp cách xuống dòng ổn định phù hợp với văn bản có thể chỉnh sửa
• Đảm bảo việc xuống dòng không thay đổi ngay cả khi đang có animation hoặc trong lúc nhập văn bản

Các thuộc tính chi tiết của text-wrap

• text-wrap thực chất là dạng viết tắt của hai thuộc tính text-wrap-mode và text-wrap-style

• text-wrap-mode: thiết lập có cho phép xuống dòng hay không (wrap / nowrap)

• text-wrap-style: chọn thuật toán xuống dòng (auto, stable, balance, pretty, avoid-short-last-lines)

  text-wrap-style: pretty;  
  text-wrap-mode: wrap;  
  

• Khi dùng cùng thuộc tính white-space, cũng cần kiểm tra cách xử lý khoảng trắng

Tóm tắt

• text-wrap: pretty cho phép xuống dòng văn bản web tinh tế hơn rất nhiều so với trước đây
• Tính năng này được triển khai trong Safari Technology Preview 216 theo cách đánh giá toàn bộ đoạn văn
• Ngay cả khi áp dụng cho thân bài dài, hầu như không có vấn đề hiệu năng, đồng thời cải thiện đáng kể cả khả năng đọc lẫn tính thẩm mỹ
• Cần hiểu sự khác biệt với balance và chọn dùng phù hợp theo từng loại nội dung

[GN⁺]

Ý kiến Hacker News

• Nghe buồn cười khi có người nói nhiều nhà phát triển lo ngại về hiệu năng của "text-wrap: pretty". Khó mà tin có nhiều lập trình viên thực sự cân nhắc hiệu năng của việc ngắt dòng văn bản đến vậy
• Nội dung trong bản demo là tiếng Anh. Một thứ tiếng Anh khá kỳ lạ. Không liên quan đến chủ đề, và trừ khi mục tiêu là sắp xếp lại từ ngữ để cải thiện việc xuống dòng, nếu không thì cũng chẳng liên quan
• Mong tính năng này được thêm vào ereader. Các ereader có engine dàn trang không tốt
• Người ta đã dành quá ít công sức và sự chú ý để làm cho văn bản trực tuyến trở nên đẹp hơn. Web đã đưa văn bản thụt lùi hàng thế kỷ. Tính năng này rất đáng hoan nghênh
• Safari Technology Preview đã bổ sung hỗ trợ "text-wrap: pretty", mang đến cho typography trên web mức độ tinh tế chưa từng có. Theo caniuse.com, Chrome đã hỗ trợ tính năng này từ tháng 9 năm 2023. Khó mà hiểu cái gì là “chưa từng có” ở đây
• Có ai biết sự khác biệt giữa "text-align: justify" và "text-wrap: pretty" không? Trên Chrome, "text-wrap: pretty" cho hiệu ứng mượt hơn nhiều. Tôi đã kiểm tra xem có nên dùng cả hai cho phần nội dung chính của một blog thông thường hay không, và có vẻ như mỗi cái tạo ra một thay đổi riêng
• Tính năng này rất tuyệt. Việc tập trung vào dòng cuối quá ngắn và mép phải lởm chởm là điều không có gì ngạc nhiên. Nhưng nó vẫn chưa xử lý các điều chỉnh để tránh “rivers”. Khó mà hình dung cách định nghĩa một thước đo để xác định “rivers”. Tò mò không biết đã có ai phát minh ra một thước đo khéo léo nào thực sự hoạt động chưa
• Đoạn văn cố tránh từ mồ côi lại để từ "large" đứng một mình. Áp dụng "text-wrap: pretty" thì giải quyết được
• Mục tiêu của "pretty" do CSS Working Group thiết kế là để mỗi trình duyệt làm những gì có thể nhằm cải thiện việc ngắt dòng văn bản. Nó không ép mọi trình duyệt phải đưa ra cùng một lựa chọn. Do cách Chrome triển khai, nhiều nhà phát triển web kỳ vọng giá trị này dùng để tránh dòng cuối quá ngắn. Nhưng đó không phải chủ đích của nó
• Tôi đã dùng "text-wrap: balance" cho các tiêu đề rồi. Tôi từng cố gắng nối một số từ nhất định để tránh việc ngắt dòng xấu. "text-wrap: pretty" sẽ giải quyết những vấn đề tương tự trong phần thân bài