HTML 루비 마크업 확장

1. 소개

이 절은 비규범적이다

루비는 기본 텍스트 옆에 렌더링되는 작은 주석을 가리키는 이름이다. 이는 특히 일본어와 그 밖의 동아시아 콘텐츠에 유용하다 (일본어에서는 루비를 후리가나라고 부르기도 한다). 가장 흔하게는 읽는 법(발음 안내)을 제공하는 데 사용된다.

루비 텍스트는 일반적으로 기본 텍스트 옆에 더 작은 글꼴로 표시된다. 루비라는 명칭은 영국의 조판업자들이 사용했던 특정 글꼴 크기 (일반적인 10포인트 글꼴 크기의 약 절반)에서 유래했다.

일반적으로 루비는 동아시아 문자에서 잘 알려지지 않았거나 생소한 문자, 독자가 익숙하지 않을 것으로 예상되는 문자 (예: 글쓰기를 배우는 어린이나 외국인), 또는 문맥만으로는 읽는 법을 결정할 수 없는 여러 가지 독음이 있는 문자 (예: 일부 일본어 이름)의 음성 표기를 제공하는 데 사용된다. 예를 들어 교육 자료와 아동용 텍스트에서 널리 사용되지만, 다양한 종류의 문학 작품과 표지판에서도 쉽게 찾아볼 수 있다. 또한 표의문자의 의미에 관한 정보를 전달하는 데 간혹 사용되기도 한다.

이 문서에 정의된 특수 마크업은 기본 텍스트와 그 주석 사이의 의미적 연관성을 설명하고, 다양한 시각적 레이아웃뿐만 아니라 올바른 비시각적 표현과 처리를 가능하게 하는 데 필요하다.

참고: CSS 루비 주석 레이아웃 모듈 레벨 1은 CSS의 루비 레이아웃 모델을 정의하며, 위에서 설명한 루비 표현과 자주 요구되는 변형을 가능하게 한다.

1.1. 배경 및 HTML 표준과의 관계

루비를 마크업하기 위한 HTML 요소 집합은 여러 명세를 거치며 수년간 발전해 왔다. 2001년의 루비 주석 명세에서 시작해 현재의 HTML 표준에 이르기까지, 각 형태는 유연성, 복잡성 또는 장황함의 정도가 달랐다.

간단한 경우에는 간결하고 효과적이지만, HTML 표준에 설명된 루비 모델은 (이 문서를 작성하는 시점을 기준으로) 모든 사용 사례를 충분히 처리할 만큼 표현력이 높지 않다. 또한 그중 일부 측면은 상호운용 가능하게 구현되어 있지 않으며, 이를 구현하더라도 나머지 사용 사례를 완전히 해결하지 못한다. 게다가 이러한 측면은 CSS 레이아웃 모델과도 충돌한다.

이 명세는 웹 플랫폼에서 루비의 요구 사항을 보다 완전하게 충족하도록, 개정되고 확장된 루비 모델의 구현을 촉진하고 안내하기 위해 작성되었다. 이 작업은 W3C와 WHATWG의 합의에 따라 수행된다.

부록 B: HTML 표준과의 비교에서는 주요 차이점을 요약하고, 이러한 차이가 바람직한 이유를 간략히 설명한다.

상호운용 가능하게 구현된 HTML 표준 하위 집합의 의미는 이 확장 명세에서도 변경되지 않으므로, 여기에서 설명하는 루비 모델은 기존 사용자 에이전트가 지원하는 모든 루비 콘텐츠와 하위 호환된다.

여기에서 설명하는 변경 사항이 향후 WHATWG에 채택되고 HTML 표준에 통합되어, 두 문서 사이의 차이가 줄어들기를 기대한다.

2. 루비를 위한 HTML 요소

2.1. ruby 요소

범주:

플로 콘텐츠.

구문 콘텐츠.

인지 가능한 콘텐츠.

이 요소를 사용할 수 있는 문맥:

구문 콘텐츠가 예상되는 곳.

콘텐츠 모델:

본문 설명을 참조한다.

콘텐츠 속성:

전역 속성

접근성 고려 사항:

작성자용.

구현자용.

DOM 인터페이스:

HTMLElement를 사용한다.

ruby 요소는 연관된 루비 주석과 짝을 이루는 하나 이상의 구문 콘텐츠 범위를 나타낸다. 루비 주석은 기본 텍스트 옆에 표시되는 짧은 주석 텍스트이다. 주로 동아시아 타이포그래피에서 발음 안내로 사용되지만, 그 밖의 연관 정보에도 사용할 수 있다. 루비는 가장 일반적으로 행간 주석으로 표시되지만, 다른 표시 방식도 사용된다. 루비와 그 렌더링에 관한 보다 완전한 소개는 W3C의 루비란 무엇인가? 문서와 CSS 루비 주석 레이아웃 모듈 레벨 1에서 확인할 수 있다.

이 예는 일본어 텍스트를 보여 주며, 루비 마크업을 사용하여 표의문자에 발음을 주석으로 단다.

<ruby><rb>霧</rb><rt>きり</rt></ruby>とも<ruby><rb>霞</rb><rt>かすみ</rt></ruby>とも

일반적인 렌더링은 다음 이미지와 비슷하다:

참고: 구문 변형과 단순화에 관한 설명은 다음 예를 참조한다.

ruby 요소의 콘텐츠 모델은 다음 루비 세그먼트 시퀀스 중 하나 이상으로 구성된다:

1. 하나 이상의 구문 콘텐츠 노드 또는 rb 요소 (또는 그 조합)는 주석이 달리는 기본 레벨 콘텐츠 (루비 기본 범위)를 나타낸다.
2. 하나 이상의 rt 또는 rtc 요소 (또는 그 조합)는 앞선 기본 콘텐츠와 연관된 모든 주석을 나타낸다. 이때 각 rtc 요소 또는 rt 요소 시퀀스는 하나의 독립된 주석 레벨 (루비 주석 범위)을 나타낸다. 각 주석 범위와 각 범위 내부의 주석 단위 앞, 뒤 또는 사이에는 개별 rp 요소가 선택적으로 올 수 있다. (선택적인 rp 요소는 괄호와 같은 표현용 콘텐츠를 추가하는 데 사용할 수 있으며, 이는 주석을 인라인으로 렌더링할 때, 루비 레이아웃이 지원되지 않는 경우의 대체 표시를 포함하여 유용할 수 있다.)

참고: 작성 편의를 위해 내부 루비 요소인 rb, rt, rtc, 및 rp에는 선택적 종료 태그가 있다.

대만에서는 중국어 텍스트의 음성 주석을 일반적으로 주음 문자(보포모포라고도 함)를 사용해 제공한다. 중국 본토에서는 음성 주석을 일반적으로 라틴 문자를 사용하는 병음 표기로 제공한다. 이 예에서는 두 가지를 모두 제공한다:

<ruby lang=zh-TW>
  <rb>美</rb><rtc><rt>ㄇㄟˇ</rt></rtc><rtc lang=zh-Latn><rt>měi</rt></rtc>
</ruby>

HTML 루비의 특정 기능을 사용하면 마크업을 더 단순하게 만들 수 있다:

• 종료 태그를 생략할 수 있다.
• ruby 요소에 직접 포함된 텍스트는 암시적으로 루비 기본 단위를 나타낸다 (rb 요소에 포함된 것처럼).
• ruby 요소의 연속된 rt 자식은 암시적으로 루비 주석 범위로 그룹화된다 (rtc 요소에 포함된 것처럼).
• rtc 요소에 직접 포함된 텍스트는 암시적으로 루비 주석 단위를 나타낸다.

결과적으로 위 예는 다음과 (생성되는 DOM은 다르지만 의미상으로는) 동등하다:

<ruby lang=zh-TW>美<rt>ㄇㄟˇ<rtc lang=zh-Latn>měi</ruby>

참고: CSS 루비 주석 레이아웃 모듈 레벨 1을 사용하면 작성자가 HTML ruby 요소와 그 콘텐츠의 렌더링을 제어할 수 있으며, 동일한 마크업을 바탕으로 다양한 레이아웃을 지원할 수 있다.

주음(보포모포) 문자에는 일반적으로 세 가지 렌더링 스타일이 사용된다. (명확성을 위해 여기에서는 주석을 파란색으로 표시하지만, 실제 사용에서는 색상 차이가 없다.)

텍스트를 세로로 쓸 때는 음성 주석을 기본 텍스트를 따라 오른쪽에 렌더링한다:

가로쓰기에서는 일반적으로 음성 주석을 각 기본 문자 사이에 끼워 오른쪽에 조판한다:

그러나 주음 주석을 가로쓰기 기본 텍스트의 위쪽에 조판하기도 한다:

이러한 차이는 의미적 차이가 아니라 스타일상의 차이이므로, 동일한 마크업을 공유한다:

<ruby lang=zh-TW><rb>電<rb>腦<rt>ㄉㄧㄢˋ<rt>ㄋㄠˇ</ruby>

2.1.1. 루비 분할 및 대응

루비 요소 내부에서는 콘텐츠가 일련의 루비 세그먼트로 나뉜다. 요소 사이 공백과 rp 요소를 무시하면, 각 루비 세그먼트는 다음으로 구성된다:

• 하나의 루비 기본 범위: 0개 이상의 루비 기본 단위. 각 단위는 단일 자식 rb 요소를 포함하는 DOM 범위이거나, 자식 rb 요소를 포함하지 않는 자식 콘텐츠의 최대 DOM 범위이다.
• 0개 이상의 루비 주석 범위. 각 범위는 단일 rtc 요소 또는 연속된 rt 요소의 최대 시퀀스에 해당하는 DOM 범위이다. 루비 주석 범위는 다시 루비 주석 단위 시퀀스로 나뉜다: 범위가 rt 요소 시퀀스로 구성된 경우, 각 요소가 개별 루비 주석 단위가 된다. 범위가 rtc 요소로 구성된 경우에는, 그 자식 rt 요소 각각과 rt가 아닌 자식 콘텐츠의 각 최대 DOM 범위가 루비 주석 단위가 된다.

중국어에서는 텍스트의 각 문자에 개별적으로 주석을 다는 방식도 일반적이다. 이 예에서는 각 문자가 자체 ruby 요소 안에서 개별적으로 주석 처리된다:

<ruby>千<rt>qiān</ruby><ruby>里<rt>lǐ</ruby><ruby>之<rt>zhī</ruby><ruby>行<rt>xíng</ruby>﹐<ruby>始<rt>shǐ</ruby><ruby>於<rt>yú</ruby><ruby>足<rt>zú</ruby><ruby>下<rt>xià</ruby>

인접한 여러 루비 세그먼트를 동일한 ruby 부모 안에 결합할 수도 있다:

<ruby>千<rt>qiān</rt>里<rt>lǐ</rt>之<rt>zhī</rt>行<rt>xíng</ruby>﹐<ruby>始<rt>shǐ</rt>於<rt>yú</rt>足<rt>zú</rt>下<rt>xià</ruby>

