CSS 루비 주석 레이아웃 모듈 레벨 1

1. 소개

1.1. 루비란?

이 하위 섹션은 규범적이지 않습니다.

루비는 본문(“베이스”라고 함) 옆에 나타나며 해당 텍스트에 대한 주석 또는 발음 가이드 역할을 하는 텍스트 구간을 일컫는 일반적인 명칭입니다.

다음 그림들은 루비의 두 가지 예시, 즉 단순한 경우와 더 복잡한 구조의 예시를 보여줍니다.

이 예시에서는 하나의 주석이 여러 문자로 이루어진 베이스 텍스트 전체에 적용되어 있습니다.

일본어에서 사용된 루비의 예시(단순한 경우)

일본 타이포그래피에서는 이 경우를 타이고 루비(일본어: 対語ルビ, 즉 단어별 루비) 또는 그룹 루비라고 부르기도 합니다. 주석 전체가 여러 문자로 이루어진 단어(전체)에 연관되어 있기 때문입니다.

두 번째 예시에서는, 두 단계의 주석이 베이스 텍스트에 연결되어 있습니다: 위쪽의 히라가나 문자는 각 베이스 한자 문자들의 발음을 나타내며, 아래쪽의 “Keio”와 “University”는 영어 번역을 제공합니다.

베이스 문자 위와 아래에 주석 텍스트가 들어간 복잡한 루비

히라가나 문자와 해당 한자 베이스 문자 간의 올바른 연관을 반영하기 위해 베이스 수준 텍스트 내의 간격이 조정되는 점에 주목하세요. (위 그림에서 네 번째 한자 주변에, 세 글자로 된 음성 주석이 표시되어 있습니다.) 위 예시에서 베이스 텍스트의 가변 간격을 피하려면, 히라가나 주석을 병합 주석으로 스타일링할 수 있으며, 이 경우 앞서 본 그룹 루비 예시와 유사하게 보일 것입니다. 하지만 베이스-주석 짝짓기가 루비 구조 내에 기록되어 있으므로, 텍스트가 여러 줄로 나뉘어도 주석 문자는 해당 베이스 문자와 올바르게 연결된 채로 유지됩니다.

HTML에서는 루비 구조와 그 마크업에 대해 Ruby Markup Extension 명세에서 설명하며, 본 모듈은 해당 마크업의 루비 레이아웃과 관련된 CSS 렌더링 모델 및 서식 제어에 대해 다룹니다.

루비와 그 서식에 대한 더 깊이 있는 소개는 “What is Ruby” 기사 [QA-RUBY]에서 확인할 수 있습니다. 일본어에서 전통적으로 사용되는 주요 루비 서식 방식에 대한 폭넓은 정보는 JIS X-4051 [JIS4051](일본어) 및 “루비와 강조점”이 포함된 Requirements for Japanese Text Layout [JLREQ](영어/일본어)에서 참고할 수 있습니다. Rules for Simple Placement of Japanese Ruby [SIMPLE-RUBY] 또한 일본어 루비 서식에 대한 한 가지 접근법을 영어로 설명합니다. 중국어 타이포그래피에서의 관련 관행은 “Interlinear annotations” 및 Requirements for Chinese Text Layout [CLREQ](중국어/영어)에서 설명합니다.

1.2. 모듈 간 상호작용

이 모듈은 루비 지원을 위해 CSS Level 2 [CSS2]의 인라인 박스 모델을 확장합니다.

이 모듈의 어떤 속성도 ::first-line 또는 ::first-letter 의사 요소에는 적용되지 않습니다. 단, ruby-position 속성은 ::first-line을 통해 상속되어 첫 번째 줄의 루비 주석에 영향을 줄 수 있습니다.

1.3. 값 정의

이 명세는 CSS 속성 정의 규약과 값 정의 문법을 각각 [CSS2] 및 [CSS-VALUES-3]에서 따릅니다. 이 명세에서 정의되지 않은 값 유형은 CSS Values & Units [CSS-VALUES-3]에 정의되어 있습니다. 다른 CSS 모듈과의 결합으로 이러한 값 유형의 정의가 확장될 수 있습니다.

각 속성 정의에 명시된 속성별 값 외에도, 이 명세에서 정의된 모든 속성은 CSS 전역 키워드를 속성 값으로 허용합니다. 가독성을 위해 본문에서 반복적으로 명시하지는 않았습니다.

1.4. 도식 규약

이 하위 섹션은 규범적이지 않습니다.

동아시아 타이포그래피의 많은 관례는 표시되는 문자가 와이드(중국·일본·한국 문자, CJK)인지 내로우(비 CJK)인지에 따라 달라집니다. 본 문서에는 다음 범례가 사용되는 여러 그림이 있습니다:

텍스트 내 n번째 글자인 와이드셀 글리프(예: 한자). 주석으로 사용할 때는 보통 크기를 50%로 조정합니다.

텍스트 내 n번째 글자인 내로우셀 글리프(예: 로마자).

위 기호들이 도식에서 가지는 방향은 해당 기호가 사용자 에이전트에 의해 렌더링될 때 가지게 될 방향과 일치합니다. 도식 내 문자 간 간격은 특별히 의미를 주기 위해 변경된 경우를 제외하면 우연적입니다.

2. 루비 박스 모델

CSS 루비 모델은 W3C HTML5 루비 마크업 모델과 XHTML 루비 주석 권고안 [RUBY]를 기반으로 합니다. 이 모델에서 루비 구조는 베이스(주석이 달린) 텍스트를 나타내는 하나 이상의 루비 베이스 요소와, 주석을 나타내는 하나 이상의 루비 주석 요소로 구성됩니다. 루비의 구조는 표(table)와 유사합니다: “행”(즉 베이스 텍스트 레벨, 각 주석 레벨), 그리고 “열”(각각의 루비 베이스와 그에 대응하는 루비 주석)이 있습니다.

연속된 베이스와 연속된 주석의 집합은 루비 세그먼트로 그룹화됩니다. 루비 세그먼트 내에서, 루비 주석이 여러 루비 베이스에 걸쳐질 수도 있습니다.

참고: HTML에서는 하나의 <ruby> 요소에 여러 루비 세그먼트가 들어갈 수 있습니다. (XHTML 루비 모델에서는 하나의 <ruby> 요소에 루비 세그먼트가 하나만 포함될 수 있습니다.)

2.1. 루비 전용 display 값

사전 정의된 루비 요소가 없는 문서 언어(XML 응용 등)의 경우, 작성자는 문서 언어 요소를 루비 요소에 매핑해야 합니다. 이 작업은 display 속성으로 수행합니다.

아래의 새로운 display 값들은 임의의 요소에 루비 레이아웃 역할을 지정합니다:

ruby

요소가 루비 컨테이너 박스를 생성함을 지정합니다. (HTML/XHTML <ruby> 요소에 해당.)

ruby-base

요소가 루비 베이스 박스를 생성함을 지정합니다. (HTML/XHTML <rb> 요소에 해당.)

ruby-text

요소가 루비 주석 박스를 생성함을 지정합니다. (HTML/XHTML <rt> 요소에 해당.)

ruby-base-container

요소가 루비 베이스 컨테이너 박스를 생성함을 지정합니다. (XHTML <rbc> 요소에 해당; HTML에서는 익명 박스로 생성됨.)

ruby-text-container

요소가 루비 주석 컨테이너 박스를 생성함을 지정합니다. (HTML/XHTML <rtc> 요소에 해당.)

루비 전용 마크업을 지원하는 언어(HTML 등)를 사용할 경우, 임의 요소(<span> 등)에 루비 display 값을 적용하기 보다는 해당 마크업을 사용하는 것이 좋습니다. 올바른 마크업을 사용하면 스크린 리더나 CSS 이외의 렌더러가 루비 구조를 올바르게 해석할 수 있습니다.

참고: 대체 요소가 display 값으로 ruby-base, ruby-text, ruby-base-container, ruby-text-container를 가지면 인라인 레벨 박스로 처리됩니다. (CSS Display 3 § 2.4 Layout-Internal Display Types: the table-* and ruby-* keywords 참고) 대체 요소가 display 값으로 ruby 또는 inline ruby를 가지면 외부 디스플레이 타입에 따라 동작합니다. (CSS Display 3 § 2.1 Outer Display Roles for Flow Layout: the block, inline, and run-in keywords 참고. § 2.1.2 인라인이 아닌 루비도 참조.)

2.1.1. 루비 포맷팅 컨텍스트

루비 컨테이너는 원자적이지 않은 인라인 레벨 박스입니다. 일반 인라인 박스와 마찬가지로(CSS Inline Layout 3 § 2 인라인 레이아웃 모델 참고), 줄을 넘어 분할될 수 있으며, 이들의 포함 블록은 가장 가까운 블록 컨테이너 상위 요소입니다. 그리고 인라인 박스의 콘텐츠가 해당 인라인 박스를 포함하는 동일한 인라인 포맷팅 컨텍스트에 참여하는 것처럼, 루비 컨테이너와 그 베이스 레벨 콘텐츠도 루비 컨테이너 자체를 포함하는 동일한 인라인 포맷팅 컨텍스트에 참여합니다.

