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

Jack J
Jack J

Chrome sẽ ra mắt 4 tính năng CSS quốc tế mới trong CSS Text Module Level 4 (Mô-đun văn bản CSS cấp 4). 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ắp được vận chuyển.

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

Dòng ngắt cụm từ tiếng Nhật: word-break: auto-phrase

Tính năng này cải thiện khả năng đọc của văn bản tiếng Nhật và có trong 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ự đó nằm ở giữa từ. Đây là hành vi ngắt dòng thông thường cho các ngôn ngữ này, nhưng trong văn bản ngắn như tiêu đề hoặc bài thơ, bạn nên ngắt 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 gói sẽ xảy ra ở các ranh giới như vậy.

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

<h1>窓ぎわのトットちゃん<h1>
word-break: auto-phrase sẽ xuống dòng tại ranh giới cụm từ tự nhiên.
word-break: auto-phrase gói dòng ở ranh giới cụm từ tự nhiên.

Việc phát hiện ranh giới được thực hiện bằng công cụ học máy, do đó, kết quả 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ể ngắt theo cách thủ công. Thẻ <wbr> hoặc Dấu cách có độ rộng bằng 0 (&ZeroWidthSpace;) sẽ thực thi điểm ngắt và Ký tự nối có độ rộng bằng 0 (&zwj;) sẽ ngăn điểm ngắt.

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

Hiện tại, Chrome chỉ hỗ trợ tính năng này cho tiếng Nhật, sử dụng cổng BudouX C++ sử dụng công nghệ học máy AdaBoost. Hãy đọc thêm về chủ đề này trong bài viết Google Developers Japan: BudouX: 読みやすい改行のための軽量な分かち書き器.

Chúng tôi dự định sẽ 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 đây hiện đang ở chế độ bật cờ trong Chrome. Để kiểm thử, hãy bật cờ Experimental Web Platform features (Tính năng thử nghiệm của nền tảng web) (tìm thấy 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ữ số Han, chữ cái Latinh và ASCII cũng như Hiragana và Katakana trong trường hợp tiếng Nhật. Khoảng cách nhỏ khi chuyển đổi từ và sang chữ viết tượng hình không phải chữ Hán thường giúp tăng khả năng đọc.

Chrome dự định bắt đầu chèn khoảng trắng giữa các tập lệnh theo mặc định. Tính năng này mang đến 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, cho web.

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 thuộc tính text-autospace.
Giá trị 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 muốn tắt hành vi này, thuộc tính text-autospace cho phép bạn kiểm soát việc chèn khoảng cách.

text-autospace: no-autospace;

Khoảng cách giữa các dấu câu CJK: text-spacing-trim

Tính năng sau đây đang trong quá trình phát triển và dự kiến sẽ được bật theo mặc định trong Chrome.

Đối với 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ẽ cải thiện khả năng đọc và tạo ra kiểu chữ dễ nhìn hơn. Ngày 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 kiểu chữ cách đều 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ộ của ký tự ở nửa bên phải của khoảng cách ký tự, để mỗi ký tự có khoảng cách 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 ký tự 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; bạn nên xoá nửa bên phải của dấu chấm CJK.

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

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

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

Trước Chrome 118, các kích thước phông chữ nhỏ hơn 10px không được hiển thị như đã chỉ định, nhưng đượ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 sẽ được gỡ bỏ đối với tất cả ngôn ngữ, giúp 7 ngôn ngữ này khớp với các 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.

Kể từ Chrome 118, giới hạn về việc kích thước phông chữ nhỏ hơn 10px sẽ không được hiển thị như đã 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 sẽ không được hiển thị như đã 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 phồn thể.

Tham gia và chia sẻ ý kiến phản hồi

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