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

1. 소개

1.1. 루비란 무엇인가?

이 하위 절은 비규범적이다.

루비는 다른 텍스트 구간 (“베이스”라고 함) 옆에 나타나며 해당 텍스트 구간과 관련된 주석 또는 발음 안내 역할을 하는 텍스트 구간을 가리키는 일반적으로 사용되는 명칭이다.

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

이 예에서는 하나의 주석을 사용하여 여러 문자로 구성된 베이스 텍스트에 주석을 단다.

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

일본어 조판에서 이 경우는 때때로 taigo 루비(일본어: 対語ルビ, 즉 단어별 루비) 또는 그룹 루비라고 하며, 이는 주석 전체가 여러 문자로 이루어진 단어 전체와 연결되기 때문이다.

이 두 번째 예에서는 두 레벨의 주석이 베이스 텍스트에 연결된다: 위쪽의 히라가나 문자는 각 베이스 한자 문자의 발음을 나타내고, 아래쪽의 “Keio”와 “University”라는 단어는 영어 번역을 제공한다.

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

히라가나 문자와 이에 대응하는 한자 베이스 문자의 올바른 연관 관계를 반영하기 위해 베이스 레벨 텍스트 내부의 간격이 조정된다는 점에 유의하라. (이는 위 그림의 네 번째 한자 문자 주변에서 발생하며, 이 문자에는 세 문자로 된 발음 주석이 있다.) 위 예에서 베이스 텍스트의 가변적인 간격을 피하기 위해 히라가나 주석을 병합된 주석으로 스타일 지정할 수 있으며, 그러면 앞의 그룹 루비 예와 더 비슷하게 보인다. 그러나 베이스-주석 페어링이 루비 구조에 기록되므로, 텍스트가 여러 줄에 걸쳐 줄바꿈되더라도 주석 문자는 각각의 베이스 문자와 올바르게 페어링된 상태를 유지한다.

HTML에서 루비 구조와 이를 나타내는 마크업은 Ruby Markup Extension 명세에 설명되어 있다. 이 모듈은 이러한 마크업의 루비 레이아웃과 관련된 CSS 렌더링 모델 및 서식 제어를 설명한다.

루비와 그 서식에 대한 더 자세한 소개는 “루비란 무엇인가?” 문서 [QA-RUBY]에서 찾을 수 있다. 일본어에서 루비가 전통적으로 서식 지정되어 온 주요 방식에 대한 광범위한 정보는 JIS X-4051 [JIS4051] (일본어) 및 일본어 텍스트 레이아웃 요구사항 [JLREQ] (영어 및 일본어)의 “루비와 강조점”에서 찾을 수 있다; 일본어 루비의 단순 배치 규칙 [SIMPLE-RUBY]도 일본어 루비 서식 지정에 가능한 한 가지 접근 방식을 (영어로) 설명한다. “행간 주석”은 중국어 텍스트 레이아웃 요구사항 [CLREQ]에서 중국어 조판의 관련 관행을 (중국어 및 영어로) 설명한다.

1.2. 모듈 상호 작용

이 모듈은 루비를 지원하기 위해 CSS 레벨 2 [CSS2]의 인라인 박스 모델을 확장한다.

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

1.3. 값 정의

이 명세는 값 정의 구문을 사용하여 [CSS-VALUES-3]에서 가져온 CSS 속성 정의 규칙을 [CSS2]에 따라 사용한다. 이 명세에서 정의하지 않은 값 유형은 CSS 값 및 단위 [CSS-VALUES-3]에서 정의한다. 다른 CSS 모듈과의 결합으로 이러한 값 유형의 정의가 확장될 수 있다.

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

1.4. 다이어그램 규칙

이 하위 절은 비규범적이다.

동아시아 조판의 많은 타이포그래피 규칙은 렌더링된 문자가 넓은 문자(CJK)인지 좁은 문자(비CJK)인지에 따라 달라진다. 이 문서에는 다음 범례를 사용하는 여러 그림이 있다:

텍스트 구간에서 n번째 문자인 넓은 셀 글리프(예: 한자). 주석으로 사용할 때는 일반적으로 50% 크기로 조정된다.

텍스트 구간에서 n번째 글리프인 좁은 셀 글리프(예: 로마자).

위 기호가 다이어그램에서 취하는 방향은 해당 기호가 나타내는 글리프가 사용자 에이전트에 의해 렌더링될 때 취하도록 의도된 방향에 대응한다. 다이어그램에서 이러한 문자 사이의 간격은 부수적인 것이며, 특정 점을 보여 주기 위해 의도적으로 변경된 경우는 예외이다.

2. 루비 박스 모델

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

연속된 베이스 집합과 이에 대응하는 연속된 주석은 루비 세그먼트로 함께 그룹화된다. 루비 세그먼트 내에서 루비 주석은 여러 루비 베이스에 걸칠 수 있다.

참고: 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 레이아웃 내부 Display 유형: table-* 및 ruby-* 키워드에 따른다; 대체 요소에서 display 값이 ruby 또는 inline ruby인 경우에는 해당 외부 display 유형에 따라 동작하며, 이는 CSS Display 3 § 2.1 플로 레이아웃의 외부 Display 역할: block, inline 및 run-in 키워드에 따른다. (§ 2.1.2 비인라인 루비도 참조하라.)

2.1.1. 루비 서식 컨텍스트

루비 컨테이너는 비원자적 인라인 레벨 박스이다. 일반적인 인라인 박스와 마찬가지로(CSS Inline Layout 3 § 2 인라인 레이아웃 모델 참조), 여러 줄에 걸쳐 줄바꿈될 수 있으며, 해당 컨테이닝 블록은 가장 가까운 블록 컨테이너 조상이다. 그리고 인라인 박스의 내용이 인라인 박스 자체를 포함하는 것과 동일한 인라인 서식 컨텍스트에 참여하는 것과 마찬가지로, 루비 컨테이너와 그 베이스 레벨 내용은 루비 컨테이너 자체를 포함하는 것과 동일한 인라인 서식 컨텍스트에 참여한다.

그러나 루비 컨테이너는 또한 주석을 수용하기 위해 인라인 서식 컨텍스트의 해당 세그먼트 주변에 추가 구조를 만드는 루비 서식 컨텍스트를 설정한다. 참고: 이 서식 컨텍스트는 독립 서식 컨텍스트가 아니다. 루비 베이스, 루비 주석, 루비 베이스 컨테이너, 및 루비 주석 컨테이너는 내부 루비 박스이다: 내부 표 요소와 마찬가지로 루비 레이아웃에서 특정 역할을 가지며, 해당 루비 컨테이너의 루비 서식 컨텍스트에 참여한다. 루비 서식 컨텍스트에서의 역할에 더하여, 루비 베이스는 동시에 루비 컨테이너와 동일한 베이스 레벨 인라인 서식 컨텍스트에 참여하는 반면, 루비 주석은 루비 컨테이너가 설정하는 별도의 주석 레벨 인라인 서식 컨텍스트에 참여한다.