하지만 루비 컨테이너는 또한 루비 포맷팅 컨텍스트를 생성하여, 주석을 배치하기 위해 인라인 포맷팅 컨텍스트의 자신의 구간에 추가 구조를 만듭니다. 참고: 이 포맷팅 컨텍스트는 독립적인 포맷팅 컨텍스트가 아닙니다. 루비 베이스, 루비 주석, 루비 베이스 컨테이너, 루비 주석 컨테이너는 내부 루비 박스입니다: 내부 테이블 요소와 유사하게, 루비 레이아웃에서 특정 역할을 가지며, 자신이 속한 루비 컨테이너의 루비 포맷팅 컨텍스트에 참여합니다. 루비 포맷팅 컨텍스트에서의 역할과 더불어, 루비 베이스는 동시에 루비 컨테이너와 동일한 베이스 레벨 인라인 포맷팅 컨텍스트에 참여하고, 루비 주석은 루비 컨테이너가 설정한 별도의 주석 레벨 인라인 포맷팅 컨텍스트에 참여합니다.

인라인 박스의 콘텐츠와 마찬가지로, 포함 블록은 루비 컨테이너(및 모든 내부 루비 박스)의 콘텐츠에 대해 루비 컨테이너의 포함 블록입니다. 예를 들어, float는 루비 컨테이너의 포함 블록에 의해 제한되며, 어떤 루비 박스 타입에 의해서도 제한되지 않습니다.

2.1.2. 인라인이 아닌 루비

어떤 요소가 내부 display 타입이 ruby이고 외부 display 타입이 inline이 아닌 경우, 두 개의 박스가 생성됩니다: 요구되는 외부 display 타입의 주 박스와, 인라인 레벨 루비 컨테이너입니다. 요소에 지정된 모든 속성은 주 박스에 적용되며 (상속 가능한 경우 루비 컨테이너 박스로 상속됩니다). 이를 통해 요소를 블록처럼 스타일링하면서도, 내부 루비 구조는 올바르게 유지할 수 있습니다.

참고: 요소에 절대 위치 지정이나 float를 적용하면 해당 display 값이 블록 레벨에 해당하는 값으로 계산됩니다. ([CSS-DISPLAY-3] 또는 [CSS2] 9.7절 참고) 내부 루비 display 타입의 경우, 이로 인해 display 값이 block으로 계산됩니다.

2.2. 익명 루비 박스 생성

CSS 모델은 문서 언어에서 이러한 모든 구성 요소에 해당하는 요소를 반드시 포함할 것을 요구하지 않습니다. 누락된 구조 부분은 테이블을 정규화할 때와 유사한 익명 박스 생성 규칙에 따라 암시됩니다. [CSS2]

1. 블록 레벨 박스 인라인화(Inlinify): 루비 컨테이너, 루비 베이스 컨테이너, 루비 주석 컨테이너, 루비 베이스 박스, 루비 주석 박스에 직접 포함된 in-flow 박스는 인라인화(inlinify)되며([CSS-DISPLAY-3] 참고), 이들의 display 값이 그에 맞게 계산되어, 오직 인라인 레벨 콘텐츠만 포함하게 됩니다. 예를 들어, display가 display: block인 in-flow 요소가 display: ruby-text 요소의 자식일 때는 inline-block으로 계산됩니다.
2. 익명 루비 컨테이너 생성: 연속된 잘못 포함된 루비 베이스 컨테이너, 루비 주석 컨테이너, 루비 베이스, 루비 주석 (그리고 그 사이의 공백)은 익명 루비 컨테이너로 감싸집니다. 이 단계에서:
   • 잘못 포함된 루비 베이스는 루비 베이스 컨테이너 또는 루비 컨테이너의 자식이 아닌 경우
   • 잘못 포함된 루비 주석은 루비 주석 컨테이너 또는 루비 컨테이너의 자식이 아닌 경우
   • 잘못 포함된 루비 베이스 컨테이너 또는 루비 주석 컨테이너는 루비 컨테이너의 자식이 아닌 경우
3. 잘못된 부모의 인라인 레벨 콘텐츠 래핑: 루비 컨테이너 또는 루비 베이스 컨테이너의 자식인 연속된 텍스트 및 인라인 레벨 박스는 익명 루비 베이스로 감싸집니다. 마찬가지로, 루비 주석 컨테이너의 자식인 연속된 텍스트 및 인라인 레벨 박스는 익명 루비 주석으로 감싸집니다. (이 목적상, 잘못된 부모를 가진 내부 테이블 요소는 인라인 레벨 콘텐츠로 간주되며, 루비 박스의 자식이기 때문에 궁극적으로 인라인 레벨 테이블 래퍼 박스로 감싸집니다.)

   단, 이렇게 생성된 익명 박스가 공백만 포함할 경우, 이는 루비 내부 공백으로 간주되어, 아래에 설명된 대로 버려지거나 보존됩니다.

4. 선/후행 공백 제거: 부모의 유일한 in-flow 자식이 아니면서, 루비 컨테이너, 루비 주석 컨테이너, 루비 베이스 컨테이너의 첫 번째 또는 마지막 in-flow 자식인 루비 내부 공백은 display: none처럼 제거됩니다.
5. 레벨 간 공백 제거: 인접 in-flow 형제가 아래 패턴에 해당하는 루비 내부 공백은 레벨 간 공백으로 간주되어 display: none처럼 제거됩니다.

   이전 박스	다음 박스
   any	루비 주석 컨테이너
   not 루비 주석	루비 주석

6. 레벨 내 공백 해석: 인접 in-flow 형제가 아래 패턴에 해당하는 루비 내부 공백 박스는 아래 표에 정의된 박스 타입과 서브타입이 할당됩니다:

   이전 박스	다음 박스	박스 타입	서브타입
   루비 베이스	루비 베이스	루비 베이스	베이스 간 공백
   루비 주석	루비 주석	루비 주석	주석 간 공백
   루비 주석 또는 루비 주석 컨테이너	루비 베이스 또는 루비 베이스 컨테이너	루비 베이스	세그먼트 간 공백
   루비 베이스 또는 루비 베이스 컨테이너	루비 베이스 컨테이너
   루비 베이스 컨테이너	루비 베이스 또는 루비 베이스 컨테이너

   위에서 정의된 레벨 내 공백 박스는 짝짓기 및 레이아웃에서 특별하게 취급됩니다. 아래를 참고하세요.
7. 줄바꿈 억제: 루비 주석 내부의 모든 강제 줄바꿈은 (white-space 값과 관계없이) CSS Text Level 3 § 4.1.2에서 정의한 collapsible segment breaks로 변환됩니다.

   이것의 목적은 루비 주석 내의 줄바꿈을 억제하여 레이아웃 모델을 단순화하는 것입니다. 또는, 허용 가능한 동작을 정의할 수도 있습니다.

8. 익명 레벨 컨테이너 생성: 루비 베이스와 베이스 간 공백(단, 세그먼트 간 공백은 제외)의 연속된 시퀀스가 루비 베이스 컨테이너의 자식이 아닌 경우, 익명 루비 베이스 컨테이너로 감싸집니다. 마찬가지로, 루비 주석과 주석 간 공백의 연속된 시퀀스가 루비 주석 컨테이너의 자식이 아닌 경우, 익명 루비 주석 컨테이너로 감싸집니다.

모든 루비 레이아웃 구조가 올바르게 부모에 포함되면, UA는 베이스와 주석을 연관 짓기 시작할 수 있습니다.

참고: UA는 이러한 익명 박스(또는 레벨 내 공백의 익명 빈 박스, § 2.3 주석 짝짓기 참고)를 내부 구조상 반드시 생성할 필요는 없으며, 짝짓기 및 레이아웃이 마치 존재하는 것처럼 동작하면 충분합니다.

<ruby>×<rbc>×<rb></rb>⬕<rb></rb>×</rbc>☒<rtc>×<rt></rt>⬔<rt></rt>×</rtc>◼<rbc>×<rb></rb>…</rtc>×</ruby>

2.3. 주석 짝짓기

주석 짝짓기는 루비 주석과 루비 베이스를 연결하는 과정입니다. 각 루비 주석은 하나 이상의 루비 베이스와 연결되며, 해당 베이스를 span한다고 표현합니다. (여러 베이스에 걸쳐 span되는 루비 주석은 스패닝 주석이라 부릅니다.)

루비 베이스는 주석 레벨마다 하나의 루비 주석만 연결될 수 있습니다. 그러나 주석 레벨이 여러 개라면, 여러 루비 주석과 연결될 수 있습니다.

짝짓기가 완료되면, 루비 열이 정의되며, 각 열은 하나의 루비 베이스와 각 인라인 주석 레벨마다 하나의 루비 주석 (비어 있거나 익명일 수도 있음)으로 구성됩니다. 이들은 모두 같은 루비 세그먼트에 속합니다.

2.3.1. 세그먼트 짝짓기와 주석 레벨

루비 구조는 루비 세그먼트로 나뉘며, 각 세그먼트는 하나의 루비 베이스 컨테이너와 그 뒤를 잇는 하나 이상의 루비 주석 컨테이너로 구성됩니다. 루비 주석 컨테이너마다 루비 세그먼트 내에서 베이스 텍스트에 대한 각각의 주석 레벨을 나타냅니다: 첫 번째 컨테이너는 첫 번째 주석 레벨, 두 번째 컨테이너는 두 번째 주석 레벨, 이런 식으로 계속됩니다. 루비 베이스 컨테이너는 베이스 레벨입니다. 각 세그먼트의 루비 베이스 컨테이너는 해당 세그먼트 내 모든 루비 주석 컨테이너와 짝지어집니다.

퇴행적(degenerate) 케이스를 처리하기 위해, 일부 빈 익명 컨테이너가 존재하는 것으로 간주합니다:

• 루비 컨테이너의 첫 번째 자식이 루비 주석 컨테이너인 경우, 그 앞에 익명 빈 루비 베이스 컨테이너가 있는 것으로 간주합니다.
• 마찬가지로, 루비 컨테이너가 연속된 루비 베이스 컨테이너를 포함하면, 그 사이에 익명 빈 루비 주석 컨테이너가 존재하는 것으로 간주합니다.

세그먼트 간 공백은 사실상 독립적인 루비 세그먼트로 취급됩니다.

2.3.2. 단위 짝짓기와 스패닝 주석

루비 세그먼트 내에서, 루비 베이스 컨테이너의 각 루비 베이스는 해당 세그먼트 내 각 루비 주석 컨테이너에서 하나의 루비 주석과 짝지어집니다.

만약 루비 주석 컨테이너에 익명 루비 주석이 하나만 있다면, 그 루비 주석은 해당 루비 세그먼트 내의 모든 루비 베이스와 짝지어집니다(즉, span으로 걸침).

그 외의 경우, 각 루비 주석은 문서 순서대로 해당 세그먼트 내의 루비 베이스와 짝지어집니다. 루비 주석 컨테이너 내에 루비 주석이 부족하면, 남은 루비 베이스는 주석 컨테이너의 마지막에 익명 빈 주석과 짝지어집니다. 루비 베이스가 부족하면, 남은 루비 주석은 베이스 컨테이너의 마지막에 삽입된 익명 빈 베이스와 짝지어집니다.

명시적 스패닝을 지원하는 루비 마크업(예: XHTML Complex Ruby Annotations)을 구현하는 경우, 짝짓기 규칙을 조정하여 스패닝 주석이 적절한 베이스와 짝지어지도록 해야 합니다.

레벨 내 공백은 표준 주석 짝짓기에 참여하지 않습니다. 그러나, 인접한 루비 베이스 또는 루비 주석이 짝지어져 있다면

• 두 루비 베이스 또는 루비 주석이 다른 레벨의 해당 레벨 내 공백을 사이에 두고 있으면, 해당 레벨 내 공백 박스들도 짝지어집니다.
• 단일 스패닝 루비 주석과 짝지어진 경우, 레벨 내 공백도 해당 루비 주석과 짝지어집니다.
• 두 루비 베이스 또는 루비 주석 사이에 레벨 내 공백이 없으면, 레벨 내 공백 박스는 그 사이에 존재하는 것으로 간주되는 익명 빈 레벨 내 공백 박스와 짝지어집니다.

|[  s p a n n i n g   a n n o t a t i o n ]|
|[ a1 ]|[ws]|[ a2 ]|[  ]|[ a3 ]|[ws]|[ a4 ]|
|[ b1 ]|[ws]|[ b2 ]|[ws]|[ b3 ]|[  ]|[ b4 ]|

2.4. 주석 숨기기: visibility: collapse 및 자동 숨김 루비

루비 주석의 visibility가 collapse인 경우, 해당 주석은 숨김 주석이 됩니다. 또한, 루비 주석이 자신의 베이스와 정확히 동일한 텍스트 내용을 가지고 있다면, UA에 의해 자동으로 숨김(자동 숨김) 처리됩니다.

주석 숨기기는 루비 주석의 짝짓기에는 영향을 주지 않습니다. 하지만 숨김 주석은 화면에 표시되지 않으며, 해당 레벨 내에서 인접한 루비 주석 박스 시퀀스를 분리하는 효과를 제외하면 레이아웃에 영향을 주지 않습니다. 마치 별도의 세그먼트에 속하는 것처럼, 그리고 숨김 주석의 베이스가 루비 베이스가 아니라 중간 인라인인 것처럼 동작합니다.

자동 숨김 기능은 한자와 히라가나가 혼합된 일본어 단어의 주석을 올바르게 인라인 표시할 수 있게 해줍니다. 예를 들어, 振り仮名라는 단어는 다음과 같이 인라인 표시되어야 합니다:

振り仮名(ふりがな)

따라서, 다음과 같이 마크업해야 합니다:

<ruby>
  <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
  <rp>(</rp><rt>ふ</rt><rt>り</rt><rt>が</rt><rt>な</rt><rp>)</rp>
</ruby>

하지만 실제로 루비로 표시할 때는 "り" 주석이 숨겨져야 합니다.

振り仮名에 대한 히라가나 루비. 이미 히라가나인 "り" 위에는 루비 주석이 표시되지 않습니다.

이 예시의 일본어 단어는 세 개의 한자로 구성되어 있으며, 그 중 하나는 초등학교 1학년 수준이고, 나머지 두 개는 더 난이도가 높습니다. (기본-짝짓기 대응을 색상으로 구분.)

<ruby><rb>昆<rb>虫<rb>記<rt>こん</rt class=easy>ちゅう<rt>き</ruby>

모든 한자의 발음이 필요한 독자가 있는 반면, 다른 사용자에게는 쉬운 글자의 주석은 숨기는 것이 더 적절할 수 있습니다. visibility: collapse를 적용하면 해당 주석을 숨길 수 있습니다:

숨김 동작은 visibility: collapse가 visibility: hidden과 다릅니다. hidden은 보이지만 공간은 그대로 차지합니다:

또한 display: none과도 다릅니다. visibility: collapse는 짝짓기 관계를 유지하지만, display: none은 박스를 트리에서 완전히 제거하여 이후 주석의 짝짓기에 혼란을 일으킵니다:

computed value가 ruby-merge이고, 주석 컨테이너에서 merge인 경우, 숨김이 비활성화됩니다. 값이 auto라면, UA가 해당 주석의 숨김 활성 여부를 결정할 수 있으나, 레이아웃 알고리즘 결과가 separate에 가까우면 숨김을 활성화하는 것이 권장됩니다.

자동 숨김을 위한 내용 비교는 white space collapsing(white-space) 및 텍스트 변환(text-transform) 전에 수행되며, 요소를 무시하고(박스의 textContent만 고려) 비교합니다.

참고: CSS Ruby의 향후 레벨에서는 자동 숨김 제어 기능이 추가될 수 있지만, 이 레벨에서는 항상 강제 적용됩니다.

2.5. 공백 축소

§ 2.2 익명 루비 박스 생성에서 논의한 대로, 루비 구조 내의 공백은 제거됩니다:

• 루비 컨테이너, 주석 컨테이너, 베이스 컨테이너의 처음과 끝 위치
• 베이스 컨테이너와 그 뒤의 주석 컨테이너 사이
• 주석 컨테이너들 사이

<ruby>
  <rb>東</rb><rb>京</rb>
  <rt>とう</rt><rt>きょう</rt>
  <rtc><rt>Tō</rt><rt>kyō</rt></rtc>
</ruby>

루비 세그먼트 사이, 루비 베이스 사이, 루비 주석 사이의 공백은 제거되지 않고, 베이스 간, 주석 간, 또는 세그먼트 간 공백으로서 렌더링에 유지됩니다. (레벨 내 공백 해석 참고.)

<ruby>
  <rb>W</rb><rb>W</rb><rb>W</rb>
  <rt>World</rt> <rt>Wide</rt> <rt>Web</rt>
</ruby>

<ruby>
  <rb>Aerith</rb><rb> </rb><rb>Gainsborough</rb>
  <rt>エアリス</rt><rt>・</rt><rt>ゲインズブール</rt>
</ruby>

제거되지 않은 공백이 축소 가능(collapsible)한 경우, 각 라인 박스 내 인접 박스 간에 일반 공백 처리 규칙 [CSS-TEXT-3]에 따라 축소됩니다. 서로 다른 루비 세그먼트에 있거나, 숨김 주석으로 나뉜 주석은 인접하지 않은 것으로 간주합니다. 그러나 모든 베이스 레벨 콘텐츠(여기에는 문자 간 주석도 포함되며, 이는 원자적 인라인으로 처리됩니다)는 인접한 것으로 취급합니다. 축소 가능한 공백이 루비 세그먼트 사이에 있을 때(세그먼트 간 공백), 세그먼트 브레이크 변환을 위한 컨텍스트 텍스트는 양쪽의 루비 베이스에 의해 결정되며, 반드시 소스 문서 내 공백 양옆의 텍스트(여기에는 인라인 주석이 포함될 수도 있음)가 아닙니다.

<ruby>
  屋<rt>おく</rt>内<rt>ない</rt>
  禁<rt>きん</rt>煙<rt>えん</rt>
</ruby>

<ruby>
  屋<rt>おく</rt>  内<rt>ない</rt>
  禁<rt>きん</rt>  煙<rt>えん</rt>
</ruby>

3. 루비 레이아웃

루비 구조가 레이아웃될 때, 베이스 레벨은 처음에 해당 루비 베이스가 일반 인라인 박스의 시퀀스이고 루비 컨테이너가 그 위에 감싸진 인라인 박스인 것처럼 줄 위에 레이아웃됩니다.

루비 컨테이너에 문자 간 주석이 포함된 경우, § 3.2 문자 간 루비 레이아웃에 따라 베이스 레벨에 배치됩니다. 그 후, 베이스 컨테이너의 크기가 결정되고, 인라인(줄간) 주석이 § 3.1 인라인(줄간) 루비 레이아웃에 따라 배치됩니다.

다른 CSS 레이아웃 모델과 마찬가지로, 상대 위치 지정, 변환, 기타 그래픽 효과는 이 박스 레이아웃 이후 적용됩니다.