주석 대응 과정은 루비 주석 단위를 루비 기본 단위와 연결한다. 각 루비 세그먼트 안에서, 각 루비 기본 단위는 각 루비 주석 범위의 루비 주석 단위와 짝을 이룬다. 루비 주석 범위가 rtc 요소로 구성되고 그 안에 rt 요소가 없다면, 그 콘텐츠가 나타내는 단일 루비 주석 단위는 루비 세그먼트 안의 모든 루비 기본 단위에 걸친다 (즉, 그 모든 단위와 짝을 이룬다). 그렇지 않으면 루비 주석 범위 안의 각 루비 주석 단위는 순서대로 세그먼트의 루비 기본 범위 안에 있는 대응하는 루비 기본 단위와 짝을 이룬다. 루비 기본 단위가 충분하지 않으면, 남은 루비 주석 단위는 루비 기본 범위 끝에 삽입된 비어 있는 가상의 기본 단위와 연결된 것으로 간주한다. 루비 주석 범위 안에 루비 주석 단위가 충분하지 않으면, 남은 루비 기본 단위에는 해당 주석 레벨의 주석이 없는 것으로 간주한다.

<ruby><rb>京<rb>都<rb>市<rt>きょう<rt>と<rt>し</ruby>

<ruby><rb>京<rb>都<rb>市<rp>（<rt>きょう<rt>と<rt>し<rp>）</ruby>

2.1.2. 여러 문자로 이루어진 루비의 마크업 패턴

이 절은 비규범적이다

가장 단순한 예에서는 각 루비 기본 단위가 하나의 문자만 포함한다. 이는 문자별 음성 주석에 자주 사용되는 패턴이다. 그러나 루비 기본 단위가 하나의 문자만 포함하도록 제한되는 것은 아니다. 경우에 따라 주석을 개별 기본 문자에 대응시키는 것이 불가능할 수 있으며, 주석이 문자 그룹 전체에 공동으로 적용되어야 할 수도 있다.

예를 들어 일본어로 “오늘”을 뜻하는 단어는 今日라는 문자로 쓰며, 글자 그대로는 “이”+“날”이라는 뜻이다. 그러나 발음은 きょう(kyō)이며, 이를 “이”에 해당하는 부분과 “날”에 해당하는 부분으로 나눌 수 없다.

따라서 今日의 읽는 법을 나타내는 음성 루비는 다음과 같이 마크업한다:

<ruby>今日<rt>きょう</ruby>

루비는 발음 대신 (또는 발음과 함께) 기본 텍스트의 의미를 설명하는 데 사용할 수도 있다. 이러한 경우 기본 텍스트와 주석은 일반적으로 모두 여러 문자로 이루어지며, 의미 있는 하위 분할이 불가능하다.

여기서는 복합 표의어에 영어에서 파생된 동의어를 (가타카나로 표기하여) 주석으로 제공한다:

<ruby>境界面<rt>インターフェース</ruby>

여기서는 복합 표의어의 영어 대응어를 주석으로 직접 제공한다:

<ruby lang="ja">編集者<rt lang="en">editor</ruby>

복합어에서 음성 주석이 개별 문자에 대응하더라도, 여러 문자로 된 기본 텍스트의 주석과 비슷하게 기본 텍스트 위의 공간을 함께 공유하도록 조판하기도 한다. 그러나 렌더링에는 미묘한 차이가 있으므로, 복합어 내부의 대응 관계와 해당 문자들이 하나의 단어임을 함께 인코딩해야 한다. 또한 이러한 방식으로 공간을 공유할지, 아니면 각 쌍을 자체 시각적 “열”에 렌더링할지는 스타일상의 선택이다. 마크업은 두 렌더링 방식 (및 올바른 인라인 배치)을 모두 허용할 만큼 충분한 정보를 제공해야 한다.

이 예에서는 일본의 전통적인 서사 음악 형식인 일본어 명사 “浄瑠璃”(jōruri)를 사용한다. 각 문자의 발음은 각각 “じょう”, “る”, “り”이다. (명확성을 위해 이 예에서는 서로 다른 색상을 사용하지만, 실제 사용에서는 색상 차이가 없다.)

이러한 복합어는 각 문자 위에 음성 주석을 하나씩 배치하여 렌더링할 수 있다. 이 스타일에서는 주석이 주석 대상 문자보다 시각적으로 길면 각 문자와 해당 주석의 대응 관계를 명확히 하기 위해 주변 텍스트가 서로 벌어진다.

그러나 다양한 타이포그래피 전통에서는 이러한 단어가 기본 텍스트에 간격을 만들게 되는 경우, 하나의 단어라는 의미를 유지하기 위해 주석들이 공간을 함께 공유하도록 표시하는 것이 일반적이다. 이 스타일을 “주쿠고 루비”라고 한다 (“주쿠고”는 “복합어”를 뜻한다).

“주쿠고 루비”로 표시하더라도 주석이 항상 병합되는 것은 아니다. 단어 중간에서 줄바꿈이 발생하면 주석은 올바른 기본 문자와의 연관성을 유지해야 한다.

주석의 병합 여부와 병합 정도는 달라질 수 있으며, 글꼴 크기에 따라 달라질 수도 있다. 다음 그림은 여러 가능성 중 두 가지를 보여 준다. 하나는 기본 문자보다 넓은 주석을 반드시 모든 주석과 병합하지 않고 이웃한 주석과만 병합하는 방식이고, 다른 하나는 어떤 주석이든 기본 문자보다 넓어지는 즉시 “주쿠고 루비”의 모든 주석을 병합하는 방식이다. 이 명세는 특정 레이아웃을 요구하지 않는다. 이는 CSS와 같은 스타일 기술의 관할에 속한다.