인라인 박스의 내용과 마찬가지로, 루비 컨테이너(및 그 모든 내부 루비 박스)의 내용에 대한 컨테이닝 블록은 루비 컨테이너의 컨테이닝 블록이다. 따라서 예를 들어 플로트는 어떤 루비 박스 유형이 아니라 루비 컨테이너의 컨테이닝 블록에 의해 제한된다.

2.1.2. 비인라인 루비

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

참고: 요소를 절대 위치 지정하거나 플로팅하면 해당 display 값이 블록 레벨에 해당하는 값으로 계산된다. ([CSS-DISPLAY-3] 또는 [CSS2]의 9.7절을 참조하라.) 내부 루비 display 유형의 경우, 이로 인해 해당 display 값은 block으로 계산된다.

2.2. 익명 루비 박스 생성

CSS 모델은 문서 언어에 이러한 각 구성 요소에 대응하는 요소가 포함될 것을 요구하지 않는다. 구조에서 누락된 부분은 표를 정규화하는 데 사용되는 것과 유사한 익명 박스 생성 규칙을 통해 암시된다. [CSS2]

1. 블록 레벨 박스를 인라인화한다: 루비 컨테이너, 루비 베이스 컨테이너, 루비 주석 컨테이너, 루비 베이스 박스, 또는 루비 주석 박스에 직접 포함된 모든 인플로 박스는 [CSS-DISPLAY-3]에 따라 “인라인화”되며, 해당 display 값도 이에 따라 계산되어, 인라인 레벨 콘텐츠만 포함하도록 한다. 예를 들어, display: ruby-text인 요소를 부모로 가지며 display: block인 인플로 요소의 display 속성은 inline-block으로 계산된다.
2. 익명 루비 컨테이너를 생성한다: 부적절하게 포함된 루비 베이스 컨테이너, 루비 주석 컨테이너, 루비 베이스, 및/또는 루비 주석(그리고 그 사이에 있는 모든 공백)의 연속된 시퀀스는 익명 루비 컨테이너로 감싸진다. 이 단계의 목적상:
   • 부적절하게 포함된 루비 베이스란 루비 베이스 컨테이너 또는 루비 컨테이너를 부모로 가지지 않는 것을 말한다.
   • 부적절하게 포함된 루비 주석이란 루비 주석 컨테이너 또는 루비 컨테이너를 부모로 가지지 않는 것을 말한다.
   • 부적절하게 포함된 루비 베이스 컨테이너 또는 루비 주석 컨테이너란 루비 컨테이너를 부모로 가지지 않는 것을 말한다.
3. 잘못된 부모를 가진 인라인 레벨 콘텐츠를 감싼다: 루비 컨테이너 또는 루비 베이스 컨테이너를 직접 부모로 가지는 텍스트와 인라인 레벨 박스의 연속된 시퀀스는 익명 루비 베이스로 감싸진다. 마찬가지로, 루비 주석 컨테이너를 직접 부모로 가지는 텍스트와 인라인 레벨 박스의 연속된 시퀀스는 익명 루비 주석으로 감싸진다. (이 목적상, 잘못된 부모를 가진 내부 표 요소는 루비 박스를 부모로 가지므로 결국 인라인 레벨 표 래퍼 박스로 감싸지기 때문에 인라인 레벨 콘텐츠로 취급한다.)

   그러나 이렇게 구성된 익명 박스가 공백만 포함하는 경우, 이를 루비 내부 공백으로 간주하며 아래에 설명된 대로 제거하거나 보존한다.

4. 앞/뒤 공백을 제거한다: 부모의 유일한 인플로 자식이 아니면서 루비 컨테이너, 루비 주석 컨테이너, 또는 루비 베이스 컨테이너의 첫 번째 또는 마지막 인플로 자식인 모든 루비 내부 공백은 display: none인 것처럼 제거된다.
5. 레벨 간 공백을 제거한다: 바로 인접한 인플로 형제 요소가 아래 패턴 중 하나와 일치하는 모든 루비 내부 공백은 레벨 간 공백이며 display: none인 것처럼 제거된다.

   이전 박스	다음 박스
   모두	루비 주석 컨테이너
   루비 주석이 아님	루비 주석

6. 레벨 내 공백을 해석한다: 바로 인접한 인플로 형제 요소가 아래 패턴 중 하나와 일치하는 모든 루비 내부 공백 박스에는 아래 표에 정의된 박스 유형과 하위 유형이 할당된다:

   이전 박스	다음 박스	박스 유형	하위 유형
   루비 베이스	루비 베이스	루비 베이스	베이스 간 공백
   루비 주석	루비 주석	루비 주석	주석 간 공백
   루비 주석 또는 루비 주석 컨테이너	루비 베이스 또는 루비 베이스 컨테이너	루비 베이스	세그먼트 간 공백
   루비 베이스 또는 루비 베이스 컨테이너	루비 베이스 컨테이너
   루비 베이스 컨테이너	루비 베이스 또는 루비 베이스 컨테이너

   위에서 정의한 레벨 내 공백 박스는 페어링과 레이아웃에서 특별하게 취급된다. 아래를 참조하라.
7. 줄바꿈을 억제한다: 루비 주석 내부의 모든 강제 줄바꿈을 (white-space 값과 관계없이) CSS Text 레벨 3 § 4.1.2의 축소 가능한 세그먼트 줄바꿈에 대해 정의된 방식으로 변환한다.

   이 규칙의 목적은 루비 주석 내부의 모든 줄바꿈을 억제하여 레이아웃 모델을 단순화하는 것이다. 또는 이에 대해 허용 가능한 어떤 동작을 정의할 수도 있다.

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. 주석 페어링

주석 페어링은 루비 주석을 루비 베이스와 연결하는 과정이다. 각 루비 주석은 하나 이상의 루비 베이스와 연결되며, 해당 베이스에 걸친다고 한다. (여러 베이스에 걸치는 루비 주석을 범위 주석이라고 한다.)

루비 베이스는 각 주석 레벨마다 하나의 루비 주석과만 연결될 수 있다. 그러나 여러 주석 레벨이 있는 경우에는 여러 루비 주석과 연결될 수 있다.

페어링이 완료되면 루비 열이 정의되며, 각 열은 하나의 루비 베이스와 해당 루비 세그먼트의 각 행간 주석 레벨에서 가져온 하나의 루비 주석(빈 익명 주석일 수 있음)으로 나타낸다.

2.3.1. 세그먼트 페어링 및 주석 레벨