3.1. 인라인(줄간) 루비 레이아웃

인라인(줄간) 루비 주석은 해당 레벨에서 처음에는 인라인 박스처럼 배치되고, 같은 인라인 포맷팅 컨텍스트에 참여합니다. 결과적으로 해당 라인 박스가 주석 레벨마다 루비 컨테이너 내에 형성됩니다. 주석과 베이스는 아래에 설명된 방식으로 간격을 조정하여 서로 정렬됩니다.

3.1.1. 인라인 축 인라인(줄간) 레이아웃

인라인 축에서는 인라인(줄간) 루비 주석이, 루비 베이스 박스에 대해, 해당 주석 컨테이너의 ruby-merge 값에 따라 정렬됩니다.

ruby-merge가 separate인 경우, 각 루비 열의 크기는 해당 열 내에서 가장 넓은(루비 베이스 또는 루비 주석) 콘텐츠에 맞춰집니다. 스패닝 주석(실제로 span하거나 ruby-merge: merge로 span하는 척 하는 경우), 주석 내용이 span된 열보다 넓으면, 그 차이는 span된 열에 균등하게 분배됩니다. 루비 세그먼트에 여러 스패닝 주석이 있으면, 이 추가 공간 분배는 span 범위가 가장 적은 것부터 시작하여 순차적으로 진행합니다. 각 루비 베이스와 루비 주석은 정확히 자신의 열을 span하도록 크기가 맞춰집니다.

참고: 여러 레벨의 주석이 같은 수의 베이스를 span하는데, 그 범위가 겹치지만 일치하지 않는 경우, 공간 분배는 정의되지 않습니다. 이는 HTML 마크업에서는 불가능하지만, [RUBY]처럼 명시적 span을 지원하는 마크업에서는 가능할 수 있습니다.

어떤 루비 주석이라도 주석 컨테이너에서 ruby-merge: auto이고 자신의 베이스보다 넓으면, 해당 루비 주석은 주석 컨테이너의 열을 넘어 확장될 수 있습니다. 이렇게 확장될 경우, 해당 루비 세그먼트가 모든 콘텐츠를 포함할 만큼 충분히 넓게 만들어지면 열의 크기에 미치는 영향은 UA에 맡깁니다.

문자 간 주석은 열 사이에 끼워집니다: 양쪽 열을 모두 span하는 주석의 치수 계산에는 포함되지만, 어느 열에도 포함되지 않고, 인라인(줄간) 주석의 크기나 위치 결정에도 영향을 받지 않습니다.

각 베이스 및 주석 박스 내부에서, 콘텐츠가 박스 크기보다 좁을 때의 여분 공간 배분 방식은 해당 ruby-align 속성에 의해 지정됩니다.

3.1.2. 블록 축 인라인(줄간) 레이아웃

vertical-align이 이러한 루비 박스에 얼마나 영향을 미치는지 정의해야 합니다. 이슈 4987 참고.

각 베이스 컨테이너는 자신의 모든 루비 베이스의 마진 박스—그리고 연관된 모든 문자 간 루비 주석 마진 박스(해당되는 경우)—뿐만 아니라, 이 루비 컨테이너에 함께 참여하는 모든 하위 베이스 및 주석 컨테이너를 정확히 포함하도록 크기가 정해지고 위치가 결정됩니다. (만약 베이스 컨테이너에 in-flow 콘텐츠가 없다면, 빈 루비 베이스 하나를 포함하는 것처럼 크기와 위치가 결정됩니다.)

각 인라인(줄간) 주석 컨테이너는 자신의 모든 루비 주석의 마진 박스와, 이 루비 컨테이너에 함께 참여하는 모든 하위 베이스 및 주석 컨테이너를 정확히 포함하도록 크기와 위치가 정해집니다. (만약 주석 컨테이너에 in-flow 콘텐츠가 없다면, 빈 루비 주석 하나를 포함하는 것처럼 크기와 위치가 결정됩니다.) 이렇게 정해진 주석 컨테이너들은 해당 베이스 컨테이너의 위나 아래( ruby-position 값에 따라)에 중첩되어 쌓이며, 그 사이에는 공간을 두지 않습니다. 이렇게 해서 루비 주석이 루비 베이스와 블록 축에서 어떻게 위치하는지 결정됩니다.

블록 축 마진은 합쳐져야 할까요? 이렇게 하면 레이아웃이 더 견고해지지만, 인라인 축에서 인라인과는 다르게 동작한다는 점과 일관되지 않을 수 있습니다.

3.2. 문자 간 루비 레이아웃

문자 간 주석은 특별한 레이아웃을 가집니다. 문자 간 루비 주석 박스는 베이스 레벨의 레이아웃 일부로 삽입되고 측정됩니다. 각 루비 주석은 짝지어진 루비 베이스의 오른쪽에 삽입되며, 스패닝 문자 간 주석은 자신이 span하는 가장 오른쪽 베이스 뒤에 배치됩니다. 문자 간 루비 주석은 아래에 설명된 부분을 제외하고는 정확히 인라인 블록처럼 레이아웃됩니다.

참고: inter-character 정의에 따라, 문자 간 주석은 항상 vertical-rl writing-mode를 가지며, 수평 루비 컨테이너에서만 존재합니다.

각 루비 주석은 해당 루비 베이스의 바로 오른쪽, 그리고 베이스 간 공백 또는 세그먼트 간 공백 앞에 배치됩니다. 동일한 루비 베이스에 여러 개의 문자 간 루비 주석 박스가 붙는 경우, 그들의 마진 박스는 공간 없이 오른쪽으로 순서대로(레벨 순서대로) 쌓입니다.

만약 자동 높이가 루비 주석 박스의 content area가, 해당 위치에 배치되는 content box를 가진 루비 베이스보다 낮다면, 그 content box의 높이가 정확히 맞춰서 늘어납니다.

루비 주석 박스의 정렬은 해당 루비 주석의 ruby-align 속성에 따라 달라집니다:

• ruby-align 값이 start인 경우, 루비 주석의 content box의 윗변이 해당 루비 베이스의 content box의 윗변과 맞춰집니다.
• 그 외의 경우, 루비 주석의 content box의 중앙이 해당 루비 베이스의 content box 중앙과 수직 정렬됩니다.

문자 간 루비 주석 컨테이너 박스는 해당 루비 베이스 컨테이너 박스의 content box와 정확히 일치하도록 크기가 맞춰지고 위치가 결정됩니다.

참고: 문자 간 루비 주석 컨테이너 박스의 크기와 위치는 레이아웃에 아무런 영향을 주지 않습니다. 위 정의는 단지 프로그래밍적으로 질의할 때 결정적인 결과를 내도록 하기 위함입니다.

정렬 및 열 크기 산정을 위해(§ 3 루비 레이아웃 참고), 문자 간 루비 주석은 자신이 붙는 베이스와 같은 열에 속하지 않으며, 실질적으로 자신만의 열을 형성합니다.

3.3. 루비 박스 스타일링

루비 베이스와 루비 컨테이너는 인라인 박스로 취급되며, (별도 명시가 없다면) 인라인 박스에 적용되는 모든 속성은 동일하게 이들에게도 적용됩니다. 단, line-relative shift 값 (vertical-align의 top, bottom)은 무시해야 하며(0으로 처리), 적용되지 않습니다.

별도 명시가 없다면 인라인 박스에 적용되는 모든 속성은 루비 주석에도 동일하게 적용됩니다. 단, line-height는 적용되지 않습니다. 그리고 line-relative shift 값(vertical-align의 top, bottom)도 무시(0 처리)해야 합니다.

margin, padding, border 속성이나, 인라인 박스에 적용되지 않는 속성들은 베이스 컨테이너나 주석 컨테이너에 적용되지 않습니다. 또한 line-height도 주석 컨테이너에는 적용되지 않습니다.

UA는 루비 베이스 컨테이너 박스와 루비 주석 컨테이너 박스에 대해 배경(background) 또는 outline 속성, 혹은 박스의 경계선을 시각화하는 어떤 속성도 지원할 필요가 없습니다. UA는 이 박스들을 단순히 상속 및 내부 레이아웃 제어를 위한 추상체로만 구현할 수도 있습니다.

3.4. 줄바꿈

전체 루비 컨테이너가 한 줄에 들어갈 공간이 부족할 때, 루비는 모든 레벨이 동시에 줄바꿈을 허용하는 위치에서 나눌 수 있습니다. (줄바꿈에 대한 상세 내용은 CSS Text 3 § 5 줄바꿈 및 단어 경계 참고.) 루비는 주로 베이스-주석 세트 사이에서 나뉘지만, 줄바꿈 규칙이 허용하는 경우 루비 베이스 내부(및 그와 평행한 루비 주석 박스 내부)에서도 나눌 수 있습니다.

루비가 여러 줄에 나뉘어 표시될 경우, 루비 주석은 반드시 자신이 속한 루비 베이스와 함께 있어야 합니다. 루비 베이스와 그 주석 사이에서는, 줄바꿈이 허용되지 않습니다. 문자 간 주석의 경우도 마찬가지입니다.

문자 간 루비 줄바꿈 기회

줄바꿈 이후에는, 각 조각이 독립적으로 레이아웃되고, 루비 정렬도 각 조각에서 별도로 적용됩니다.

3.4.1. 베이스 사이 줄바꿈

