HTML <ruby> 요소는 특히 동아시아 언어에서 텍스트 표시를 향상할 수 있는 강력한 도구입니다. 이 요소를 사용하면 기본 텍스트 위나 옆에 소리나는 대로 주석 또는 기타 추가 정보를 표시할 수 있습니다. Chrome 128부터 ruby 주석은 줄바꿈이 가능하며 ruby-align CSS 속성으로 루비 텍스트의 스타일을 지정할 수 있습니다.
<ruby> 요소는 두 가지 기본 부분으로 구성됩니다. 루비 기본은 기본 텍스트이고 루비 텍스트는 <rt> 요소로 마크업된 주석 텍스트입니다. 다음 예와 같이 Ruby 텍스트를 루비 기반 위나 아래에 표시할 수 있습니다.
<ruby>
絵文字
<rt>emoji</rt>
</ruby>
<ruby style="ruby-position: under;">
강남대로
<rt>江南大路</rt>
</ruby>
왜 루비라고 부르나요?
이동식 유형을 사용하여 책 조판을 할 때 이러한 이동 가능한 유형의 크기는 Perl 및 다이아몬드와 같은 포인트 크기 이름으로 정의되었습니다. 루비는 영국 시스템에서 5.5포인트 크기를 가리킬 때 사용되었습니다. 일본 프린터는 주석 텍스트에 Ruby (5.5포인트)와 비슷한 크기를 사용했으므로, 인쇄물에서 주석 텍스트 자체를 Ruby (또는 Rubi)라고 부르기 시작했습니다. 주석 텍스트가 HTML에 포함되었을 때 요소는 <ruby>로 정의되었습니다. Pica (pc)는 CSS에서 글꼴 크기 단위로 사용되는 또 다른 과거 포인트 크기 이름입니다.
줄바꿈 가능한 루비
이전에는 루비 기반 또는 루비 텍스트가 전체 줄보다 길면 개별적으로 래핑되어 레이아웃 문제가 발생했습니다. 웹 개발자는 이 문제를 해결하기 위해 종종 여러 루비 태그를 사용하여 텍스트를 마크업합니다. 줄바꿈 가능한 루비를 사용하면 이러한 마크업 생성을 건너뛸 수 있습니다.
다음 예에서는 병음 (중국어 로마자)이 중국어 고전 시의 루비 주석 집합 하나로 추가됩니다. 현재 렌더링 결과는 ruby 주석 텍스트 영역 내에 래핑됩니다.
Chrome 128에서 렌더링하면 줄바꿈 가능한 Ruby가 래핑된 기본 텍스트 위에 래핑된 Ruby 주석 텍스트를 배치하여 이상적인 텍스트 렌더링을 달성할 수 있습니다.
일본 문학의 또 다른 예에서는 긴 루비 요소 앞에 줄바꿈이 발생하여 첫 번째 줄에 공백이 생성됩니다.
줄바꿈 가능한 루비를 사용하면 줄바꿈이 긴 루비 요소의 중앙에 배치되어 이상적인 레이아웃을 얻을 수 있습니다.
이 기능은 기본 문자가 4개 이하이고 주석 문자가 8자 이하인 짧은 루비 텍스트를 손상시키지 않습니다.
<ruby> 요소가 다른 <ruby> 요소 내에 중첩되어 있어도 내부 <ruby> 요소는 줄바꿈되지 않습니다.
이렇게 하면 긴 루비 텍스트를 사용하는 현재 웹페이지의 동작이 변경되므로 이 줄바꿈 동작을 사용 중지해야 하는 경우 white-space:nowrap를 적용하면 평소처럼 타겟 요소 내에서 줄바꿈이 사용 중지됩니다.
ruby-align CSS 속성
새로운 CSS 속성 ruby-align은 Chrome 128부터 사용할 수 있습니다. 이 속성은 키워드 값 space-around, space-between, start, center 중 하나를 허용하며 ruby 기본 텍스트와 ruby 주석 텍스트의 정렬을 제어합니다.