스타일 기술이 어떤 렌더링 변형을 제공하든, “주쿠고 루비” 및 그 변형으로 렌더링할지 여부는 스타일상의 선택이므로 동일한 마크업은 모든 스타일을 지원할 만큼 충분한 정보를 포함해야 한다. 마크업은 단어 내부의 대응 정보와 이러한 쌍을 하나의 단어로 그룹화한다는 사실을 모두 인코딩해야 한다:

<ruby><rb>浄<rb>瑠<rb>璃<rt>じょう<rt>る<rt>り</ruby>

모든 기본 문자가 하나의 rb 요소에 포함되고 모든 주석 텍스트가 하나의 rt 요소에 포함되면, 개별 대응 관계가 사라지므로 올바른 “주쿠고 루비”를 구현할 수 없다.

참고: 일본어 및 중국어 루비의 사용과 렌더링에 관한 자세한 내용은 일본어 텍스트 레이아웃 요구 사항 日本語組版処理の要件(日本語版) (특히 루비 및 강조점과 부록 F), 일본어 루비의 단순 배치 규칙, 그리고 중국어 텍스트 레이아웃 요구 사항 - 中文排版需求의 인라인 참고 및 주석 절을 참조한다.

2.2. rb 요소

범주:

없음.

이 요소를 사용할 수 있는 문맥:

ruby 요소의 자식으로.

콘텐츠 모델:

구문 콘텐츠.

콘텐츠 속성:

전역 속성

DOM 인터페이스:

HTMLElement를 사용한다.

rb(“루비 기본”) 요소가 ruby 요소의 자식이면, 해당 요소는 짝을 이루는 루비 주석이 주석으로 다는 기본 레벨 텍스트의 단일 구성 요소인 루비 기본 단위를 나타낸다.

rb 요소가 ruby 요소의 자식이 아니면, 해당 요소는 그 자식과 같은 것을 나타낸다.

<ruby>기본 텍스트<rt>주석</ruby>

<ruby><rb>기본 텍스트<rt>주석</ruby>

2.3. rt 요소

범주:

없음.

이 요소를 사용할 수 있는 문맥:

ruby 또는 rtc 요소의 자식으로.

콘텐츠 모델:

구문 콘텐츠.

콘텐츠 속성:

전역 속성

접근성 고려 사항:

작성자용.

구현자용.

DOM 인터페이스:

HTMLElement를 사용한다.

rt(“루비 텍스트”) 요소가 ruby 요소의 자식이거나, 자체가 ruby 요소의 자식인 rtc 요소의 자식이면, 해당 요소는 짝을 이루는 루비 기본 단위에 대한 단일 주석인 루비 주석 단위를 나타낸다.

rt 요소가 ruby 요소의 자식도 아니고, 자체가 ruby 요소의 자식인 rtc 요소의 자식도 아니면, 해당 요소는 그 자식과 같은 것을 나타낸다.

2.4. rtc 요소

범주:

없음.

이 요소를 사용할 수 있는 문맥:

ruby 요소의 자식으로.

콘텐츠 모델:

구문 콘텐츠 또는 rt 요소 시퀀스 중 하나. 개별 rp 요소가 선택적으로 앞, 사이 또는 뒤에 올 수 있다.

콘텐츠 속성:

전역 속성

DOM 인터페이스:

HTMLElement를 사용한다.

rtc (“루비 텍스트 컨테이너”) 요소가 ruby 요소의 자식이면, 앞선 루비 기본 단위 시퀀스 (그 루비 기본 범위)에 대한 하나의 주석 레벨 (루비 주석 범위)을 나타낸다.

참고: 단순한 경우에는 연속된 rt 요소가 루비 주석 범위를 암시하므로, rtc 요소를 생략할 수 있다. 그러나 단일 루비 기본 범위에 여러 주석 레벨을 연결하려면 이러한 요소가 필요하다. 예를 들어 음성 정보와 의미 정보를 모두 제공하거나, 서로 다른 문자 체계로 된 음성 정보, 또는 서로 다른 언어로 된 의미 정보를 제공할 수 있다.

이 예에서는 일본어 복합어 上手(“능숙함”)에 가나와 로마자 음성 표기로 된 음성 주석을 모두 제공하면서 기본 단위와의 대응 및 주석 그룹화 정보를 유지한다.

이는 다음 마크업으로 가능하다:

<ruby><rb>上<rb>手<rt>じよう<rt>ず<rtc><rt>jou<rt>zu</ruby>

참고: rtc 요소의 직접 자식인 텍스트는 rt 요소에 포함된 것처럼 암시적으로 루비 주석 단위를 나타내지만, 이 주석은 해당 세그먼트의 모든 기본 단위에 걸친다는 점이 다르다.

이 예에서는 샌프란시스코를 뜻하는 중국어 (旧金山, 즉 “오래된 황금 산”)에 발음을 제공하는 병음과 원래 영어 명칭을 모두 주석으로 단다.

다음과 같이 마크업한다:

<ruby><rb>旧<rb>金<rb>山<rt>jiù<rt>jīn<rt>shān<rtc>San Francisco</ruby>

여기에서는 세 개의 기본 문자로 된 하나의 기본 범위에 첫 번째 (암시적) 컨테이너의 세 병음 루비 텍스트 세그먼트로 주석을 달고, 도시의 영어 이름이라는 두 번째 단일 루비 주석을 제공하기 위해 rtc 요소를 도입한다.

rtc 요소가 ruby 요소의 자식이 아니면, 해당 요소는 그 자식과 같은 것을 나타낸다.

2.5. rp 요소

범주:

없음.

이 요소를 사용할 수 있는 문맥:

ruby 또는 rtc 요소의 자식으로, rtc 요소 또는 루비 주석 단위의 바로 앞이나 바로 뒤에.

콘텐츠 모델:

텍스트.

콘텐츠 속성:

전역 속성

접근성 고려 사항:

작성자용.

구현자용.

DOM 인터페이스:

HTMLElement를 사용한다.

rp(“루비 괄호”) 요소는 아무것도 나타내지 않는다. 이는 루비 전용 레이아웃을 사용하지 않고 루비 콘텐츠를 인라인으로 표시할 때 보여 줄 루비 주석 단위 주위의 표현용 콘텐츠 (예: 괄호)를 제공하는 데 사용된다. 이는 루비 레이아웃을 지원하지 않는 사용자 에이전트를 사용하거나, 스타일상의 이유로 발생할 수 있다. 일반적인 루비 레이아웃에서는 표시되지 않는다.

...<ruby>漢<rb>字<rp>（<rt>かん<rt>じ<rp>）</ruby>...

...漢字（かんじ）...

<ruby>
  <rb>♥<rp>: <rt>하트<rp>, <rtc lang=fr>Cœur</rtc><rp>.</rp>
  <rb>☘<rp>: <rt>클로버<rp>, <rtc lang=fr>Trèfle</rtc><rp>.</rp>
  <rb>✶<rp>: <rt>별<rp>, <rtc lang=fr>Étoile</rtc><rp>.</rp>
</ruby>

♥: 하트, Cœur. ☘: 클로버, Trèfle. ✶: 별, Étoile.

3. 선택적 태그

rb 요소의 종료 태그는 해당 rb 요소 바로 뒤에 rb, rt, rtc 또는 rp 요소가 오거나, 부모 요소에 더 이상 콘텐츠가 없으면 생략할 수 있다.

rt 요소의 종료 태그는 해당 rt 요소 바로 뒤에 rb, rt, rtc 또는 rp 요소가 오거나, 부모 요소에 더 이상 콘텐츠가 없으면 생략할 수 있다.

rtc 요소의 종료 태그는 해당 rtc 요소 바로 뒤에 rb 또는 rtc 요소가 오거나, 부모 요소에 더 이상 콘텐츠가 없으면 생략할 수 있다.

rp 요소의 종료 태그는 해당 rp 요소 바로 뒤에 rb, rt, rtc 또는 rp 요소가 오거나, 부모 요소에 더 이상 콘텐츠가 없으면 생략할 수 있다.

4. 렌더링

다음 규칙을 HTML 사용자 에이전트 스타일시트에 추가한다:

ruby { display: ruby; }
rb { display: ruby-base; white-space: nowrap; }
rbc { display: ruby-base-container; } /* XHTML에서 유래한 마크업과의 호환성을 위한 것 */
rp { display: none; }
rt { display: ruby-text; }
rtc { display: ruby-text-container; }
ruby, rb, rbc, rt, rtc { unicode-bidi: isolate; }
rtc, rt {
  font-variant-east-asian: ruby;
  text-emphasis: none;
  white-space: nowrap;
  line-height: 1;
}
rtc, :not(rtc) > rt {
  font-size: 50%;
}
rtc:lang(zh-TW), :not(rtc) > rt:lang(zh-TW) {
    font-size: 30%;
  }

5. 적합한 기능

6. 상호작용

6.1. 텍스트 검색

이 절은 비규범적이다

[HTML]은 페이지 내 찾기 작업과 그 일반적인 작동 방식을 정의하지만, 쿼리에서 일치 항목을 정확히 어떻게 결정하는지는 정의하지 않는다. 여러 HTML 사용자 에이전트가 window.find() API도 지원하지만, 이 문서를 작성하는 시점에는 규범적 명세가 없으며, 문서에서 특정 검색 문자열이 일치하는지 결정하는 구체적인 방법도 정의되어 있지 않다.

따라서 이 명세는 텍스트 검색과 루비의 상호작용에 관한 규범적 동작을 정의하려 하지 않는다. 그러나 몇 가지 일반적인 사용자 기대를 언급할 수 있으며, 사용자 에이전트는 이러한 기능을 구현할 때 이를 고려하는 것이 권장된다.

• 사용자는 일반적으로 루비 주석이 검색을 방해할 것으로 기대하지 않는다. 단어나 구문에 루비 주석이 있는지 여부나 이러한 주석을 삽입하는 데 사용한 마크업 패턴과 관계없이, 사용자는 기본 텍스트를 찾을 수 있을 것으로 기대한다. 사용자는 일반적으로 구체적인 마크업 패턴을 알지 못하므로, 기본 텍스트 노드 사이에 주석이 끼어 있어 쿼리 텍스트가 문서에서 끊김 없이 나타나지 않는 경우에도 마찬가지이다.
• 마찬가지로 루비 주석이 마크업에서 주석이 달린 단어 뒤와 다른 단어 앞에 나타나는 경우, 사용자는 일반적으로 두 단어 사이에 무언가가 있다는 사실을 인식하지 못하며, 이 두 단어로 구성된 쿼리 문자열이 일치할 것으로 기대한다.
• 사용자는 기본 텍스트뿐만 아니라 루비 주석에 포함된 텍스트를 검색할 수도 있다. 여기에서도 마크업 패턴은 사용자에게 알려지지 않았으며 중요하지 않으므로, 사용자는 텍스트가 마크업에 연속적으로 나타나는지, 또는 마크업에 루비 기본 단위와 주석이 서로 끼어 있는지와 관계없이 자신이 하나의 단어나 구문이라고 생각하는 내용을 찾을 수 있을 것으로 기대한다.
• rp 요소는 일반적으로 보이지 않으므로, 사용자는 해당 요소의 존재가 검색에 영향을 주지 않을 것으로 기대한다.

<ruby><rb>東<rb>京<rt>とう<rt>きょう</ruby>に行く。