일반적으로 루비 베이스 박스와 루비 주석 박스는 내부 줄바꿈을 금지하는 스타일이 적용되어 있으며, 강제 줄바꿈이 포함되어 있지 않습니다. (자세한 내용은 부록 A 참고.) 이런 경우 루비 컨테이너는 인접한 루비 베이스 사이에서만 줄을 나눌 수 있고, 두 루비 베이스를 span하는 루비 주석이 없는 경우에만 가능합니다.

루비 줄바꿈 기회

두 인접한 루비 베이스 사이에서 루비가 줄을 나눌 수 있는지는, 해당 베이스 텍스트에 대한 일반 줄바꿈 규칙에 의해 결정되며, 이는 루비 베이스가 인접한 인라인 박스인 것처럼 처리됩니다. (줄바꿈 기회 판단 시, 주석은 무시되고 베이스 레벨만 고려됩니다.)

<ruby>蝴<rt>hú</rt>蝶<rt>dié</rt>

베이스 간 공백은 루비 베이스 사이의 줄바꿈 기회를 평가할 때 중요합니다. 인라인 사이의 공백과 마찬가지로, 해당 위치에서 줄이 나뉘면 공백은 CSS Text 3 § 4.1 공백 처리 규칙에 따라 축소됩니다. 마찬가지로, 줄바꿈 시 주석 공백도 잘립니다.

<ruby><rb>one</rb> <rb>two</rb> <rt>1</rt> <rt>2</rt></ruby>

3.4.2. 베이스 내 줄바꿈

더 긴 베이스 텍스트의 경우, 베이스-주석 쌍 내부에서 줄바꿈을 허용하는 것이 적절할 때도 있습니다. 예를 들어, 영어 문장에 일본어 번역이 주석으로 달린 경우, 텍스트 래핑을 허용하면 문단 내에서 합리적으로 줄을 나눌 수 있습니다.

사람들이 이게 미친 스펙 저자의 헛소리가 아님을 알 수 있도록 스캔된 예시를 삽입할 것.

루비 베이스 내부에서의 줄바꿈은, 해당 루비 베이스와 그와 평행한 모든 주석의 white-space 속성이 허용하는 경우에만 가능하며, 각 베이스/주석 박스 내용 내부(시작 또는 끝이 아님)에 소프트 랩 기회가 있는 경우에만 가능합니다. 루비 베이스와 주석의 내용 조각 사이에는 구조적 일치가 없으므로, UA는 임의의 기회에서 끊을 수 있습니다. 하지만 각 조각 내의 콘텐츠 양이 비슷하도록 비율 맞추기를 UA가 시도하는 것이 권장됩니다.

문자 간 주석 내부에는 줄바꿈 기회가 없습니다.

3.5. 양방향(Bidi) 재정렬

유니코드 양방향 알고리즘은 서로 반대 방향성을 가진 스크립트의 문자가 한 문단에 혼합될 때, 시각적 프레젠테이션을 위해 논리적으로 저장된 텍스트의 순서를 재배열합니다.

루비 주석과 해당 루비 베이스의 일치 관계를 보존하기 위해, 몇 가지 제한이 필요합니다:

• 루비 베이스 또는 루비 주석의 내용은 반드시 연속되어야 합니다.
• 루비 주석은 해당 루비 베이스와 함께 재정렬되어야 합니다.
• 하나의 루비 주석이 span하는 모든 루비 베이스는 반드시 연속되어야 합니다.

이를 위해,

• 모든 내부 루비 박스 및 루비 컨테이너에는 bidi isolation이 강제 적용됩니다: normal 및 embed 값을 가지는 unicode-bidi는 isolate로 계산되고, bidi-override는 isolate-override로 계산됩니다.

  참고: 즉, 암시적(implicit) bidi 재정렬은 루비 베이스 간에는 동작하지 않으므로, 작성자는 루비 컨테이너의 선언된 방향성이 실제 콘텐츠와 일치하는지 반드시 확인해야 합니다.

• 레이아웃 중에는, 루비 세그먼트가 루비 컨테이너 내에서 해당 direction 속성에 따라 정렬됩니다.
• 세그먼트 내에서, 루비 베이스와 루비 주석은(병합 주석이 아닌 경우) 각각의 컨테이너에서 세그먼트의 direction 속성에 따라 정렬됩니다. 병합 주석은 해당 주석 컨테이너의 direction 속성에 따라 정렬되며, 마치 해당 컨테이너 내 인라인 박스 시퀀스처럼 취급됩니다.

  참고: 즉, direction 속성은 비-병합 주석 레이아웃에는 무시됩니다. 그러나 이 값은 컨테이너의 자식에게 상속되며, 그 결과 인라인 기본 방향에 영향을 줄 수 있습니다.

다른 인라인 레벨 콘텐츠와 마찬가지로, 내부 루비 박스의 bidi 재정렬은 줄바꿈 이후에 발생하여, 콘텐츠가 논리 순서에 따라 여러 줄로 나뉘게 됩니다.

참고: 만약 ruby-merge가 특정 merge인 주석 컨테이너에 적용된 경우, 개별 주석에 bidi isolation을 강제하지 않아 함께 처리할 수 있게 하면 유용할 수 있습니다. 하지만 이는 구현 복잡성을 높이므로, 수요가 없으면 굳이 권장하지 않습니다. 이런 처리가 필요한 경우 CSS 워킹 그룹에 연락 바랍니다.

CSS에서 양방향 텍스트에 대한 더 자세한 논의는 [CSS3-WRITING-MODES]를 참고하세요.

3.6. 줄 간격

line-height 속성은 CSS에서 줄 간의 간격을 제어합니다. 한 줄의 인라인 콘텐츠가 line-height보다 짧을 때, 콘텐츠 양쪽에 half-leading이 추가됩니다. 자세한 내용은 CSS Inline Layout 3 § 5 논리 높이 및 줄 간격을 참고하세요.

줄 간격의 일관성을 보장하기 위해, 루비가 포함된 문서는 보통 line-height가 텍스트 줄 사이에 루비가 들어갈 수 있을 정도로 충분히 크도록 설정합니다. 따라서 일반적으로 루비 주석 컨테이너와 루비 주석 박스는 줄의 인라인 콘텐츠의 측정된 높이에 영향을 주지 않습니다. 모든 정렬(관련 내용은 vertical-align 참고)과 line-height 계산은 루비 베이스 컨테이너만을 사용해, 일반 인라인처럼 처리합니다.

하지만 line-height가 루비 컨테이너에 지정된 값이 최상단 루비 주석 컨테이너의 위쪽과 최하단 루비 주석 컨테이너의 아래쪽 사이 거리보다 작은 경우, 루비 베이스 컨테이너의 적절한 쪽에 추가 leading이 삽입되어, 만약 블록이 동일한 루비를 가진 3개의 줄로 구성된다면 루비 컨테이너들이 겹치지 않도록 합니다.

참고: 이것은 루비 주석이 반드시 라인 박스 내에 남는다는 것을 보장하지 않습니다. 단지 모든 줄의 간격이 같고 루비 주석의 수와 위치가 동일하다면 겹치지 않을 공간이 확보된다는 것만 보장합니다.

작성자는 루비가 들어갈 수 있도록 적절한 line-height와 padding을 설정해야 하며, 블록의 시작과 끝, 그리고 한 줄에 인라인 레벨 콘텐츠(이미지, 인라인 블록, vertical-align으로 이동된 요소 등) 단락 기본 글꼴 크기보다 큰 요소가 포함될 때 특히 주의해야 합니다.

루비 주석은 종종 라인을 넘칠 수 있습니다. 작성자는 루비가 달린 줄의 위/아래에 충분한 공간이 있도록 콘텐츠 배치를 고려해야 합니다.

참고: 루비가 정렬 및 줄 레이아웃에 미치는 영향에 대한 더 많은 제어는 CSS Line Layout Module Level 3에 포함될 예정입니다. 현재는 탐색적 개발 단계이므로, 신규 기능에 대한 설명은 아직 신뢰하면 안 됩니다.

4. 루비 서식 속성

다음 속성들은 루비의 위치 지정, 텍스트 분배, 정렬을 제어하기 위해 도입되었습니다.

4.1. 루비 위치 지정: ruby-position 속성

이 속성은 루비 주석이 베이스에 대해 어디에 위치할지 제어합니다. 값의 의미는 다음과 같습니다:

alternate

서로 다른 주석 레벨이 over와 under를 번갈아가며 사용합니다.

만약 주석 컨테이너가 첫 번째 주석 레벨이거나, 앞선 레벨이 모두 inter-character일 때, alternate는 단독 또는 over와 함께 쓰일 때 over와 동일하게 동작합니다. alternate가 under와 함께 쓰일 때는 under와 동일하게 동작합니다.

그 외에는, 앞선 인라인(줄간) 주석 레벨이 over였다면, alternate는 under처럼 동작하고, 그 반대도 마찬가지입니다. (이 경우에는 alternate가 단독이든, over나 under와 함께 쓰이든 차이가 없습니다.)

over

루비 주석이 베이스의 위(라인 오버)에 표시됩니다.

가로 레이아웃에서 일본어 베이스 텍스트 위의 루비

세로 레이아웃에서 일본어 베이스 텍스트 오른쪽의 루비

under

루비 주석이 베이스의 아래(라인 언더)에 위치합니다. 이 설정은 동아시아 한자 문화권에서 상대적으로 드물게 사용되며, 주로 교육용 텍스트에서 볼 수 있습니다.

가로 레이아웃에서 일본어 베이스 텍스트 아래의 루비

세로 레이아웃에서 일본어 베이스 텍스트 왼쪽의 루비

