Ra mắt 4 tính năng quốc tế mới trong CSS

Jack J
Jack J

Bốn tính năng CSS quốc tế mới trong Mô-đun văn bản CSS cấp 4 sẽ có trên Chrome. Bài đăng này giải thích những sản phẩm đã được vận chuyển và những sản phẩm sẽ sớm được vận chuyển.

  • Trên Chrome 119: Ngắt dòng cụm từ tiếng Nhật bằng word-break: auto-phrase.
  • Phía sau cờ từ Chrome 120: Khoảng cách giữa các tập lệnh với thuộc tính text-autospace.
  • Đang phát triển: Dấu câu trong tiếng Trung, tiếng Nhật và tiếng Hàn (CJK) với thuộc tính text-spacing-trim.
  • Cỡ chữ tối thiểu nhất quán trên các ngôn ngữ.

Ngắt dòng tiếng Nhật: word-break: auto-phrase

Tính năng này giúp văn bản tiếng Nhật dễ đọc hơn và được cung cấp trên Chrome 119

Một số ngôn ngữ Đông Á (như tiếng Trung hoặc tiếng Nhật) không sử dụng dấu cách để phân tách các từ và các dòng có thể xuống dòng ở bất kỳ ký tự nào, ngay cả khi ký tự đó ở giữa một từ. Đây là hành vi ngắt dòng bình thường đối với các ngôn ngữ này, nhưng trong văn bản ngắn như tiêu đề hoặc thơ, tốt hơn là nên xuống dòng ở ranh giới cụm từ tự nhiên (Trong tiếng Nhật, ranh giới này được gọi là "Bunsetsu").

Tính năng CSS mới word-break: auto-phrase chỉ định rằng việc bao bọc nên xảy ra tại các ranh giới như vậy.

<html lang="ja">
<style>
h1 {
  word-break: auto-phrase;
}
</style>

<h1>窓ぎわのトットちゃん<h1>
ngắt từ: cụm từ tự động bao bọc dòng ở ranh giới cụm từ tự nhiên.
word-break: auto-phrase xuống dòng tại ranh giới tự nhiên của cụm từ.

Việc phát hiện ranh giới do một công cụ học máy thực hiện nên có thể không như bạn mong muốn. Nếu điều đó xảy ra, bạn có thể điều chỉnh các điểm có thể bị hỏng theo cách thủ công. Thẻ <wbr> hoặc Khoảng cách với chiều rộng 0 (&ZeroWidthSpace;) thực thi một điểm có thể phá vỡ và Dấu nối có độ rộng bằng 0 (&zwj;) ngăn chặn điểm ngắt.

窓ぎわの<wbr>トットちゃん
ユーザー<wbr>インターフェース

Hiện tại, Chrome chỉ hỗ trợ tính năng này dành cho tiếng Nhật, sử dụng cổng BudouX C++ sử dụng công nghệ học máy Adaboost. Đọc thêm về nội dung này tại Google Developers Nhật Bản: BudouX: 読みやすん改のための軽量Khá分nhưち書籍器.

Chúng tôi dự định hỗ trợ tiếng Hàn và tiếng Trung trong các phiên bản Chrome sau này.

Khoảng cách giữa các tập lệnh: text-autospace