<ruby><rb>東<rt>とう<rb>京<rt>きょう</ruby>に行く。

<ruby><rb>東<rb>京<rp>（<rt>とう<rt>きょう<rp>）</ruby>に行く。

참고: 텍스트 검색의 복잡성과 관련된 추가 고려 사항은 [string-search]도 참조한다.

6.2. 복사 및 붙여넣기

이 절은 비규범적이다

웹 플랫폼은 클립보드의 복사 및 붙여넣기 작업에 관한 세부 사항을 정확히 명시하지 않는다. 특히 클립보드는 일반적으로 구조화된 텍스트와 일반 텍스트를 모두 지원하지만, 한 형식이 다른 형식으로 어떻게 변환되는지, 복사할 때 문서의 콘텐츠를 클립보드로 어떻게 추출하는지는 일반적으로 정의되어 있지 않다.

따라서 이 명세는 클립보드와 루비의 상호작용에 관한 규범적 동작을 정의하려 하지 않는다. 그러나 몇 가지 일반적인 사용자 기대를 언급할 수 있으며, 사용자 에이전트는 이러한 기능을 구현할 때 이를 고려하는 것이 권장된다.

• 주석이 달린 루비 텍스트를 복사 및 붙여넣기를 통해 일반 텍스트로 변환할 때, 사용자 에이전트는 기본 텍스트만 유지하거나, 기본 텍스트와 주석 텍스트를 모두 포함하거나, 루비 주석을 포함하거나 제외하여 복사 및 붙여넣기할 수 있는 선택권을 사용자에게 제공할 수 있다.

  일반 텍스트 렌더링에 루비 기본 텍스트와 주석을 모두 포함한다면, 이를 선형화해야 한다. 이 문맥에서는 일반적으로 숨겨지는 rp 요소를 렌더링하는 것이 적절하다. 올바른 루비 렌더링을 지원하지 않는 사용자 에이전트가 rp 요소가 없을 때 rt 요소의 텍스트 주위에 괄호를 렌더링해야 한다는 HTML § 15.3.4 구문 콘텐츠의 기대 사항도 이 문맥과 관련이 있다.

  사용자가 다음 텍스트 조각 중 하나를 선택하여 복사하고 textarea에 붙여넣는 경우를 생각해 보자:

  제 이름은 <ruby><rb>網<rb>本<rt>あみ<rt>もと</ruby>
  

  제 이름은 <ruby><rb>網<rb>本<rp>(<rt>あみ<rt>もと<rp>)</ruby>
  

  제 이름은 網本입니다 또는 제 이름은 網本(あみもと)입니다 중 어느 쪽이든 예상할 수 있다. 그러나 제 이름은 網本あみもと입니다는 주석을 유지하면서도 그것이 주석임을 나타내는 조치 없이 기본 텍스트와 병합하므로, 독자에게 혼란을 줄 수 있다.

• 사용자는 일반적으로 선택할 수 있는 내용을 복사할 수 있을 것으로 기대한다. 기본 텍스트 또는 주석 텍스트만 구체적으로 선택했다면, 복사 작업 후 클립보드에서 해당 텍스트를 찾을 수 있을 것으로 기대한다. 다시 말해 모든 일반 텍스트 복사 및 붙여넣기 작업에서 모든 주석을 무조건 폐기하는 것은 사용자 기대를 충족하기 어렵다.

부록 A: HTML의 편집상 조정

이 절은 비규범적이다

이 명세 본문에서 제시한 규범적 문장을 보완하여, 이 절에서는 HTML 표준을 여기에서 다루는 내용과 완전히 일치시키기 위해 적용하는 것이 바람직한 추가 편집 변경 사항을 자세히 설명한다.

• HTML § 15.3.4 구문 콘텐츠의 다음 단락에서 루비 기본 단위를 위한 CSS 익명 상자 생성에 관한 오래된 참고 설명을 제거한다:

  CSS 루비 모델의 목적상, rt 또는 rp 요소가 아닌 ruby 요소의 자식 연속 구간은 display 속성 값이 ruby-base인 익명 상자로 감싸질 것으로 예상된다. [CSS-RUBY-1]

  이 문제는 이미 CSS 루비 주석 레이아웃 1 § 2.2 익명 루비 상자 생성에서 철저히 다루고 있다.

• HTML § 15.3.4 구문 콘텐츠의 다음 참고를 대체한다:

  참고: 가능해지면 앞선 요구 사항을 CSS 루비를 사용하여 표현하도록 갱신할 것이다. (현재 CSS 루비는 중첩된 ruby 요소 또는 연속된 여러 rt 요소를 처리하지 못하며, 이 의미는 이러한 방식으로 표현된다.)

  참고: CSS에서는 기본적으로 이 효과를 얻는다: ruby-position 속성의 초깃값은 alternate이며, 이 값을 통해 해당 효과가 생성된다.

• HTML § 4.5.29 사용 요약의 표에서 ruby, rt, rp 행을 다음으로 대체한다:

  요소	목적	예
  ruby, rb, rt, rtc, rp	루비 주석	<ruby>​<rb>​旧<rb>​金<rb>​山<rp>​ (<rt>​jiù<rt>​jīn<rt>​shān<rtc>​<rp>​: </rp>​San Francisco</rtc>​<rp>​)</ruby>