inter-character

포함하는 writing mode가 루비 컨테이너에서 vertical인 경우, 이 값은 over와 동일하게 동작합니다.

그렇지 않으면, 루비 주석이 문자 간 주석이 됩니다. 주석은 가로 텍스트에서 베이스의 오른쪽에 표시됩니다. 이때 해당 writing-mode의 계산값은 vertical-rl로 강제됩니다.

참고: writing-mode의 계산값은 루비 주석 컨테이너 자체에는 영향이 없습니다. 동일 요소의 writing-mode, display, ruby-position 간의 순환 의존을 방지하기 위함입니다.

이 값은 특히 대만 등에서 사용되는 전통 중국어에서 특수하게 사용됩니다: 그 문맥에서 루비(주로 보포모포 문자가 사용됨)는 베이스 문자가 가로로 배치되어 있어도 베이스의 오른쪽에 수직으로 나타납니다:

전통 중국어의 “보포모포” 루비(더 잘 보이도록 파란색 표시) 가로 레이아웃

참고: 상속은 루비 레이아웃을 위해 생성된 익명 박스를 고려하지 않고 요소 트리 상에서만 동작하므로, 문자 간 주석을 사용할 때, 작성자는 요소 기반 루비 주석 컨테이너, 익명 루비 주석과 추가 하위 요소가 결합된 마크업 패턴을 피해야 합니다. 해당 하위 요소는 루비 주석 컨테이너에서 writing-mode를 상속받으며, 실제로 루비 주석의 writing-mode가 vertical-rl로 바뀌어도 하위 요소에는 영향을 주지 않습니다.

ruby { ruby-position: inter-character; }

<ruby>base<rtc><em>problematic</em> annotation</ruby>

위 마크업에서는 <rtc> 요소의 자식으로 익명 루비 주석 박스가 생성되어 전체 "problematic annotation"을 감쌉니다. 이 박스는 주석 컨테이너의 자식이므로 ruby-position이 inter-character일 때 writing-mode가 vertical-rl이 되는 것이 기대됩니다. 하지만 <em> 요소는 <rtc> 요소(즉, writing-mode가 강제되지 않은 곳)에서 writing-mode를 상속받습니다.

이 예시에서는 명시적 루비 주석 컨테이너 요소가 필요 없으므로, 루비 주석 요소를 사용하는 것이 문제를 피하는 방법입니다:

<ruby>base<rt><em>problematic</em> annotation</ruby>

명시적 루비 주석 컨테이너 요소가 필요하다면, 루비 주석 요소도 함께 사용하면 문제를 해결할 수 있습니다:

<ruby>base<rtc><rt><em>problematic</em> annotation</ruby>

주석 컨테이너 중 문자 간 주석이 아닌 것은 인라인(줄간) 주석이라고 합니다.

여러 루비 주석 컨테이너에 같은 ruby-position이 지정된 경우, 베이스 텍스트에서 바깥쪽 방향으로 쌓입니다.

4.2. 주석 공간 공유: ruby-merge 속성

이 속성은 하나의 루비 컨테이너 박스에 여러 개의 루비 주석 박스가 있을 때 각각을 분리해서 표시할지, 병합 주석으로 묶어 그룹으로 표시할지, 혹은 공간에 따라 자동으로 결정할지 제어합니다.

참고: 문자 간 주석은 항상 분리되며, 이 속성은 적용되지 않습니다.

가능한 값:

separate

각 루비 주석 박스는 자신의 열 내(즉, 양옆의 인접 베이스와 겹치지 않게) 표시됩니다. 이 스타일은 [JLREQ]에서 “모노 루비”라고 부릅니다.

예를 들어, 아래 두 줄은 동일하게 렌더링됩니다:

<p><ruby>無<rt>む</ruby><ruby>常</rt>じょう</ruby>
<p><ruby style="ruby-merge:separate"><rb>無<rb>常</rt>む</rt>じょう</ruby>

merge

동일 루비 세그먼트 내의 모든 루비 주석 박스를 인라인 박스로 연결하여, 하나의 익명 루비 주석 박스로 합쳐 해당 루비 베이스 박스 전체를 span합니다. 한 줄에 레이아웃될 때, 이 스타일은 [JLREQ]의 “그룹 루비”와 유사하게 렌더링됩니다. 그러나 줄이 나뉠 때는 루비 주석이 해당 루비 베이스와 함께 유지됩니다.

아래 두 줄은, 두 글자가 한 줄에 들어가면 동일하게 렌더링됩니다:

<p><ruby>無常</rt>むじょう</ruby>
<p><ruby style="ruby-merge:merge"><rb>無<rb>常</rt>む</rt>じょう</ruby>

하지만 두 베이스가 줄을 나눠 갖게 되면 두 번째 예시는 ruby-position: separate과 동일하게 렌더링됩니다.

auto

UA는 각 루비 주석 박스를 어떤 베이스 박스에 어떻게 렌더링할지 임의의 알고리즘을 사용할 수 있습니다. 모든 주석이 각 베이스 안에 들어가면 separate처럼, 일부 주석이 베이스보다 넓으면 베이스 간 공백을 만들지 않고 공간을 공유하는 방식으로 처리합니다.

참고: 이 동작은 복합어(숙어) 루비를 위한 것입니다. 자세한 렌더링 관례는 “What is ruby?”의 Jukugo Ruby [QA-RUBY], Placement of Jukugo-ruby [SIMPLE-RUBY], JLREQ의 Positioning of Jukugo-ruby, 4.12.3(c) 熟語ルビの処理 [JISX4051] 등을 참고하세요.

가장 단순한 방식은, 모든 루비 주석 박스가 해당 베이스 안에 들어가면 separate로, 그렇지 않으면 merge로 처리하는 것입니다.

참고: 텍스트는 루비 주석이나 베이스에 걸쳐(병합된 경우도 포함) 형태 변화나 합자(ligature)가 일어나지 않습니다. 이는 bidi isolation 때문입니다. § 3.5 양방향(Bidi) 재정렬 및 CSS Text 3 § 7.3 Element Boundaries에서의 형태 변화를 참고하세요.

4.3. 루비 텍스트 분배: ruby-align 속성

이 속성은 루비 박스의 내용이 해당 박스를 정확히 채우지 않을 때, 텍스트가 박스 내에서 어떻게 분배되는지를 지정합니다. ruby-align에 의해 분배되는 공간은 정렬(justification)에 의해 분배되는 공간과 무관하며, 독립적으로 동작합니다.

문자 간 주석의 경우, 이 속성은 박스 자체의 정렬에도 영향을 줄 수 있습니다 (§ 3.2 문자 간 루비 레이아웃 참고). 그 외의 경우에는 박스 내부 콘텐츠의 정렬에만 영향을 주며, 박스의 크기나 위치에는 영향을 주지 않습니다.

값의 의미는 다음과 같습니다:

start

루비 콘텐츠가 박스의 시작 가장자리에 정렬됩니다.

start 루비 분배

"Katatsuki ruby" (肩付き루비)는 이 start 값과 비슷하지만 완전히 동일하지는 않습니다. 특히 베이스를 넘어설 때의 동작이 주변 맥락에 따라 start 정렬과 다를 수 있습니다. 자세한 내용은 JLREQ 참고. 또한 이 방식은 세로쓰기에서만 사용되며, JLTF에서는 그다지 중요하지 않다고 간주하므로, 이 값을 katatsuki ruby까지 똑똑하게 처리하도록 할 필요가 없을 수도 있습니다. start가 다른 용도로 필요하다면 남겨두고, 아니라면 삭제하는 것도 고려할 수 있습니다.

center

루비 콘텐츠가 박스 내 중앙에 정렬됩니다.

center 루비 분배

space-between

루비 콘텐츠가 일반 텍스트 정렬(text-justify 참고)에 따라 확장됩니다. 단, 정렬 기회가 없으면 내용이 중앙 정렬됩니다.

space-between 루비 분배

space-around

space-between과 유사하지만, 추가 정렬 기회가 존재하며 이 공간이 루비 콘텐츠 앞뒤로 반씩 분배됩니다.

space-around 루비 분배

기본 UA 스타일시트는 text-justify: ruby를 루비 주석에 적용하여, CJK 문자의 인접 쌍 사이에는 정렬 기회를 두지만, 라틴 문자나 보포모포 문자의 인접 쌍 사이에는 두지 않습니다. 따라서 space-around와 space-between 값을 사용해도 라틴이나 보포모포 문자는 중앙 정렬됩니다:

비 CJK 루비 텍스트에서 space-around 및 space-between은 중앙 정렬됨

공간 분배는 text-justify로 제어할 수 있습니다. [CSS-TEXT-3]

루비 베이스와 루비 주석의 콘텐츠는, ruby-merge: merge로 인해 span되는 경우를 제외하면, 해당 박스의 ruby-align 값에 따라 정렬됩니다. 병합 주석의 콘텐츠는 루비 주석 컨테이너의 ruby-align 값에 따라 정렬되며, 개별 ruby-align 값은 무시됩니다.

만약 병합 주석이 루비 세그먼트를 더 넓게 만들면? 현재 명세처럼 각 베이스가 span되는 것처럼 커지게 해야 할까? 만약 베이스 컨테이너가 여러 베이스를 가지는데 병합 주석이 더 길면 중앙 정렬을 못 하게 된다. 차라리 ruby-merge를 베이스 컨테이너에도 적용하고, 베이스가 병합된 경우 모든 주석 레벨이 병합되어야 한다고 강제하는 식이 나을 수도 있다.