루비 구조는 루비 세그먼트로 나뉘며, 각각은 하나의 루비 베이스 컨테이너와 그 뒤를 잇는 하나 이상의 루비 주석 컨테이너로 구성된다. 루비 세그먼트의 각 루비 주석 컨테이너는 베이스 텍스트에 대한 하나의 주석 레벨을 나타낸다: 첫 번째 것은 첫 번째 주석 레벨을 나타내고, 두 번째 것은 두 번째 주석 레벨을 나타내며, 이런 식으로 계속된다. 루비 베이스 컨테이너는 베이스 레벨을 나타낸다. 따라서 각 세그먼트의 루비 베이스 컨테이너는 해당 세그먼트의 각 루비 주석 컨테이너와 페어링된다.

퇴화된 경우를 처리하기 위해 일부 빈 익명 컨테이너가 존재한다고 가정한다:

• 루비 컨테이너의 첫 번째 자식이 루비 주석 컨테이너인 경우, 그 앞에 익명의 빈 루비 베이스 컨테이너가 존재한다고 가정한다.
• 마찬가지로, 루비 컨테이너에 연속된 루비 베이스 컨테이너가 포함된 경우, 그 사이에 익명의 빈 루비 주석 컨테이너가 존재한다고 가정한다.

세그먼트 간 공백은 실질적으로 그 자체가 하나의 루비 세그먼트이다.

2.3.2. 단위 페어링 및 범위 주석

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

루비 주석 컨테이너가 하나의 익명 루비 주석만 포함하는 경우, 그 루비 주석은 해당 루비 세그먼트의 모든 루비 베이스와 페어링된다(즉, 그 전체에 걸친다).

그렇지 않으면, 각 루비 주석은 문서 순서에 따라 해당 세그먼트의 대응하는 루비 베이스와 페어링된다. 루비 주석 컨테이너에 루비 주석이 충분하지 않은 경우, 남은 루비 베이스는 루비 주석 컨테이너의 끝에 삽입된 익명의 빈 주석과 페어링된다. 루비 베이스가 충분하지 않은 경우, 남은 모든 루비 주석은 루비 베이스 컨테이너의 끝에 삽입된 빈 익명 베이스와 페어링된다.

