Phần tử HTML <ruby> là một công cụ mạnh mẽ giúp cải thiện hiệu quả trình bày văn bản, đặc biệt là đối với các ngôn ngữ ở khu vực Đông Á. Phần tử này cho phép bạn hiển thị chú thích phiên âm hoặc các thông tin bổ sung khác ở trên hoặc bên cạnh văn bản cơ sở. Từ Chrome 128, chú thích màu hồng ngọc sẽ có thể ngắt dòng và bạn có thể tạo kiểu cho văn bản màu hồng ngọc bằng thuộc tính CSS ruby-align.
Phần tử <ruby> bao gồm 2 phần chính: đ cơ ruby là văn bản chính và văn bản hồng ngọc là văn bản chú thích, được đánh dấu bằng phần tử <rt>. Văn bản màu hồng ngọc có thể được hiển thị bên trên hoặc bên dưới đế hồng ngọc, như trong các ví dụ sau.
<ruby>
絵文字
<rt>emoji</rt>
</ruby>
<ruby style="ruby-position: under;">
강남대로
<rt>江南大路</rt>
</ruby>
Tại sao nó lại gọi là hồng ngọc?
Khi sách được sắp chữ bằng các loại có thể di chuyển, kích thước của các loại có thể di chuyển này được xác định trong tên kích thước điểm như Perl và Diamond. Ruby được sử dụng trong hệ thống của Anh để tham chiếu đến kích thước 5,5 điểm. Các máy in Nhật Bản sử dụng một kích thước tương tự như Ruby (5,5 điểm) cho văn bản chú thích và vì vậy bắt đầu coi văn bản chú thích là Ruby (hoặc Rubi theo phiên âm) trong các bản in. Khi văn bản chú thích được đưa vào HTML, phần tử được xác định là <ruby>. Pica (pc) là một tên kích thước điểm trước đây được sử dụng trong CSS làm đơn vị kích thước phông chữ.
Hồng ngọc có thể ngắt dòng
Trước đây, nếu một chuỗi ruby-base hoặc một văn bản màu hồng ngọc dài hơn toàn bộ một dòng, thì chúng được gói riêng lẻ để tạo ra các thử thách bố cục. Để khắc phục điều này, các nhà phát triển web thường đánh dấu một đoạn văn bản bằng nhiều thẻ ruby. Với màu ruby có thể ngắt dòng, bạn có thể bỏ qua việc tạo mã đánh dấu như vậy.
Trong ví dụ sau, bính âm (chữ Hán được La-tinh hoá) được thêm dưới dạng một tập hợp các chú thích màu hồng ngọc về thơ cổ điển Trung Quốc. Kết quả kết xuất hiện tại sẽ bao bọc trong vùng văn bản chú thích màu hồng ngọc.
Kết xuất từ Chrome 128 với các vị trí màu hồng ngọc có thể ngắt dòng được bao bọc văn bản chú thích màu hồng ngọc được bao bọc trên văn bản cơ sở được bao bọc để đạt được khả năng hiển thị văn bản lý tưởng.
Trong một ví dụ khác trong văn học Nhật Bản, dấu ngắt dòng xảy ra trước thành phần màu hồng ngọc dài, tạo ra một khoảng trống trong dòng đầu tiên.
Với viên hồng ngọc có thể ngắt dòng, dấu ngắt dòng được đặt ở giữa phần tử hồng ngọc dài đạt được bố cục lý tưởng.
Tính năng này sẽ không làm hỏng văn bản màu hồng ngọc ngắn có ít hơn hoặc bằng 4 ký tự cơ sở và ít hơn hoặc bằng 8 ký tự chú thích.
Khi một phần tử <ruby> được lồng vào một phần tử <ruby> khác, phần tử <ruby> bên trong sẽ không bị ngắt dòng.
Do điều này làm thay đổi hành vi của các trang web hiện tại sử dụng văn bản màu hồng ngọc dài, nên nếu bạn cần tắt hành vi ngắt dòng này thì việc áp dụng white-space:nowrap sẽ tắt dấu ngắt dòng bên trong phần tử đích như bình thường.
Thuộc tính CSS ruby-align
Thuộc tính CSS mới ruby-align cũng có trong Chrome 128. Thuộc tính này chấp nhận một trong các giá trị từ khoáspace-around, space-between, start và center, đồng thời kiểm soát cách căn chỉnh văn bản cơ sở màu hồng ngọc và văn bản chú thích màu hồng ngọc.