ruby-merge가 auto일 때의 정렬 방식은 UA가 결정하지만, 모든 주석이 각 베이스 위에 들어가는 경우 그 결과는 ruby-merge: separate와 동일해야 합니다.

4.4. 루비 텍스트 장식

텍스트 장식(text decoration)은 베이스 텍스트에서 주석으로 전파되지 않습니다.

루비의 상위 요소에 텍스트 장식이 지정된 경우, 장식은 루비 베이스 컨테이너 전체 콘텐츠 영역(길이가 긴 주석을 위해 추가된 여백 포함)에 그려집니다. 루비 베이스 자체에 텍스트 장식을 지정하면, 이 추가 공간에는 장식이 적용되지 않습니다. 이는 박스에 직접 텍스트 장식을 지정할 때, 해당 박스의 padding에는 장식이 적용되지 않는 것과 유사합니다. [CSS3-TEXT-DECOR]

텍스트 장식은 루비 베이스 컨테이너와 루비 주석 컨테이너에 직접 지정될 수도 있습니다: 이 경우 컨테이너의 모든 베이스 또는 주석에 장식이 전파되며, 장식은 요소 사이에도 연속적으로 그려집니다.

루비 주석의 위치는 베이스 텍스트에 적용된 overline, underline 장식과 충돌하지 않도록 조정될 수 있습니다. 폰트 크기와 기준선 정렬이 일관된 기본적인 경우에는 밑줄이나 윗줄이 베이스 레벨과 해당 쪽의 주석 사이에 그려집니다.

인접 베이스/주석의 콘텐츠 사이 장식 그리기에 대한 명확한 설명이 필요함. 해당 박스가 열 크기만큼 넓은지 여부에 따라 달라질 수 있음.

5. 엣지 효과

5.1. 돌출 루비: ruby-overhang 속성

ruby-overhang 속성은 루비 주석이 루비 컨테이너 바깥의 인접 텍스트와 겹칠 수 있는지 제어합니다. 값의 의미는 다음과 같습니다:

auto

루비 주석 컨테이너가 해당 루비 베이스 컨테이너보다 길면, 루비 주석 컨테이너가 인접 박스와 일부 겹칠 수 있습니다.

얼마나, 어떤 조건에서 겹칠지는 UA가 결정합니다.

none

루비 주석 컨테이너는 절대 자신의 루비 주석 컨테이너 밖으로 나갈 수 없습니다.

루비 주석이 돌출(overhang)을 허용하지 않을 때, 루비 컨테이너는 전통적인 인라인 박스처럼 동작합니다. 즉, 자신의 콘텐츠만 경계 내에 렌더링되고 인접 요소는 경계를 넘지 않습니다:

텍스트가 인접 텍스트를 침범하지 않는 단순 루비

반면, 루비 주석 컨테이너가 돌출을 허용하면, 인접 콘텐츠가 루비 컨테이너 박스와 겹칠 수 있어, 루비 주석이 주변 인라인 레벨 콘텐츠 위/아래로 일부 렌더링될 수 있습니다. 돌출은 인접 콘텐츠와 루비 컨테이너의 주석 박스 또는 해당 베이스의 내용을 침범하지 않는 범위 내에서만 허용됩니다.

텍스트가 인접 텍스트를 침범할 수 있는 단순 루비

참고: 한 루비 베이스와 연결된 루비 주석이 다른 루비 베이스를 침범할 수 있는지는 ruby-merge로 제어됩니다.

일반적으로 베이스나 주석의 내용 정렬은 돌출 동작에 영향을 받지 않습니다: 정렬 및 공간 분배(관련 내용은 ruby-align 참고)는 돌출 허용 여부와 관계없이 동일하게 처리되며, 겹칠 수 있는 공간 계산 전에 실행됩니다. 단, UA는 허용된 돌출을 공간 분배 또는 정렬에 참고할 수도 있습니다.

돌출이 정렬과 상호작용하는 경우가 있을 것 같으니 추후 확인 필요.

5.2. 줄 끝 정렬

줄의 시작이나 끝에 위치한 루비 주석 박스가 해당 루비 베이스보다 길면, UA는 필요시 루비 주석이 줄 끝과 맞닿는 쪽이 베이스와 줄 끝에 정렬되도록 할 수 있습니다. 이 정렬 방식은 [JLREQ]에 설명되어 있습니다.

이 명세 레벨에서는 이 동작을 제어할 수 있는 메커니즘을 제공하지 않습니다.

줄 끝 정렬

부록 A: 샘플 스타일시트

이 섹션은 참고용입니다.

A.1 기본 UA 스타일시트

아래는 HTML, XHTML 루비 마크업을 루비 레이아웃으로 렌더링하기 위한 기본 UA 스타일시트 예시입니다:

ruby { display: ruby; }
rp   { display: none; }
rbc  { display: ruby-base-container; }
rtc  { display: ruby-text-container; }
rb   { display: ruby-base; white-space: nowrap; }
rt   { display: ruby-text; }
ruby, rb, rt, rbc, rtc { unicode-bidi: isolate; }

rtc, rt {
  font-variant-east-asian: ruby;  /* See [[CSS-FONTS-3]] */
  text-justify: ruby;             /* See [[CSS-TEXT-4]] */
  text-emphasis: none;            /* See [[CSS-TEXT-DECOR-3]] */
  white-space: nowrap;
  line-height: 1; }

rtc, :not(rtc) > rt {
  font-size: 50%; }
rtc:lang(zh-TW), :not(rtc) > rt:lang(zh-TW),
rtc:lang(zh-Hanb), :not(rtc) > rt:lang(zh-Hanb), {
  font-size: 30%; }               /* bopomofo */

참고: 작성자는 위 규칙을 직접 사용하지 않아야 합니다. 루비 레이아웃을 지원하는 UA라면 위 규칙을 기본적으로 제공합니다.

사용자 제어 “최소 글꼴 크기” 기능을 구현하는 UA는 루비 주석에 대해 그 최소값을 더 작게 적용하는 것도 고려해야 합니다.

A.2 인라인 루비 주석

아래는 HTML, XHTML 루비 마크업을 인라인 주석처럼 렌더링하기 위한 샘플 스타일시트 예시입니다:

ruby, rb, rt, rbc, rtc, rp {
  display: inline; white-space: inherit;
  font: inherit; text-emphasis: inherit; }

A.3 괄호 생성

아쉽게도, 셀렉터는 텍스트 노드에 매칭할 수 없으므로, CSS만으로는 HTML의 모든 루비 마크업 패턴에서 괄호 없는 루비 주석에 자동으로 괄호를 추가하는 규칙을 완벽하게 표현할 수 없습니다. (이는 HTML 루비가 요소 없이 순수 텍스트에서 루비 베이스를 암시적으로 만들 수 있기 때문입니다.)

그러나 <rb> 또는 <rtc>가 엄격히 사용되는 경우에는, 아래 규칙이 각 주석 시퀀스에 괄호를 추가할 수 있습니다:

/* <rtc> 주위 괄호 */
rtc::before { content: "（"; }
rtc::after  { content: "）"; }

/* <rtc> 안이 아닌 첫 <rt> 앞 괄호 */
rb  + rt::before,
rtc + rt::before { content: "（"; }

/* <rtc> 안이 아닌 <rt> 뒤 괄호 */
rb ~ rt:last-child::after,
rt + rb::before  { content: "）"; }
rt + rtc::before { content: "）（"; }

반복적으로 교차되는 마크업(즉, <ruby>A<rt>a</rt>B<rt>b</rt>C<rt>c</rt><ruby>) 방식으로 마크업이 사용되어 인접한 루비 주석이 없다는 것이 보장된다면, 아래 규칙으로 각 주석에 괄호를 추가할 수 있습니다:

/* 각 <rt> 주위 괄호 */
rt::before { content: "（"; }
rt::after  { content: "）"; }

6. 용어집

보포모포 또는 주음부호 (중국어: ㄅㄆㄇㄈ, 注音符號, 또는 注音符号)

중국어(특히 표준 중국어) 발음 표기를 위해 개발된 문자와 성조 기호. 이들은 종종(항상은 아님) 루비 주석에 사용됩니다.

중국어에서 보포모포가 문자 간 발음 표기로 사용된 예시

보포모포 성조 기호는 각 보포모포 음절 끝에 (메모리상으로) 등장하는 공백 문자입니다. 보통 다른 보포모포 문자 오른쪽이나 위쪽의 별도 트랙에 표시되며, 성조 기호의 위치는 음절 내 글자 수에 따라 달라집니다. 단, 경성 기호는 보포모포 앞(그리고 같은 줄)에 오며, 나란히 표시되지 않습니다.

참고: 루비 주석이든 일반 인라인 콘텐츠이든, 텍스트를 표시할 때 보포모포 성조 기호를 포함한 글리프의 상대적 정렬과 위치 지정은 UA와 폰트 서브시스템의 책임입니다. 이러한 글리프 배치는 CSS 루비 레이아웃의 기능이 아닙니다.

보포모포 글자는 Bopomofo 유니코드 스크립트에 속하며(현재 U+3100–312F 및 U+31A0–31BF 블록에 매핑됨); 보포모포 성조 기호는 U+02C9 (ˉ), U+02CA (ˊ), U+02C7 (ˇ), U+02CB (ˋ), U+02EA (˪), U+02EB (˫), U+02D9 (˙)입니다. 이들을 모두 합쳐 CSS에서 보포모포 문자로 간주합니다.