Tính năng sau hiện bị gắn cờ trong Chrome. Để kiểm tra, hãy bật cờ Các tính năng nền tảng web thử nghiệm (có tại chrome://flags/#enable-experimental-web-platform-features) trong Chrome 120 trở lên.

Tiếng Trung và tiếng Nhật kết hợp nhiều chữ viết, chữ Hán, Latinh và ASCII cũng như Hiragana và Katakana trong trường hợp tiếng Nhật. Các khoảng cách nhỏ khi chuyển từ và sang các chữ viết tượng hình không phải tiếng Hán thường giúp dễ đọc.

Chrome dự định bắt đầu chèn khoảng cách giữa các tập lệnh theo mặc định. Tính năng này là một phương pháp phổ biến, được sử dụng rộng rãi trong các tài liệu in để cải thiện khả năng đọc trên web.

Chế độ mặc định mới áp dụng các khoảng cách nhỏ để dễ đọc hơn và bạn có thể kiểm soát việc này bằng tính năng tự động chèn văn bản.
Chế độ mặc định mới áp dụng khoảng cách nhỏ để dễ đọc hơn. Bạn có thể kiểm soát khoảng cách này bằng text-autospace.

Nếu bạn muốn tắt hành vi này, thuộc tính text-autospace sẽ cho phép bạn kiểm soát việc chèn khoảng cách.

text-autospace: no-autospace;

Dấu câu của CJK: text-spacing-trim

Tính năng sau đang trong quá trình phát triển, với mục tiêu là tính năng này sẽ được bật theo mặc định trong Chrome.

Trong tiếng Trung, tiếng Nhật và tiếng Hàn, việc áp dụng khoảng cách giữa các ký tự dấu câu sẽ giúp dễ đọc hơn và tạo ra kiểu chữ đẹp mắt hơn. Hiện nay, hầu hết các tài liệu in và trình xử lý văn bản đều áp dụng quy tắc này.

Ví dụ: dấu chấm CJK và dấu ngoặc đơn đóng CJK thường được thiết kế để có khoảng cách nội bộ glyph ở nửa bên phải của dấu cách ký tự, sao cho mỗi ký tự có số tiến không đổi.

Tuy nhiên, khi các ký tự dấu câu này xuất hiện trong một hàng, khoảng cách bên trong glyph này sẽ trở nên quá mức. Trong hai ví dụ sau, ví dụ thứ hai là kiểu chữ chính xác; nửa bên phải của dấu chấm CJK sẽ được loại bỏ.

Khi các ký tự dấu câu xuất hiện trong một hàng, nửa bên phải của dấu chấm CJK sẽ bị xoá.
Khi các ký tự dấu câu xuất hiện trong một hàng, nửa bên phải của dấu chấm CJK sẽ bị xoá.

Nói chung, hành vi mặc định cung cấp kết quả tốt, nhưng nhà phát triển có thể sử dụng thuộc tính text-distance-trim để chọn các kiểu khác hoặc để tắt thuộc tính đó trong một số trường hợp.

Cỡ chữ tối thiểu nhất quán cho các ngôn ngữ

Trước Chrome 118, kích thước phông chữ nhỏ hơn 10 px không được hiển thị như chỉ định mà được làm tròn lên nếu ngôn ngữ là tiếng Ả Rập, tiếng Ba Tư, tiếng Nhật, tiếng Hàn, tiếng Thái, tiếng Trung giản thể hoặc tiếng Trung phồn thể. Nhà phát triển cần có giải pháp để hiển thị văn bản nhỏ, chẳng hạn như bằng cách sử dụng thuộc tính transform.

Kể từ Chrome 118, giới hạn này đã được gỡ bỏ đối với tất cả ngôn ngữ, nâng tổng số ngôn ngữ thành 7 ngôn ngữ còn lại. Thay đổi này giúp cải thiện khả năng tương tác với các trình duyệt khác.

Trên Chrome 118, giới hạn về kích thước phông chữ nhỏ hơn 10px không hiển thị như được chỉ định sẽ được gỡ bỏ đối với tiếng Ả Rập, tiếng Ba Tư, tiếng Nhật, tiếng Hàn, tiếng Thái, tiếng Trung giản thể hoặc tiếng Trung phồn thể.
Từ Chrome 118, giới hạn về kích thước phông chữ nhỏ hơn 10px không hiển thị theo quy định sẽ được gỡ bỏ đối với tiếng Ả Rập, tiếng Ba Tư, tiếng Nhật, tiếng Hàn, tiếng Thái, tiếng Trung giản thể hoặc tiếng Trung phồn thể.

Thu hút và chia sẻ ý kiến phản hồi

Nếu bạn có bất kỳ phản hồi nào về các tính năng này, vui lòng gửi vấn đề tại crbug.com.