구현이 명시적 범위를 지정하는 루비 마크업을 지원하는 경우 (예: 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과 다르다—후자는 주석을 보이지 않게 하지만, 레이아웃에 미치는 영향은 제거하지 않는다:

또한 display: none과도 다르다. visibility: collapse는 페어링 관계를 보존하는 반면, display: none은 박스를 트리에서 완전히 제거하여, 그 뒤의 모든 주석 페어링을 흐트러뜨리기 때문이다:

주석 컨테이너의 ruby-merge의 계산값이 merge이면 숨김이 비활성화된다. 해당 값이 auto이면, 사용자 에이전트는 해당 주석의 숨김을 비활성화할지 여부를 결정할 수 있지만, 사용자 에이전트의 레이아웃 알고리즘이 separate와 유사한 결과를 생성하는 경우에는 숨김을 활성화하는 것이 권장된다.

자동 숨김을 위한 콘텐츠 비교는 공백 축소(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>

제거되지 않은 공백이 축소 가능한 경우, 표준 공백 처리 규칙 [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인 경우, 각 루비 열의 크기는 해당 열에서 가장 넓은 콘텐츠(루비 베이스 또는 루비 주석)에 맞춰 정해진다. 범위 주석의 경우(실제로 걸쳐 있거나 ruby-merge: merge에 따라 걸쳐 있는 것처럼 처리되는 경우 모두), 범위 주석의 콘텐츠가 해당 주석이 걸치는 열보다 더 넓다면, 그 차이는 걸쳐 있는 열 사이에 균등하게 배분된다. 루비 세그먼트에 여러 범위 주석이 포함된 경우, 이러한 추가 공간의 배분은 가장 적은 수의 베이스에 걸친 범위 주석부터 시작하여, 걸친 베이스 수가 증가하는 순서로 수행된다. 그런 다음 각 루비 베이스와 루비 주석의 크기는 해당 열에 정확히 걸치도록 정해진다.

참고: 서로 다른 레벨에 같은 수의 베이스에 걸쳐 있으면서 서로 겹치지만 일치하지 않는 여러 주석이 있는 경우, 공간 배분은 정의되지 않는다. HTML 마크업에서는 이러한 상황이 발생할 수 없지만, [RUBY]와 같이 명시적 범위를 지정하는 마크업 언어에서는 발생할 수 있다.

ruby-merge: auto인 주석 컨테이너의 루비 주석 중 하나라도 해당 베이스보다 넓으면, 그 주석 컨테이너의 루비 주석은 해당 열 밖으로 확장될 수 있다. 그렇게 확장되는 경우, 해당 주석이 교차하는 열의 너비에 미치는 영향은 사용자 에이전트가 결정하지만, 루비 세그먼트가 모든 콘텐츠를 수용할 만큼 충분히 넓어야 한다.

문자 사이 주석은 열 사이에 끼워 넣어진다: 양쪽 인접 열 모두에 걸치는 주석을 측정할 때 고려되지만, 어느 열에도 포함되지 않으며 행간 주석의 크기 지정이나 위치 지정에 의해 영향을 받지 않는다.

각 베이스 및 주석 박스에서, 콘텐츠가 박스의 너비보다 좁을 때 추가 공간을 어떻게 배분할지는 해당 ruby-align 속성으로 지정한다.

3.1.2. 블록 축 행간 레이아웃

vertical-align이 이러한 루비 박스에 영향을 미치는 범위를 정의한다. 이슈 4987을 참조하라.

그런 다음 각 베이스 컨테이너는 모든 루비 베이스의 마진 박스—그리고 연결된 모든 문자 사이 루비 주석 마진 박스가 있는 경우 그것들도—정확히 포함하도록 크기와 위치가 지정되며, 이 인라인 서식 컨텍스트에 함께 참여하는 모든 하위 루비 컨테이너의 베이스 및 주석 컨테이너도 포함한다. (베이스 컨테이너에 인플로 콘텐츠가 없으면, 하나의 빈 루비 베이스를 포함하는 것처럼 크기와 위치가 지정된다.)

각 행간 주석 컨테이너는 모든 루비 주석의 마진 박스와 이 주석 레벨의 인라인 서식 컨텍스트에 함께 참여하는 모든 하위 루비 컨테이너의 베이스 및 주석 컨테이너를 정확히 포함하도록 크기와 위치가 지정된다. (주석 컨테이너에 인플로 콘텐츠가 없으면, 하나의 빈 루비 주석을 포함하는 것처럼 크기와 위치가 지정된다.) 그런 다음 이러한 주석 컨테이너는 대응하는 베이스 컨테이너의 위 또는 아래에(ruby-position에 따라) 바깥쪽으로 쌓이며, 그 사이에는 어떤 공간도 두지 않는다. 이로써 루비 주석이 해당 루비 베이스에 대해 블록 축에서 배치되는 위치가 결정된다.

블록 축 마진은 축소되어야 하는가? 이렇게 하면 레이아웃이 더 견고해지지만, 인라인이 인라인 축을 따라 동작하는 방식과 일치하지 않는다.

3.2. 문자 사이 루비 레이아웃

문자 사이 주석에는 특별한 레이아웃이 적용된다. 문자 사이 루비 주석 박스는 베이스 레벨의 레이아웃에 삽입되어 그 일부로 측정된다. 각 루비 주석은 페어링된 루비 베이스의 오른쪽에 삽입된다; 걸치는 문자 사이 주석은 해당 주석이 걸치는 모든 베이스 중 가장 오른쪽 베이스 뒤에 배치된다. 문자 사이 루비 주석은 아래에서 설명하는 사항을 제외하면 인라인 블록과 정확히 동일하게 레이아웃된다.

참고: inter-character의 정의에 따라, 문자 사이 주석에는 항상 vertical-rl writing-mode가 적용되며, 가로 루비 컨테이너에서만 존재한다.

각 루비 주석은 관련 루비 베이스의 바로 오른쪽, 모든 베이스 간 공백(또는 세그먼트 간 공백)보다 앞에 배치된다. 여러 문자 사이 루비 주석 박스가 동일한 루비 베이스에 배치되면, 해당 마진 박스는 그 사이에 공간 없이 오른쪽으로 쌓이며, 레벨이 증가하는 순서를 따른다.

루비 주석 박스의 콘텐츠 영역의 자동 높이가 해당 박스가 뒤에 배치되는 루비 베이스의 콘텐츠 박스 높이보다 작아지는 경우, 그 콘텐츠 박스 높이를 정확히 해당 높이와 일치하도록 늘린다.

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

• ruby-align이 start이면, 루비 주석의 콘텐츠 박스의 위쪽 가장자리를 루비 베이스의 콘텐츠 박스 위쪽 가장자리와 정렬한다.
• 그렇지 않으면, 루비 주석의 콘텐츠 박스 중심을 루비 베이스의 콘텐츠 박스 중심과 세로로 정렬한다.

문자 사이 주석의 루비 주석 컨테이너 박스는 해당 콘텐츠 박스가 루비 베이스 컨테이너 박스의 콘텐츠 박스와 정확히 일치하도록 크기와 위치가 지정된다.

참고: 문자 사이 루비 주석 컨테이너 박스의 크기와 위치는 레이아웃에 영향을 주지 않는다. 위의 정의는 단지 프로그래밍 방식으로 이를 조회했을 때 결정적인 결과가 나오도록 하기 위한 것이다.

정렬 및 열 크기 지정의 목적상(§ 3 루비 레이아웃에서 설명한 대로), 문자 사이 루비 주석은 자신이 연결된 베이스와 동일한 열의 일부로 간주되지 않는다; 대신 사실상 자체 열을 형성한다.

3.3. 루비 박스 스타일 지정

루비 베이스와 루비 컨테이너는 인라인 박스로 취급되며, 달리 지정하지 않는 한 인라인 박스에 적용되는 모든 속성은 동일한 방식으로 이들에게도 적용된다. 그러나 vertical-align의 줄 상대 이동 값(top, bottom)은 무시해야 한다(0으로 취급한다).

달리 지정하지 않는 한 인라인 박스에 적용되는 모든 속성은 루비 주석에도 동일한 방식으로 적용되지만, line-height는 적용되지 않는다. 또한 vertical-align의 줄 상대 이동 값(top, bottom)은 무시해야 한다(0으로 취급한다).

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

UA는 배경 속성이나 아웃라인 속성, 또는 루비 베이스 컨테이너 박스나 루비 주석 컨테이너 박스에서 박스의 경계를 나타내는 다른 어떤 속성도 지원할 필요가 없다. UA는 이러한 박스를 단순히 상속과 해당 콘텐츠의 레이아웃 제어를 위한 추상 개념으로 구현할 수 있다.

3.4. 여러 줄에 걸친 줄바꿈

전체 루비 컨테이너가 한 줄에 들어갈 공간이 충분하지 않으면, 모든 레벨이 동시에 줄바꿈을 허용하는 곳에서 루비를 줄바꿈할 수 있다. (줄바꿈에 대한 자세한 내용은 CSS Text 3 § 5 줄바꿈 및 단어 경계를 참조하라.) 루비는 대부분 베이스-주석 집합 사이에서 줄바꿈되지만, 줄바꿈 규칙이 허용하는 경우 루비 베이스 내부에서도 줄바꿈할 수 있다 (그리고 동시에 연결된 루비 주석 박스 내부에서도 줄바꿈할 수 있다).

루비가 여러 줄에 걸쳐 줄바꿈될 때마다, 루비 주석은 각각 해당 루비 베이스와 함께 있어야 한다. 문자 사이 주석의 경우에도 루비 베이스와 그 주석 사이에서 줄이 줄바꿈되어서는 안 된다.

inter-character 루비 줄바꿈 가능 지점

줄바꿈 후에는 각 조각이 독립적으로 레이아웃되고, 각 조각 내에서 루비 정렬이 수행된다.

3.4.1. 베이스 사이에서 줄바꿈

일반적인 경우, 루비 베이스 박스와 루비 주석 박스는 내부 줄바꿈을 금지하도록 스타일 지정되며 강제 줄바꿈을 포함하지 않는다. (부록 A를 참조하라.) 이러한 경우 루비 컨테이너는 인접한 루비 베이스 사이에서만 줄바꿈할 수 있으며, 어떤 루비 주석도 해당 루비 베이스에 걸쳐 있지 않은 경우에만 가능하다.

루비 줄바꿈 가능 지점

서로 인접한 두 루비 베이스 사이에서 루비를 줄바꿈할 수 있는지는 베이스 텍스트에 대한 일반적인 줄바꿈 규칙에 의해 제어되며, 이는 루비 베이스가 서로 인접한 인라인 박스인 경우와 정확히 같다. (베이스 레벨의 소프트 줄바꿈 가능 지점을 결정할 때 주석은 무시한다.)

<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. 양방향 재정렬

Unicode 양방향 알고리즘은 서로 반대 방향성을 가진 문자 체계의 문자가 하나의 문단 안에서 혼합될 때 논리적으로 저장된 텍스트를 시각적 표시를 위해 재정렬한다.

루비 주석과 각각의 루비 베이스의 대응 관계를 유지하려면, 몇 가지 제한을 적용해야 한다:

• 루비 베이스 또는 루비 주석의 콘텐츠는 서로 연속된 상태를 유지해야 한다.
• 루비 주석은 해당 루비 베이스와 함께 재정렬되어야 한다.
• 하나의 루비 주석이 걸치는 모든 루비 베이스는 서로 연속된 상태를 유지해야 한다.

이를 위해,

• 모든 내부 루비 박스와 루비 컨테이너에는 Bidi 격리가 강제된다: unicode-bidi의 normal 및 embed 값은 isolate로 계산되고, bidi-override는 isolate-override로 계산된다.

  참고: 이는 암시적 bidi 재정렬이 루비 베이스 사이에서는 작동하지 않는다는 의미이므로, 작성자는 루비 컨테이너에 선언된 방향성이 실제로 해당 콘텐츠와 일치하도록 해야 한다.

• 레이아웃 중에 루비 세그먼트는 해당 루비 컨테이너의 direction 속성에 따라 루비 컨테이너 내에서 정렬된다.
• 세그먼트 내에서 병합된 것이 아닌 루비 베이스와 루비 주석은 세그먼트의 루비 베이스 컨테이너의 direction 속성에 따라 각각의 컨테이너 내에서 정렬된다. 병합된 주석은 해당 주석 컨테이너의 direction 속성에 따라 정렬되며, 이는 해당 주석 컨테이너 안의 인라인 박스 시퀀스인 것과 정확히 같다.

  참고: 이는 루비 주석 컨테이너의 direction 속성이 비병합 주석의 레이아웃을 위해서는 무시된다는 의미이다. 그러나 이 속성은 여전히 컨테이너의 자식에게 상속될 수 있으며, 그 결과 포함된 모든 루비 주석의 인라인 기본 방향에 영향을 줄 수 있다.

다른 인라인 레벨 콘텐츠와 마찬가지로, 내부 루비 박스의 bidi 재정렬은 줄바꿈 후에 일어나므로 콘텐츠는 논리적 순서에 따라 여러 줄에 나뉜다.

참고: 특정 주석 컨테이너에서 ruby-merge가 merge인 경우, 개별 주석에 bidi 격리를 강제하지 않아 이들을 함께 처리할 수 있도록 이 규칙을 약간 조정하는 것이 유용할 수 있다. 그러나 이는 구현에 복잡성을 추가하며, 이 상황을 처리해야 한다는 요구가 없는 상태에서는 정당화되기 어려워 보인다. 이 처리가 필요한 사람은 누구나 CSS 작업 그룹에 연락하는 것이 권장된다.

CSS의 양방향 텍스트에 대한 더 자세한 논의는 [CSS3-WRITING-MODES]을 참조하라.

3.6. 줄 간격

line-height 속성은 CSS에서 줄 사이의 간격을 제어한다. 줄의 인라인 콘텐츠가 line-height보다 짧으면, CSS Inline Layout 3 § 5 논리적 높이 및 줄 간 간격에 지정된 대로 콘텐츠 양쪽에 절반 행간이 추가된다.

일관된 줄 간격을 보장하기 위해, 루비가 있는 문서에서는 일반적으로 line-height가 텍스트 줄 사이의 루비를 수용할 만큼 충분히 크도록 한다. 따라서 일반적으로 루비 주석 컨테이너와 루비 주석 박스는 줄의 인라인 콘텐츠에서 측정되는 높이에 기여하지 않는다; 모든 정렬(vertical-align 참조)과 line-height 계산은 루비 베이스 컨테이너만 사용하여 수행되며, 이는 일반 인라인인 것과 정확히 같다.

그러나 루비 컨테이너에 지정된 line-height가 가장 위쪽 루비 주석 컨테이너의 위쪽에서 가장 아래쪽 루비 주석 컨테이너의 아래쪽까지의 거리보다 작으면, 루비 베이스 컨테이너의 적절한 쪽에 추가 행간을 더하여, 블록이 각각 이와 동일한 루비를 포함하는 세 줄로 구성된 경우에도 어떤 루비 컨테이너도 서로 겹치지 않도록 한다.

참고: 이것은 루비 주석이 줄 박스 내부에 유지되도록 보장하지 않는다. 단지 모든 줄의 간격이 동일하고 루비 주석의 양과 위치가 동등하다면, 서로 겹치지 않을 만큼 충분한 공간이 있도록 보장할 뿐이다.

작성자는 루비를 수용할 수 있도록 적절한 line-height와 padding을 보장해야 하며, 블록의 시작이나 끝, 그리고 문단의 기본 글꼴 크기보다 더 높은 인라인 레벨 콘텐츠 (예: 이미지, 인라인 블록 또는 vertical-align으로 이동된 요소)를 포함하는 줄에서는 특히 주의해야 한다.

루비 주석은 종종 줄 밖으로 넘친다; 작성자는 루비 주석이 있는 줄의 위/아래 콘텐츠에 루비를 위한 충분한 공간이 남도록 적절한 간격을 확보해야 한다.

참고: 루비가 정렬 및 줄 레이아웃에 미치는 영향을 더 세밀하게 제어하는 기능은 CSS Line Layout Module Level 3의 일부가 될 것이다. 현재는 아직 개발의 탐색 단계에 있으므로, 새로운 기능에 대한 설명에 아직 의존해서는 안 된다.

4. 루비 서식 속성

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

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

이 속성은 베이스를 기준으로 한 루비 주석의 위치를 제어한다. 각 값의 의미는 다음과 같다:

alternate

서로 다른 주석 레벨은 over와 under 사이를 번갈아 사용한다.

주석 컨테이너가 해당 루비 세그먼트의 첫 번째 주석 레벨이거나, 그 앞의 모든 레벨이 문자 사이인 경우, alternate는 단독으로 지정되거나 over와 함께 지정된 경우 over와 동일하게 동작하고, under와 결합된 alternate는 under와 동일하게 동작한다.

그렇지 않고, 이전 행간 주석 레벨이 over이면, alternate는 under처럼 동작하며, 그 반대도 마찬가지이다. (이 경우 alternate를 단독으로 지정하는지, over 또는 under와 함께 지정하는지는 차이가 없다.)

over

루비 주석은 베이스의 line-over 쪽에 나타난다.

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

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

under

루비 주석은 베이스의 line-under 쪽에 나타난다. 이는 표의문자를 사용하는 동아시아 문자 체계에서 사용되는 비교적 드문 설정이며, 교육용 텍스트에서 가장 쉽게 찾을 수 있다.

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

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

inter-character

둘러싸는 루비 컨테이너의 작성 모드가 세로이면, 이 값은 over와 동일한 효과를 가진다.

그렇지 않으면 루비 주석은 문자 사이 주석이 된다. 가로 텍스트에서는 주석이 베이스 오른쪽에 나타난다. 이로 인해 이 루비 주석 컨테이너의 루비 주석 자식의 writing-mode 계산값이 vertical-rl이 되도록 강제된다.

참고: 루비 주석 컨테이너 자체의 writing-mode 계산값은 영향을 받지 않는다. 이는 동일한 요소의 writing-mode, display, 및 ruby-position 속성의 계산값 사이에 순환 의존성이 생기는 것을 방지하기 위한 것이다.

이 값은 특히 대만에서 사용되는 번체 중국어의 특수한 경우를 위해 제공된다: 이 문맥에서 루비(보포모포 글리프로 구성됨)는 베이스 문자의 레이아웃이 가로인 경우에도 베이스 글리프의 오른쪽을 따라 세로로 나타난다:

가로 레이아웃에서 번체 중국어의 “보포모포” 루비 (명확성을 위해 루비 주석을 파란색으로 표시)

참고: 상속은 루비 레이아웃을 위해 생성된 익명 박스를 고려하지 않고 요소 트리에서 작동하므로, 문자 사이 주석을 사용할 때 작성자는 요소 기반 루비 주석 컨테이너, 익명 루비 주석, 그리고 그보다 더 아래의 하위 요소를 포함하는 마크업 패턴을 피하도록 주의해야 한다. 이러한 하위 요소는 루비 주석에서 작성 모드를 상속하지 않고, 루비 주석 컨테이너에서 상속하기 때문이다. 해당 루비 주석의 writing-mode는 vertical-rl로 변경되었다.

ruby { ruby-position: inter-character; }

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

위 마크업에서는 전체 “problematic annotation”을 감싸기 위해 <rtc> 요소의 자식으로 익명 루비 주석 박스가 생성된다. 이 박스는 ruby-position이 inter-character인 주석 컨테이너의 자식이므로, 해당 writing-mode는 예상대로 vertical-rl이 된다. 그러나 <em> 요소는 writing-mode를 <rtc> 요소에서 직접 상속하며, 이 요소에는 vertical-rl이 강제되지 않았다.

이 예에서는 명시적인 루비 주석 컨테이너 요소가 필요하지 않았으므로, 대신 루비 주석 요소를 사용하면 문제를 피할 수 있다:

<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

동일한 줄의 동일한 루비 세그먼트 내의 모든 루비 주석 박스는 해당 주석 컨테이너 안에서 인라인 박스로 연결되며, 연결된 모든 루비 베이스 박스에 걸치는 하나의 익명 루비 주석 박스 안에 레이아웃된다. 한 줄에 레이아웃될 때 이 스타일은 [JLREQ]의 “그룹 루비”와 유사하게 렌더링된다. 그러나 여러 줄에 걸쳐 줄바꿈될 때는 루비 주석이 각각의 루비 베이스와 함께 유지된다.

두 문자가 모두 한 줄에 들어가는 경우 다음 두 줄은 동일하게 렌더링된다:

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

그러나 두 베이스가 서로 다른 줄로 나뉘는 경우 두 번째 것은 ruby-position: separate와 동일하게 렌더링된다.

auto

사용자 에이전트는 각 루비 주석 박스를 대응하는 베이스 박스에 어떻게 렌더링할지 결정하기 위해 어떤 알고리즘이든 사용할 수 있으며, 모든 주석이 각각의 베이스 위에 들어가는 경우 결과가 separate와 동일하고, 일부 주석이 해당 베이스보다 넓은 경우에는 베이스 사이에 공간을 추가하지 않도록 어떤 방식으로든 공간을 공유하는 것을 목적으로 한다.

참고: 이 동작은 복합어를 위한 것으로, “루비란 무엇인가?”의 “숙어 루비”를 참조하라. [QA-RUBY]

이 유형의 루비를 렌더링하는 데에는 다양한 규칙이 있으며, 복잡도가 서로 다른 예는 숙어 루비 배치의 [SIMPLE-RUBY], 숙어 루비의 베이스 문자에 대한 위치 지정의 [JLREQ], 그리고 [JISX4051]의 4.12.3(c) 熟語ルビの処理를 참조하라.

이 중 가장 단순한 방식은 모든 루비 주석 박스가 대응하는 베이스 박스의 어드밴스 안에 들어가는 경우 separate로 렌더링하고, 그렇지 않은 경우 merge로 렌더링하는 것이다.

참고: 루비 주석이나 베이스 사이에서는 병합된 경우에도 bidi 격리로 인해 텍스트가 셰이핑되거나 합자를 형성하지 않는다. § 3.5 양방향 재정렬 및 CSS Text 3 § 7.3 요소 경계를 가로지르는 셰이핑을 참조하라.

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

이 속성은 다양한 루비 박스의 콘텐츠가 해당 박스를 정확히 채우지 않을 때 박스 내부에서 텍스트를 어떻게 배분할지를 지정한다. ruby-align에 의해 배분되는 공간은 양쪽 맞춤으로 인해 배분되는 모든 공간과 관련이 없으며 독립적이라는 점에 유의하라.

문자 사이 주석의 경우, 이 속성은 박스 자체의 정렬에도 영향을 줄 수 있다 (§ 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 값은 그럼에도 라틴 문자나 보포모포 문자를 가운데 정렬하게 된다:

space-around 및 space-between 루비 배분에서는 비CJK 루비 텍스트가 가운데 정렬된다

공간 배분은 text-justify를 통해 제어할 수 있다. [CSS-TEXT-3]

ruby-merge: merge로 인해 걸치는 경우를 제외하고, 루비 베이스와 루비 주석의 콘텐츠는 해당 박스의 ruby-align 값을 기준으로 박스 내부에서 정렬된다. 병합된 주석의 콘텐츠는 ruby-align의 주석 컨테이너 값을 기준으로 루비 주석 컨테이너 내부에서 정렬되며, 개별 루비 주석의 ruby-align 값은 무시한다.

병합된 주석으로 인해 루비 세그먼트가 더 넓어지면 어떻게 되는가? 현재 지정된 대로 해당 주석이 각 베이스에 걸쳐 있는 것처럼 각 베이스가 늘어나게 하는가? 이 방식으로는 예를 들어 병합된 주석이 더 긴 경우 여러 베이스를 가진 베이스 컨테이너에서 텍스트를 가운데 정렬할 수 없다. 대신 ruby-merge가 베이스 컨테이너에도 적용되도록 허용해야 할 수도 있지만, 그러려면 하나의 베이스가 여러 주석에 걸칠 수 있도록 허용하거나 (베이스는 병합되지만 일부 주석 레벨은 병합되지 않은 경우), 베이스가 병합되면 모든 주석 레벨도 함께 병합되어야 한다고 요구해야 한다.

ruby-merge가 auto일 때 콘텐츠를 정렬하는 방식은 사용자 에이전트가 결정하지만, 모든 주석이 각각의 베이스 위에 들어가는 경우에는 ruby-merge: separate의 방식과 동일해야 한다.

4.4. 루비 텍스트 장식

텍스트 장식은 베이스 텍스트에서 주석으로 전파되지 않는다.

루비의 조상에 텍스트 장식이 지정되면, 긴 주석을 수용하기 위해 루비 베이스 콘텐츠의 양쪽에 추가된 모든 공간을 포함하여 루비 베이스 컨테이너의 전체 콘텐츠 영역에 걸쳐 그려진다. 루비 베이스 자체에 텍스트 장식이 지정되면, 이 추가 공간은 장식되지 않는다. 이는 해당 박스 자체에 텍스트 장식을 직접 지정할 때 박스 자체의 패딩이 장식되지 않는 방식과 유사하다. [CSS3-TEXT-DECOR]

텍스트 장식은 루비 베이스 컨테이너와 루비 주석 컨테이너에 직접 지정할 수 있다: 이 경우 각각 컨테이너의 모든 베이스 또는 주석으로 전파되며, 연속성을 위해 그 사이에도 그려진다.

베이스 텍스트에 적용된 윗줄 및 밑줄 장식과 잠재적인 충돌을 피하기 위해 루비 주석의 위치를 조정할 수 있다. 일관된 글꼴 크기와 기준선 정렬을 사용하는 기본적인 경우, 밑줄 또는 윗줄은 베이스 레벨과 해당 쪽의 모든 주석 사이에 배치된다.

이 절에는 인접한 베이스/주석의 콘텐츠 사이에 장식을 그리는 것에 대한 설명이 좀 더 필요하다. 해당 박스가 열만큼 넓은지 여부에 따라 달라진다.

5. 가장자리 효과

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

ruby-overhang 속성은 루비 주석이 루비 컨테이너 밖의 인접한 텍스트와 겹칠 수 있는지 여부를 제어한다. 각 값의 의미는 다음과 같다:

auto

루비 주석 컨테이너가 대응하는 루비 베이스 컨테이너보다 길면, 루비 주석 컨테이너는 인접한 박스와 부분적으로 겹칠 수 있다.

돌출할지 여부, 돌출하는 정도 및 돌출 조건은 UA가 결정한다.

none

루비 주석 컨테이너는 절대로 루비 주석 컨테이너를 넘어 확장할 수 없다.

루비 주석의 돌출이 허용되지 않으면, 루비 컨테이너는 전통적인 인라인 박스처럼 동작한다. 즉, 자체 콘텐츠만 해당 경계 안에 렌더링되고 인접한 요소는 박스 경계를 넘지 않는다:

텍스트가 인접한 텍스트 위로 돌출되는 것이 허용되지 않는 단순 루비

그러나 루비 주석 컨테이너의 돌출이 허용되면, 인접한 콘텐츠가 루비 컨테이너 박스와 겹칠 수 있으며, 그 결과 해당 루비 주석이 주변 인라인 레벨 콘텐츠의 위/아래에 부분적으로 렌더링될 수 있다. 돌출은 인접한 콘텐츠와 루비 컨테이너의 주석 박스 또는 겹치는 베이스의 콘텐츠 사이에 충돌이 발생하지 않는 범위에서만 허용된다.

텍스트가 인접한 텍스트 위로 돌출되는 것이 허용되는 단순 루비

참고: 루비 베이스와 관련된 루비 주석이 다른 루비 베이스 위로 돌출할 수 있는지 여부는 ruby-merge로 제어한다.

일반적으로 베이스 또는 주석 콘텐츠의 정렬은 돌출 동작의 영향을 받지 않는다: 정렬과 공간 배분(ruby-align 참조)은 돌출 허용 여부와 관계없이 동일한 방식으로 수행되며, 겹침에 사용할 수 있는 공간을 결정하기 전에 계산된다. 그러나 UA는 주석과 베이스의 공간 배분 및/또는 정렬을 결정할 때 허용된 돌출을 고려할 수 있다.

일부 경우에는 돌출이 정렬과 상호 작용하는 것 같다; 나중에 이를 조사해야 할 수도 있다.

5.2. 줄 가장자리 정렬

해당 루비 베이스보다 긴 루비 주석 박스가 줄의 시작 또는 끝 가장자리에 있을 때, 사용자 에이전트는 줄 가장자리에 닿는 루비 주석의 한쪽을 베이스의 대응하는 가장자리에 강제로 정렬할 수 있다. 이러한 유형의 정렬은 [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;  /* [[CSS-FONTS-3]] 참조 */
  text-justify: ruby;             /* [[CSS-TEXT-4]] 참조 */
  text-emphasis: none;            /* [[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%; }               /* 보포모포 */

참고: 작성자는 위 규칙을 사용해서는 안 된다: 루비 레이아웃을 지원하는 UA는 이를 기본적으로 제공해야 한다.

사용자가 제어하는 “최소 글꼴 크기” 기능을 구현하는 UA는 루비 주석에 대해 해당 최소값을 낮추는 것을 고려해야 한다.

A.2 루비 주석 인라인화

다음은 HTML 및 XHTML 루비 마크업을 인라인 주석으로 렌더링하기 위한 샘플 스타일 시트를 나타낸다:

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

A.3 괄호 생성

안타깝게도 Selectors는 텍스트 노드와 매칭할 수 없으므로, HTML에서 가능한 모든 루비 마크업 패턴에 대해 괄호가 없는 루비 주석에 자동으로 정확하게 괄호를 추가하는 규칙을 CSS로 표현할 수 없다. (이는 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. 용어집

보포모포 또는 주인 푸하오 (중국어: ㄅㄆㄇㄈ, 注音符號, 또는 注音符号)

중국어, 특히 표준 만다린어에서 음성 표기에 사용하기 위해 개발된 문자와 성조 기호. 이들은 흔히 루비 주석에 사용되지만, 반드시 루비 주석에만 사용되는 것은 아니다.

중국어에서 음성 문자 사이 주석으로 사용되는 보포모포의 예

보포모포 성조 기호는 (메모리상에서) 각 보포모포 음절의 끝에 나타나는 간격 문자이다. 일반적으로 다른 보포모포 문자의 오른쪽 또는 위쪽에 별도의 트랙으로 표시되며, 성조 기호의 위치는 음절의 문자 수에 따라 달라진다. 그러나 중성 성조 기호는 보포모포 옆이 아니라 보포모포 앞에(그리고 같은 줄에) 배치된다.

참고: 사용자 에이전트와 글꼴 하위 시스템은 텍스트를 표시할 때—텍스트가 루비 주석에 있든 일반 인라인 콘텐츠에 있든— 보포모포 성조 기호를 포함한 글리프의 올바른 상대적 정렬과 위치 지정을 보장할 책임이 있다. 이러한 글리프 배치는 CSS 루비 레이아웃의 기능이 아니다.

보포모포 문자는 Bopomofo Unicode 스크립트에 속하며(현재 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의 루비 주석에 font-size: 30%를 적용하는 규칙에 zh-Hant를 추가했다.
• UA 기본 스타일 시트에 text-justify: ruby를 추가했다. (이슈 771 이슈 779)

2020년 4월 29일 WD 이후의 변경 사항

• ruby-position에 alternate 키워드를 추가하고 이를 초기값으로 지정했다.
• ruby-merge의 collapse 값을 merge로 이름을 변경했다. (이슈 5004)
• visibility: collapse가 자동 숨김 주석과 동일한 방식으로 주석을 명시적으로 숨기도록 정의했다. (이슈 5927)
• 다양한 루비 display 유형에 어떤 속성이 적용되는지를 더 정확하게 지정하고 (§ 3.3 루비 박스 스타일 지정) 달리 지정하지 않는 한 루비, 루비 베이스 및 루비 주석 박스가 일반 인라인 박스와 동일하게 동작하도록 정의했다. (이슈 4935, 이슈 4936, 이슈 4976, 이슈 4979)
• § 3 루비 레이아웃을 대폭 개편하여 행간 및 문자 사이 루비 레이아웃과 이들이 ruby-align과 상호 작용하는 방식을 더 명확하게 정의했다. 문자 사이 루비는 이제 인라인 블록 레이아웃을 기반으로 하며, 행간 루비와의 상호 작용도 이제 명확하게 정의된다. 행간 루비의 인라인 축 공간 배분은 범위 주석에 대해 더 정확하게 정의되었다 (max-content 그리드 트랙을 모델로 함).
• 중첩 루비의 베이스 및 주석 컨테이너를 행간 루비의 블록 축 크기 지정에 고려하여 중첩 루비의 처리 방식을 정의했다. (이슈 4986, 이슈 4980)
• ruby-align의 동작 방식을 더 정확하게 지정했다.
• 루비 돌출이 루비 콘텐츠 정렬에 영향을 주지 않아야 한다는 요구사항을 완화하고, 루비 콘텐츠가 인접한 콘텐츠와 충돌해서는 안 된다는 요구사항을 추가했다.
• bidi 재정렬과 병합된 주석의 상호 작용을 명확히 했다. (§ 3.5 양방향 재정렬)
• 전체적으로 규범적 문구를 더 엄격하게 다듬었다.
• 소개, 예제 및 기타 비규범적 텍스트를 개선했다.

참고: 아직 많은 공개 이슈가 남아 있으며, 의견 처리 현황 및 GitHub에서 추적되는 최신 이슈를 참조하라.

2014년 8월 5일 WD 이후의 변경 사항

• 루비 돌출 동작을 기본적으로 제어할 수 있도록 ruby-overhang: auto | none을 다시 추가했다.
• 인라인화를 CSS Display 모듈과 일치시켰다.
• 루비/강조 표시가 밑줄/윗줄과 충돌하는 경우 UA가 이를 이동할 수 있도록 허용했다.
• ruby-merge의 계산값이 collapse인 경우 자동 숨김을 비활성화했다.
• 기본 스타일 시트를 조정했다.
• 텍스트 장식과의 상호 작용을 정의하는 절을 추가했다.
• ruby-position의 right 및 left 값을 다음 레벨로 연기했다.
• 루비 페어링 규칙을 변경하여 익명 주석(즉, rtc에 직접 포함된 콘텐츠)에만 범위 지정을 적용하도록 했다.
• 초과하는 베이스/주석을 자동 생성된 빈 익명 베이스/주석과 페어링하도록 했다.
• ruby-position을 ::first-line에 적용했다. (이슈 2998)
• 루비 박스와 콘텐츠의 컨테이닝 블록이 다른 인라인 박스의 경우와 마찬가지로 가장 가까운 블록 컨테이너임을 명확히 했다.
• 잘못된 부모를 가진 내부 표 요소의 처리 방식을 명확히 했다.
• 루비 컨테이너, 베이스 베이스 컨테이너 및 주석 컨테이너의 앞/뒤 공백을 제거하여 페어링을 방해하지 않도록 했다.
• 빈 베이스 및 주석 컨테이너의 레이아웃 효과를 정의했다.
• 루비 베이스 컨테이너와 루비 주석 컨테이너에서는 마진, 패딩 및 테두리를 비활성화했다 (단, 루비 베이스와 루비 주석에서는 비활성화하지 않음).

2013년 9월 19일 WD 이후의 변경 사항

• 익명 박스 생성 규칙과 공백 처리 규칙을 다시 작성하고, 익명 공백 박스의 특수한 페어링을 정의했다.
• 중첩 루비 처리를 페어링에서 제외했다. (크기 지정/레이아웃을 통해 처리할 예정.)
• 루비 구조의 bidi 레이아웃을 정의했다.

2011년 6월 30일 WD 이후의 변경 사항

ruby-span 및 rbspan에 대한 언급을 제거했다.

HTML 루비에서는 명시적 범위 지정 대신 암시적 범위 지정을 사용한다. 이는 일부 병적인 양면 범위 지정 사례를 처리할 수 없지만, 현재로서는 이를 지원해야 한다는 요구사항이 없는 것으로 보인다. (완전한 복합 XHTML Ruby를 지원하는 구현의 경우, 표의 셀 범위를 처리하는 것과 같은 방식으로 마크업에서 범위 지정을 암시할 수 있다. 레벨 1에 이를 제어하는 기능을 포함할 필요는 없어 보인다.)

ruby-overhang 및 ruby-align: line-end를 레벨 2로 연기했다.

다소 복잡한 고급 기능이다. 이 동작을 UA 정의로 만들고 허용 가능한 선택지의 몇 가지 예를 제공하는 것이 제안되었다.

display: rp를 요청한 이슈를 닫았다: display: none을 사용한다.

국제화 WG에서 rp 요소에 대한 display 값을 요청하는 이슈를 추가했다. 이 요소들은 ruby가 루비로 표시될 때 숨겨져야 한다. 그러나 이는 이미 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 값은 동작을 결정하기 위해 콘텐츠를 검사하는 데 의존했지만; 표준 양쪽 맞춤 규칙 (CJK 사이에는 간격을 허용하지만 라틴 문자 사이에는 허용하지 않음)과 함께 space-around을 사용하기만 하면 이를 피할 수 있다. distribute-letter 및 distribute-space을 space-between 및 space-around으로 대체하여 [CSS-FLEXBOX-1] 및 [CSS-ALIGN-3]의 배분 키워드와 일관되게 하고, text-justify: distribute 정의와의 모든 연결을 피했다.

숙어 렌더링을 제어하기 위해 ruby-merge 속성을 추가했다.

이는 구조적 효과가 아니라 스타일 효과이다; 이전 모델은 이를 구조적인 것으로 가정하여 마크업을 변경해 처리할 것을 제안했다. :(

ruby-position에서 inline을 제거했다.

이는 모든 루비 관련 요소에 display: inline을 사용하여 구현할 수 있으며, 부록 A를 참조하라.

기본 스타일 규칙을 추가했다

국제화 WG의 요청에 따른 것이다.

익명 박스 생성 규칙을 작성했다

그리고 베이스와 주석의 페어링을 정의했다. 이제 제안된 모든 복잡한 HTML 루비 마크업 조합을 처리할 수 있을 것이다.

루비 레이아웃을 정의했다

공간 배분, 공백 처리, 줄바꿈, 줄 쌓기 등을 상세하게 정의했다. bidi에 대해서는 공개 이슈를 남겨 두었다.