한자 (한국어: 漢字)

한글과 더불어 한국어 표기에 사용되는 문자 체계의 일부로, 중국어 문자에서 빌려오거나 변형된 표의문자. 한자(일본어)도 참고.

히라가나 (일본어: 平仮名)

일본어 음절 문자, 혹은 해당 문자의 글자. 둥글고 흘림체 스타일. 일본어 문자 체계의 일부로, 한자와 가타카나와 함께 사용됨. 최근에는 주로 한자를 쓸 수 없거나 적절하지 않은 일본어 단어, 어미, 조사 표기에 사용됨. 가타카나도 참고.

표의문자(이데오그램)

알파벳/음절 문자와 달리, 아이디어, 단어, 단어 구성요소를 나타내는 문자. 가장 잘 알려진 표의문자 체계는 동아시아(중국, 일본, 한국 등)에서 사용됩니다.

가나 (일본어: 仮名)

히라가나와 가타카나를 통칭하는 말.

한자 (일본어: 漢字)

일본어의 표의문자(한자) 용어; 일본어에서 사용되는 표의문자. 일본어 문자 체계의 일부로, 히라가나, 가타카나와 함께 사용됨. 한자(한국어)도 참고.

가타카나 (일본어: 片仮名)

일본어 음절 문자, 혹은 해당 문자의 글자. 각지고 직선적인 형태. 일본어 문자 체계의 일부로, 한자, 히라가나와 함께 사용됨. 최근에는 주로 외래어 표기에 사용됨. 히라가나도 참고.

감사의 글

이 명세는 다음 분들의 도움 없이는 가능하지 않았을 것입니다:

David Baron, Robin Berjon, Susanna Bowen, Stephen Deach, Martin Dürst, Hideki Hiura (樋浦 秀樹), Masayasu Ishikawa (石川雅康), Taichi Kawabata, Chris Pratley, Xidorn Quan, Takao Suzuki (鈴木 孝雄), Frank Yung-Fong Tang, Chris Thrasher, Masafumi Yabe (家辺勝文), Boris Zbarsky, Steve Zilles.

이전 편집자들에게 특별히 감사드립니다: Microsoft의 Michel Suignard와 Marcin Sawicki, 그리고 W3C의 Richard Ishida.

변경 이력

이 섹션은 이전 발행 이후의 변경 사항을 기록합니다.

2021년 12월 2일 WD 이후 변경점

• writing-mode 속성의 계산값 조정이 문자 간 주석의 루비 주석 박스에 적용되도록 수정(기존에는 루비 주석 컨테이너 박스에 적용).
• HTML에서 루비 주석에 zh-Hant 규칙 및 font-size: 30% 추가.
• UA 기본 스타일시트에 text-justify: ruby 추가. (이슈 771 이슈 779)

2020년 4월 29일 WD 이후 변경점

• alternate 키워드를 ruby-position에 추가하고 초기값으로 지정.
• collapse 값을 ruby-merge에서 merge로 이름 변경. (이슈 5004)
• visibility: collapse가 주석을 숨김 처리하는 동작을 자동 숨김과 동일하게 명시. (이슈 5927)
• 각 루비 display 타입에 적용되는 속성을 보다 명확히 명시(§ 3.3 루비 박스 스타일링). 루비, 루비 베이스, 루비 주석 박스가 별도 명시 없으면 일반 인라인 박스와 동일하게 동작함을 정의. (이슈 4935, 이슈 4936, 이슈 4976, 이슈 4979)
• § 3 루비 레이아웃 대폭 개편, 인라인(줄간) 및 문자 간 루비 레이아웃과 이들의 상호작용을 명확히 정의. 인라인 축 공간 분배는 인라인(줄간) 루비에서 스패닝 주석이 있을 때 (max-content 그리드 트랙을 모델로) 더 명확하게 정의.
• 중첩 루비 처리 시, 블록 축 크기 계산에 하위 베이스/주석 컨테이너를 반영하도록 명확화. (이슈 4986, 이슈 4980)
• ruby-align 동작을 보다 명확히 규정.
• 루비 돌출(overhang)이 루비 콘텐츠 정렬에 영향을 주지 않아야 한다는 요구 완화, 대신 인접 콘텐츠와 충돌하지 않아야 한다는 요구 추가.
• bidi 재정렬과 병합 주석의 상호작용 명확화(§ 3.5 양방향 재정렬).
• 전체적으로 규범적 문장 다듬기.
• 서론, 예시, 기타 설명문 개선.

참고: 여전히 많은 오픈 이슈가 남아 있습니다. Disposition of Comments와 GitHub의 최신 이슈를 참고하세요.

2014년 8월 5일 WD 이후 변경점

• ruby-overhang: auto | none을 다시 추가하여 루비 돌출 동작 기본 제어.
• CSS Display Module과 인라인화 동작 일치.
• 루비/강조 부호가 밑줄/윗줄과 충돌하면 UA가 이동시킬 수 있도록 허용.
• ruby-merge의 계산값이 collapse일 때 자동 숨김 비활성화.
• 기본 스타일시트 조정.
• 텍스트 장식과의 상호작용 정의 섹션 추가.
• ruby-position의 right, left 값은 다음 버전으로 이월.
• 짝짓기 규칙을 익명 주석에만 스패닝 적용하도록 변경(즉, rtc에 직접 포함된 콘텐츠).
• 초과 베이스/주석은 자동 생성된 빈 익명 베이스/주석과 쌍지음.
• ruby-position을 ::first-line에 적용. (이슈 2998)
• 루비 박스와 콘텐츠의 포함 블록이 다른 인라인 박스와 마찬가지로 가장 가까운 블록 컨테이너임을 명확화.
• 부적절한 부모를 가진 내부 테이블 요소 처리 명확화.
• 짝짓기에 방해가 되지 않도록 루비 컨테이너, 베이스 컨테이너, 주석 컨테이너의 선/후행 공백을 잘라내도록 명확화.
• 빈 베이스/주석 컨테이너의 레이아웃 효과 정의.
• 루비 베이스 컨테이너, 루비 주석 컨테이너에는 margin, padding, border 비활성화(루비 베이스/주석에는 적용 가능).

2013년 9월 19일 WD 이후 변경점

• 익명 박스 생성 규칙, 공백 처리 규칙 재작성, 익명 공백 박스 짝짓기 정의.
• 짝짓기에서 중첩 루비 처리를 분리(사이즈/레이아웃에서 처리할 예정).
• 루비 구조의 bidi 레이아웃 정의.

2011년 6월 30일 WD 이후 변경점

ruby-span과 rbspan 언급 삭제

HTML 루비에서는 명시적 span 대신 암시적 span 방식을 사용합니다. 이 방식은 일부 특이한 양면 스패닝 케이스는 처리하지 못하지만, 현재로서는 그런 요구가 없는 듯합니다. (복잡한 XHTML Ruby 전체를 지원하는 구현체의 경우, 테이블의 셀 스패닝과 유사하게 마크업에서 스패닝을 암시적으로 추론할 수 있습니다. Level 1에서 이를 직접 제어할 필요는 없어 보입니다.)

ruby-overhang과 ruby-align: line-end를 2단계로 이월

다소 복잡하고 고급 기능입니다. 이 동작을 UA 정의로 두고, 허용 가능한 옵션 예시만 제시하는 것이 제안되었습니다.

display: rp 관련 이슈 종료: display: none 사용

Internationalization WG에서 rp 요소의 display 값을 요청하는 이슈를 제기했습니다. ruby 가 루비로 표시될 때는 rp가 숨겨져야 하지만, 이미 display: none으로 쉽게 처리할 수 있습니다.

ruby-position 값을 text-emphasis-position과 일치하도록 변경

inter-character만 예외로 두고, 루비 위치를 text-emphasis-position과 맞추는 게 가로/세로 조합을 제대로 처리하는 데 더 합리적입니다.

ruby-align의 미사용 값 삭제

left, right, end 값은 필요하지 않습니다.

ruby-align의 auto, distribute-letter, distribute-space 값을 space-between 및 space-around로 대체

auto 값은 내용을 검사하여 동작을 결정하므로, 표준 정렬 규칙과 space-around 조합으로 충분합니다 (CJK 사이에는 공백을 주고, 라틴 사이에는 공백을 주지 않음). distribute-letter와 distribute-space도 space-between 및 space-around로 일관적으로 변경. [CSS-FLEXBOX-1] 및 [CSS-ALIGN-3]의 분배 키워드와 일치시키고, text-justify: distribute 정의와 연결을 피함.

ruby-merge 속성 추가로 숙어(jukugo) 렌더링 제어

이는 구조적이 아닌 스타일 효과입니다. 이전 모델은 구조적 효과로 가정하고 마크업 변경을 제안했으나, 실제로는 그렇지 않습니다.

ruby-position에서 inline 값 삭제

모든 ruby 관련 요소에 display: inline을 지정하면 충분합니다. 부록 A 참고.

기본 스타일 규칙 추가

Internationalization WG의 요청에 따라 추가.

익명 박스 생성 규칙 작성

베이스와 주석의 짝짓기(pairing)를 정의. 이제 HTML 루비 마크업의 모든 복잡한 조합도 처리 가능해야 합니다.

루비 레이아웃 정의

공간 분배, 공백 처리, 줄바꿈, 줄 쌓기 등 상세 동작 정의. bidi 관련 오픈 이슈는 남겨둠.