• HTML § 요소의 표를 갱신하여 rb 및 rtc 행을 추가하고, rp, rt, 및 ruby 행을 다음과 같이 대체한다:

  요소	설명	범주	부모†	자식	속성	인터페이스
  rb	루비 기본	없음	ruby	구문	전역 속성	HTMLElement
  rp	루비 주석 텍스트용 괄호	없음	ruby; rtc	텍스트	전역 속성	HTMLElement
  rt	루비 주석 텍스트	없음	ruby; rtc	구문	전역 속성	HTMLElement
  rtc	루비 주석 컨테이너	없음	ruby	구문; rt; rp	전역 속성	HTMLElement
  ruby	루비 주석	플로; 구문; 인지 가능	구문	구문; rb; rt; rtc; rp*	전역 속성	HTMLElement

• HTML § 요소 인터페이스의 표를 갱신하여 다음 두 행을 추가한다:

  요소	인터페이스
  rb	HTMLElement
  rtc	HTMLElement

부록 B: HTML 표준과의 비교

이 절은 비규범적이다

참고: 이 비교는 이 문서를 작성하는 시점의 HTML 표준 상태를 기준으로 한다. HTML 표준이 여기에서 설명한 변경 사항의 일부 또는 전부를 채택하거나, 다른 방식으로 루비 처리를 발전시키면, 이 절도 이에 맞게 갱신될 것으로 예상되지만, 갱신되기까지 지연이 있을 수 있다.

이 명세는 이전에 폐기된 rb 및 rtc 요소를 다시 도입하지만, HTML § 13.2 HTML 문서 파싱에는 변경을 가하지 않는다. 이러한 요소와 선택적 종료 태그는 이미 그곳에서 처리되고 있다.

그러나 다양한 루비 관련 요소를 사용하는 방법에는 차이가 있으며, 그중 두 가지 핵심 차이는 다음과 같다:

1. 익명 루비 기본 단위 사이에 rt 요소를 끼워 넣을 수 있는 기능에 더하여, 이전에 폐기되었던 rb 요소를 복원한다. 이를 통해 연속된 여러 기본 단위 뒤에 각각의 주석을 배치하는 이른바 표 형식 마크업 패턴을 사용할 수 있다:

   <ruby>
     <rb>…<rb>…<rb>…
     <rt>…<rt>…<rt>…
   </ruby>
   

   rb와 표 형식 마크업이 없으면, 복합어의 다양한 가능한 표시를 올바르게 처리하는 데 필요한 개별 기본 단위/주석 대응을 구현하기 위해 기본 텍스트 세그먼트 사이에 rt 요소를 끼워 넣어야 한다. 그러나 이러한 마크업으로는 올바른 루비 인라인 배치를 구현할 수 없다.

   또한 끼워 넣은 마크업은 주석이 기본 텍스트를 끊기 때문에 복사 및 붙여넣기, 문서 검색, 음성 합성과 같은 작업에서도 문제를 일으킨다. 검색의 경우 사용자 에이전트가 이 문제를 완화할 수 있지만, 더 단순한 사용자 에이전트와 검색 이외의 작업에서는 여전히 문제가 된다.

2. 이 문서는 여러 주석 레벨을 처리하기 위한 다른 모델을 정의한다:
   • 명시적인 주석 컨테이너를 사용하지 않고 앞선 기본 텍스트 세그먼트에 연속된 여러 rt 요소를 연결하는 기능은 제거한다. 이 패턴은 HTML 표준이 의도한 의미로 상호운용 가능하게 구현되어 있지 않으며, 표 형식 마크업과도 충돌한다.

     대신 이전에 폐기된 rtc 요소를 복원하여, 끼워 넣기 또는 표 형식 마크업 패턴을 사용해 동일한 기본 단위 위에 여러 주석 범위를 표시할 수 있도록 한다.

   • 루비 중첩 기능은 유지하지만, 중첩된 루비를 위한 특수 의미는 제거한다. 해당 마크업 패턴은 추가 주석 레벨에 rtc를 사용하는 것보다 표현력이 엄격히 떨어진다. 바깥쪽 루비의 개별 주석을 안쪽 루비의 개별 기본 단위와 짝지을 수 없기 때문이다. 따라서 “上手”에 관한 예는 rtc를 사용해 구현할 수 있지만, 중첩된 루비로는 구현할 수 없다.

     HTML 표준에 정의된 중첩된 루비 역시 일반적인 중첩 의미를 넘어서는 상호운용 가능한 구현이 없으며, CSS 루비 주석 레이아웃 모듈 레벨 1의 레이아웃 모델과도 충돌한다.

fantasai가 작성한 2011년 블로그 게시물에서는 이러한 요구 사항과 그에 따른 설계 선택을 더 자세히 설명한다.

부록 C: 보안 고려 사항

이 절은 비규범적이다

이 명세에는 알려진 보안 영향이 없다.

부록 D: 개인정보 보호 고려 사항

이 절은 비규범적이다

이 명세에는 알려진 개인정보 보호 영향이 없다.

부록 E: 접근성 고려 사항

이 절은 비규범적이다

루비는 주로 발음 안내로 사용되므로, 그 자체가 접근성을 지향하는 기능이다. 다양한 문해 수준의 독자가 그렇지 않으면 읽기 어렵거나 불가능할 수 있는 콘텐츠에 접근할 수 있도록 한다. 이러한 용도로 사용할 때 루비는 읽기를 배우는 어린이나 비원어민, 다양한 학습 장애 또는 그 밖의 인지 장애가 있는 사람, 불우한 배경으로 인해 교육 수준이 제한된 사람 등에게 도움이 될 수 있다…

이 확장 명세의 핵심 동기는 루비 사용 방식의 다양성과 사용자 및 그에 따른 기대의 다양성을 인식하고, 사용 가능한 마크업 패턴이 다양한 상황을 수용하는 데 필요한 구조 정보를 제공할 수 있도록 하는 것이다.

난독증이 있는 사람은 동일한 콘텐츠의 시각적 표현에 따라 읽기 쉬움의 정도가 달라질 수 있다. 여러 변형 중 일부 사용자는 루비 주석을 다른 색으로 표시하거나, 주석 대상 문자와 간격을 두거나, 인라인 괄호 형식으로 표시하는 방식을 선호할 수 있다. 이러한 방식은 주석과 주석 대상 텍스트를 더 쉽게 구별하게 한다. 마찬가지로 교육 환경에서의 사용은 다양한 표현 변형을 요구할 수 있다. 이 명세가 시각적 레이아웃을 직접 다루지는 않지만, 여기에서 정의한 마크업 패턴은 작성자가 루비 주석에 관한 관련 구조 정보를 표현할 수 있도록 의도적으로 설계되었다. 이 정보는 CSS와 같은 스타일 언어가 마크업을 변경하거나 훼손하지 않고도 사용자의 요구와 선호를 지원하는 다양한 표현을 제공하는 데 사용할 수 있다. [CSS-RUBY-1]을 참조한다.

시력이 낮거나 전혀 없는 사람은 문서의 대체 또는 보완 음성 렌더링을 제공하기 위해 스크린 리더와 같은 도구에 의존하는 경우가 많다. HTML 루비 마크업 및 이에 대응하는 텍스트 음성 변환 문제는 이 명세보다 앞서 존재했으며, 이 명세는 해당 문제를 새로 도입하지도 해결하지도 않는다. 이 확장 명세은 루비의 다양한 사용 방식이 서로 다른 음성 렌더링의 이점을 얻을 수 있음을 인정하지만, 문제의 다른 측면을 발전시키는 데 초점을 맞추므로 이 요구를 해결하기 위한 새로운 메커니즘을 도입하지 않는다. 이 중요한 고려 사항은 이후 작업에서 다룰 것으로 예상된다. 그동안 HTML 사용자 에이전트와 스크린 리더는 가장 유용한 텍스트 음성 변환 렌더링을 결정하기 위한 휴리스틱 방법을 고려하는 것이 권장된다. (일본어의 일반적인 패턴과 텍스트 음성 변환 기대 사항에 관한 논의는 [RUBY-TTS-REQ]를 참조한다.)

부록 F: 감사의 말

이 절은 비규범적이다

이 문서는 여러 출처에서 파생되었으며 (그 출처들도 어느 정도 서로에게서 파생되었다), 다음을 비롯한 모든 출처의 기여자에게 감사드린다:

• HTML 표준의 수많은 편집자와 기여자

• 이전 버전의 W3C HTML 루비 마크업 확장 편집자인 Robin Berjon

• 루비 주석의 편집자 및 기여자

또한 다음을 비롯한 국제화 워킹 그룹 참여자들의 전문적인 의견, 수년에 걸친 연구, 광범위한 문서화가 없었다면 이 작업은 불가능했을 것이다:

• 일본어 텍스트 레이아웃 요구 사항 日本語組版処理の要件(日本語版)의 수많은 기여자

• 중국어 텍스트 레이아웃 요구 사항 - 中文排版需求의 수많은 기여자

• Richard Ishida

• Elika J. Etemad(일명 fantasai)

부록 F: 변경 사항

이 절은 비규범적이다

2024년 5월 7일 작업 초안 이후의 변경 사항

2024년 5월 7일 작업 초안 이후의 주요 변경 사항:

• 비규범적 부록 E: 접근성 고려 사항 절 추가.

• 비규범적 § 6 상호작용 절 추가.

• 예, 참고 및 소개 본문을 명확하게 하기 위한 다양한 편집상 조정.

2014년 2월 4일 W3C HTML 루비 마크업 확장 워킹 그룹 참고 문서 이후의 변경 사항

여기에서 설명하는 마크업 모델은 2014년 워킹 그룹 참고 문서에서 확립한 모델과 실질적으로 동일하지만, 이를 설명하는 본문과 예는 대폭 수정되었다.

2014년 워킹 그룹 참고 문서에서 제안한 파싱 변경 사항은 이후 HTML 표준에 채택되었으므로, 여기에서는 더 이상 논의하지 않는다.

부록 G: 후보 권고안 종료 기준

이 명세가 제안 권고안으로 진전되려면, 각 기능에 대해 독립적이고 상호운용 가능한 구현이 최소 두 개 이상 있어야 한다. 각 기능은 서로 다른 제품 집합에서 구현할 수 있으며, 하나의 제품이 모든 기능을 구현해야 한다는 요구 사항은 없다. 이 기준의 목적상 다음 용어를 정의한다:

독립적

각 구현은 서로 다른 주체가 개발해야 하며, 다른 적격 구현에서 사용하는 코드를 공유하거나 재사용하거나 그 코드에서 파생되어서는 안 된다. 이 명세 구현과 관련이 없는 코드 부분은 이 요구 사항에서 제외된다.

상호운용 가능

공식 테스트 스위트의 해당 테스트 사례를 통과하는 것.

구현

다음 조건을 충족하는 사용자 에이전트:

1. 이 명세를 구현한다.
2. 일반 대중이 사용할 수 있다. 구현은 출시된 제품이거나 공개적으로 이용 가능한 다른 버전 (즉, 베타 버전, 미리 보기 릴리스 또는 “나이틀리 빌드”)일 수 있다. 출시되지 않은 제품 릴리스는 안정성을 입증하기 위해 해당 기능을 최소 한 달 동안 구현한 상태여야 한다.
3. 실험용이 아니다 (즉, 테스트 스위트를 통과하도록 특별히 설계되었고 향후 일반적인 사용을 목적으로 하지 않는 버전이 아니다).

이 명세는 최소 28일 동안 후보 권고안으로 유지된다.