CSS 인라인 레이아웃 모듈 레벨 3

1. 소개

이 모듈은 인라인 레이아웃을 정의하며, 혼합된 텍스트와 인라인 레벨 박스를 컨테이너 내부에서 배치하는 CSS 모델입니다. 또한 각 줄 내에서 이러한 콘텐츠의 블록 축 정렬 및 크기 제어를 정의합니다. 드롭캡 및 유사한 첫글자 스타일링을 위한 특수 레이아웃 모드도 추가합니다.

참고: 줄 바꿈, 정렬, 그리고 인라인 레벨 콘텐츠의 인라인 축 배치 관련 기타 측면은 CSS Text Module에서 다룹니다.

여기서의 레이아웃의 많은 부분은 폰트 메트릭에 의존합니다. 관련 메트릭은 라틴/키릴/그리스 및 CJK에 대해 OpenType에 존재하지만, 다른 많은 문자 시스템에는 없습니다. 예를 들어, 히브리어의 시각적 상단 메트릭은 OpenType 테이블에 없습니다. 이 모듈이 전 세계적으로 잘 작동하려면, 모든 문자 시스템에 대해 관련 메트릭을 폰트가 제공해야 하며, 이를 위해서는 OpenType이 그러한 메트릭을 허용해야 하고 폰트 디자이너가 정확한 숫자를 제공해야 합니다. 자세한 내용은 이슈 및 협력 성명 참고.

1.1. 모듈 상호작용

이 모듈은 [CSS2] 10.8절에서 정의된 CSS 인라인 레이아웃 모델과 기능을 대체하고 확장합니다.

1.2. 값 정의

이 명세는 CSS 속성 정의 관례를 [CSS2]에서 따르며, 값 정의 문법을 [CSS-VALUES-3]에서 사용합니다. 이 명세에서 정의되지 않은 값 타입은 CSS Values & Units [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과의 조합으로 이러한 값 타입 정의가 확장될 수 있습니다.

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

2. 인라인 레이아웃 모델

인라인 레이아웃에서, 텍스트와 인라인 레벨 박스가 섞인 재귀적 스트림이 인라인 포맷팅 컨텍스트를 이루며, 블록 컨테이너 내에서 fragmenting되어 라인 박스 스택으로 레이아웃됩니다. 각 라인 박스 내에서 인라인 레벨 박스들은 서로 정렬되며, 블록 축을 기준으로 정렬됩니다. 일반적으로 이 정렬은 그 텍스트의 기준선을 따릅니다.

어떤 블록 컨테이너가 인라인 레벨 콘텐츠를 직접 포함하면—​예를 들어 인라인 박스, 원자적 인라인, 텍스트 시퀀스 등—​자신의 콘텐츠를 인라인 포맷팅 컨텍스트로 설정하여 인라인 레이아웃으로 배치합니다. 블록 컨테이너의 콘텐츠 엣지는 컨테이닝 블록을 형성하며, 이에 포함된 각 인라인 레벨 박스는 인라인 포맷팅 컨텍스트 내에서 참여합니다.

블록 컨테이너는 또한 루트 인라인 박스를 생성하며, 이는 모든 인라인 레벨 콘텐츠를 담는 익명 인라인 박스입니다. (즉, 인라인 포맷팅 컨텍스트의 모든 텍스트는 인라인 박스에 직접 포함되며, 그 박스가 루트 인라인 박스이거나 자식일 수 있습니다.) 루트 인라인 박스는 부모 블록 컨테이너로부터 상속받지만, 스타일을 지정할 수는 없습니다.

인라인 포맷팅 컨텍스트에서 콘텐츠는 인라인 축을 따라 배치되며, 유니코드 양방향 알고리즘과 그 제어자 [CSS-WRITING-MODES-3]에 따라 순서가 정해지고, [CSS-TEXT-3]의 조판 제어에 따라 분배됩니다. 인라인 축 마진, 테두리, 패딩은 인라인 레벨 박스들 사이에 적용되며(마진은 겹치지 않음), 단일 줄의 인라인 레벨 콘텐츠를 이루는 박스들을 감싸는 사각형 영역이 라인 박스라 합니다.

참고: 라인 박스, 인라인 박스, 인라인 레벨 박스는 서로 다른 개념입니다! 박스 타입과 관련 용어에 대한 자세한 논의는 [CSS-DISPLAY-3] 참고.

2.1. 라인 박스의 레이아웃

라인 박스는 필요에 따라 인라인 레벨 콘텐츠를 담기 위해 인라인 포맷팅 컨텍스트 내에서 생성됩니다. 인라인 박스가 논리적 너비를 넘거나, 라인 박스에 강제 줄 바꿈이 포함되면, CSS Text 3 § 5 줄 바꿈 및 단어 경계 참고, 여러 fragment로 분할되어 여러 라인 박스에 나뉘어 배치됩니다. 컬럼 박스가 다단 레이아웃 [CSS-MULTICOL-1]에서 생성되듯, 라인 박스도 분할 컨테이너로서 포맷팅 컨텍스트가 생성하며, CSS 박스 트리에는 포함되지 않습니다.

참고: 인라인 박스는 양방향 텍스트 처리로 인해 동일한 라인 박스 내에서 여러 fragment로 분할될 수 있습니다. 자세한 내용은 [CSS-WRITING-MODES-3] 참고.

라인 박스는 블록 컨테이너 박스의 블록 흐름 방향에서 직접적인 콘텐츠로 쌓이고, align-content [CSS-ALIGN-3]에 따라 컨테이너 내에서 정렬됩니다. 즉, 인라인 포맷팅 컨텍스트는 라인 박스의 스택으로 구성됩니다. 라인 박스는 분리 없이(다른 곳에서 명시된 경우 제외, 예: 플롯 clearance 등) 쌓이며, 결코 겹치지 않습니다.

일반적으로, line-left 엣지는 라인 박스의 line-left 엣지가 컨테이닝 블록의 엣지와 닿고, line-right 엣지는 line-right 엣지가 컨테이닝 블록의 엣지와 닿아, 라인 박스의 논리적 너비는 내부 논리적 너비와 같아집니다(즉 블록 컨테이너의 콘텐츠 박스). 단, 플로팅 박스나 첫글자 박스가 컨테이닝 블록 엣지와 라인 박스 엣지 사이에 올 수 있으며, 이로 인해 해당 라인 박스의 논리적 너비가 줄어듭니다. (CSS 2.1 명세 § visuren#inline-formatting/CSS 2.1 명세 § visuren#floats 및 § 7 첫글자 참고)

라인 박스의 논리적 높이는 그 내용이 블록 축 정렬된 후 맞춰집니다. 이 높이는 line-height와 line-fit-edge로 제어됩니다. 블록 컨테이너의 첫/마지막 라인 박스는 text-box-trim으로 추가로 다듬어질 수 있습니다.

2.2. 라인 박스 내부 레이아웃

위에서 설명한대로, UA는 인라인 레벨 박스를 라인 박스 스택에 흐르게 합니다. 각 라인 박스 내의 레이아웃은 각 박스 fragment와 라인 박스를 독립적으로 크기와 위치를 정하는 방식으로 수행됩니다:

1. 기준선 정렬: 흐름내 인라인 레벨 박스는 라인 박스 내에서 블록 축 기준으로 dominant-baseline 및 vertical-align에 따라 서로 정렬됩니다. 이를 기준선 정렬이라 합니다. baseline-shift가 line-relative 값인 경우, 라인 박스 높이가 최소가 되도록 정렬된 것으로 간주합니다.

2. 콘텐츠 크기 기여 계산: 각 레이아웃 경계(즉, 크기 기여 값)는 인라인 레벨 박스별로 라인 박스 내에서 계산합니다:

   • 원자적 인라인(예: 치환 요소, 인라인 블록)의 경우: margin box가 기준입니다.
   • 루트 인라인 박스와, 인라인 박스가 line-fit-edge: leading일 경우: line-height의 사용값에서 마진/테두리/패딩을 무시하고 계산합니다; § 5.3 인라인 박스의 논리적 높이 기여(“레이아웃 경계”) 계산 참고.
   • 그 외 인라인 박스: line-fit-edge 메트릭에서 파생되며, 마진/테두리/패딩을 포함; § 5.3 인라인 박스의 논리적 높이 기여(“레이아웃 경계”) 계산 참고.

3. 라인 박스 크기 산정: 라인 박스의 논리적 높이는 모든 레이아웃 경계를 정확히 포함하도록 산정됩니다.

4. 콘텐츠 위치 지정: 루트 인라인 박스의 정렬된 서브트리와 line-relative 값은 baseline-shift에 대해 라인 박스 내에 위치합니다.

   나머지 콘텐츠보다 키가 큰 top/bottom/center 정렬 박스에 대해 무엇을 해야 할지 정의 필요.

참고: 빈 인라인 박스도 역시 마진, 패딩, 테두리, line-height 값을 가지므로, 콘텐츠가 있는 박스와 마찬가지로 계산에 영향을 줍니다.

2.3. 팬텀 라인 박스

라인 박스가 텍스트도 없고, 보존된 공백도 없고, 인라인 박스에 인라인 축 마진, 패딩, 테두리가 모두 0이고, 그 외 흐름내 콘텐츠(예: 원자적 인라인이나 루비 주석)가 없으며, 강제 줄 바꿈으로 끝나지 않으면 팬텀 라인 박스가 됩니다. 이런 박스는 자식 콘텐츠(예: 절대 위치 박스)의 위치 산정 시 0-높이 라인 박스로 취급해야 하며, 라인 박스 및 그 흐름내 콘텐츠를 그 외 모든 레이아웃 및 렌더링 목적에서는 존재하지 않는 것으로 취급해야 합니다.

Firefox는 팬텀 라인 박스 내부의 인라인 박스에 outline을 적용할 수 있어 포커스링을 표시합니다. 다른 브라우저처럼, 요소를 보이게 할 수 있는 나머지 속성(예: box-shadow)은 무시되는 것으로 보입니다.

2.4. 페인팅 순서

포지션 박스에 대해 명시된 부분을 제외하고([CSS-POSITION-3] 참고), 인라인 레벨 박스는 문서 순서대로 페인팅됩니다; z-index 속성은 일반적으로 적용되지 않습니다.

3. 기준선 및 정렬 메트릭

3.1. 기준선 소개

기준선(baseline)은 인라인 축을 따라 라인 박스 내에 그려지는 선으로, 개별 글리프들이 이 선에 맞춰 정렬됩니다. 기준선은 폰트의 글리프 디자인에 영향을 주며 (예를 들어, 대부분 알파벳 글리프의 바닥이 알파벳 기준선에 맞춰짐), 서로 다른 폰트나 폰트 크기의 글리프를 조판할 때 정렬을 안내합니다.

서로 다른 문자 시스템은 서로 다른 기준선을 선호합니다.

잘 만들어진 폰트는 기준선 테이블을 포함하고, 이 테이블은 폰트의 디자인 좌표 공간에서 하나 이상의 기준선 위치를 나타냅니다. (디자인 좌표 공간은 폰트 크기에 따라 스케일됩니다.)

기준선 테이블은 폰트의 속성이며, 다양한 기준선의 위치는 폰트의 모든 글리프에 적용됩니다.

정렬을 위해 수평 및 수직 텍스트에 대해 서로 다른 기준선 테이블을 제공할 수 있습니다. UA는 수직 타이포그래픽 모드에서는 수직 테이블을, 그 외에는 수평 테이블을 사용해야 합니다.

참고: 폰트에는 각 축에 대해 둘 이상의 기준선 테이블이 있을 수 있습니다; UA는 font-language-override 및 콘텐츠 언어를 고려해 적절한 테이블을 선택해야 합니다.

3.2. 기준선 및 메트릭

CSS는 기준선으로 아래의 텍스트 기반 메트릭을 사용하며, 인라인 레이아웃에서 정렬·박스 크기 산정·첫글자 레이아웃 등에 활용합니다.

CSSWG는 각 속성(dominant-baseline, alignment-baseline, text-box-edge, line-fit-edge, initial-letter-align)에 필요한 기준선 값이 무엇인지 알고 싶어합니다. 불필요한 값은 삭제하고, 추가가 필요한 값은 보완해야 합니다. 자세한 내용은 Issue 859 참고.

알파벳(alphabetic)

라틴, 키릴, 그리스 등 많은 문자에서 사용되며, 대부분(“m”, “Ш”, “Δ” 등)의 문자 바닥에 대응합니다. 폰트 디자인 좌표계에서 0으로 표현되는 경우가 많으며, OpenType에서는 romn, TrueType AAT에서는 bsln 값 0에 할당됩니다.

대문자 높이(cap-height)

라틴, 키릴, 그리스 등에서 대문자(“T”, “Б”, “Σ”)의 윗부분에 해당합니다. OpenType의 sCapHeight로 계산됩니다.

x-높이(x-height)

라틴, 키릴, 그리스 등에서 짧은 소문자(“m”, “л”, “α”)의 윗부분에 해당합니다. OpenType의 sxHeight로 계산됩니다.

x-중앙(x-middle)

알파벳(alphabetic)과 x-높이(x-height) 기준선의 중간 지점.

표의문자 위(ideographic-over)

한자(한/한글/가나) 텍스트의 line-over 디자인 엣지에 대응. OpenType의 idtp에 할당.

표의문자 아래(ideographic-under)

한자(한/한글/가나) 텍스트의 line-under 디자인 엣지에 대응. OpenType의 ideo에 할당.

중앙(central)

표의문자 중앙 기준선에 대응, 표의문자 아래와 표의문자 위 기준선의 중간. TrueType AAT의 bsln 값 1에 할당.

표의문자 잉크 위(ideographic-ink-over)

한자(한/한글/가나) 텍스트의 line-over 잉크 엣지에 대응. OpenType의 icft에 할당.

표의문자 잉크 아래(ideographic-ink-under)

한자(한/한글/가나) 텍스트의 line-under 잉크 엣지에 대응. OpenType의 icfb에 할당.

행잉(hanging)

티베트 등 강한(완전한 것은 아님) 상단 엣지를 가진 단일자음 문자에서 문자가 "매달린" 듯한 행잉 기준선에 대응. OpenType의 hang, TrueType AAT의 bsln 값 3에 할당.

수학(math)

수학 문자 디자인의 중심 기준선에 대응. OpenType의 math, TrueType AAT의 bsln 값 4에 할당.

텍스트 위(text-over)

line-over 엣지에 쓰이는 메트릭에 대응, 인라인의 콘텐츠 박스에서 [CSS2] 기준.

텍스트 아래(text-under)

line-under 엣지에 쓰이는 메트릭에 대응, 인라인의 콘텐츠 박스에서 [CSS2] 기준.

em-위(em-over)

상승(ascent) 개념 기준선을 1em 간격이 되도록 정규화한 것. A.1: Em-over 및 Em-under 계산 참고.

em-아래(em-under)

하강(descent) 개념 기준선을 1em 간격이 되도록 정규화한 것. A.1: Em-over 및 Em-under 계산 참고.

참고: 이 메트릭은 광학적 디자인 메트릭이므로, 실제 글리프 윤곽선과 정확히 일치하지 않을 수 있습니다.

일반적으로 이 메트릭은 적절한 폰트에서 가져오지만, 누락되었거나 박스에서 파생해야 할 경우 합성해야 하며, § 3.3 글리프와 박스의 기준선 및 부록 A: 정렬 메트릭 합성 참고.

3.2.1. 상승 및 하강 메트릭

CSS는 모든 폰트가 기준선 위의 특징적인 높이(상승 메트릭(ascent metric))와 기준선 아래의 특징적인 깊이(하강 메트릭(descent metric))를 지정하는 폰트 메트릭을 가진다고 가정하며, CSS는 이를 인라인 포맷팅 컨텍스트에서 텍스트와 박스의 레이아웃에 사용합니다. 이 값은 폰트 전체의 메트릭이며, 개별 글리프의 ascender/descender와 일치할 필요는 없습니다.

참고: OpenType 또는 TrueType 폰트를 사용하는 구현은, 폰트의 OS/2 테이블에서 sTypoAscender와 sTypoDescender를(현재 요소의 폰트 크기에 맞게 스케일한 후) CSS 레이아웃의 상승 메트릭과 하강 메트릭으로 사용하는 것이 권장됩니다. 이 메트릭이 없으면 HHEA 테이블의 "Ascent"와 "Descent"를 사용해야 합니다.

3.2.2. 행 간격 메트릭

폰트 포맷은 폰트 권장 "라인 갭" 또는 "외부 리딩(external leading)" 메트릭을 허용할 수 있습니다. 이 메트릭은 라인 갭 메트릭(line gap metric)이라 하며, 라인 박스의 논리적 높이 산정에 포함될 수 있습니다. line-height가 normal일 때, § 5.3 인라인 박스의 논리적 높이 기여(“레이아웃 경계”) 계산 참고.

참고: OpenType의 경우 라인 갭 메트릭은 sTypoLineGap 또는 hhea.lineGap에서 찾을 수 있습니다.

UA는 라인 갭 메트릭을 0으로 바닥 처리(floor)해야 합니다.

3.3. 글리프와 박스의 기준선

각 폰트, 글리프, 인라인 레벨 박스는 각 기준선 타입에 대해 기준선 좌표를 가진다고 가정하며, 이 기준선의 위치는 블록 축상에서의 위치를 나타냅니다. 이러한 기준선의 집합을 기준선 집합(baseline set)이라 합니다. 이 집합에서 박스나 글리프가 정렬 컨텍스트 내에서 정렬에 사용되는 기준선이 정렬 기준선(alignment baseline)입니다; 자신의 콘텐츠를 내부적으로 정렬할 때 사용하는 기준선은 우세 기준선(dominant baseline)입니다.

개별 글리프의 경우, 기준선 집합은 폰트의 기준선 테이블에서 가져옵니다. 인라인 박스의 경우, 실제로 해당 폰트의 글리프를 포함하고 있는지 여부와 관계없이 첫 번째 사용 가능한 폰트에서 가져옵니다. 폰트에서 필요한 메트릭이 없으면, UA는 메트릭을 합성해야 하며, A.2: 텍스트용 기준선(및 기타 폰트 메트릭) 합성 참고.

기타 박스의 경우, 기준선 집합은 baseline-source 및 해당 포맷팅 컨텍스트의 규칙에 따라 콘텐츠에서 명목상 파생됩니다. 원자적 인라인 박스가 기준선 집합이 없고, 인라인 포맷팅 컨텍스트의 인라인 축에 없으면, 정렬 기준선(alignment baseline)을 margin box에서 합성해야 하며, A.3: 원자적 인라인 기준선 합성 참고.

4. 기준선 정렬

대부분의 CSS 포맷팅 컨텍스트는 박스를 컨테이너 엣지 기준으로 정렬하지만, 인라인 레이아웃은 박스끼리 블록 축에서 각자의 기준선을 기준으로 서로 정렬합니다.

좀 더 구체적으로, (line-relative shift value를 사용하지 않는 한) 각 글리프 또는 인라인 레벨 박스는 블록 축에서 자신의 정렬 기준선(alignment baseline)을 부모의 해당 기준선과 맞추도록 배치하며, 이후 정렬 이후 이동(post-alignment shift)에 따라 위치가 변경될 수 있습니다.

참고: 기준선 정렬은 항상 해당 기준선끼리 맞춥니다: 알파벳은 알파벳, 행잉은 행잉, 수학은 수학 등.

박스를 정렬할 때 박스의 정렬 기준선은 alignment-baseline과 baseline-source 값에 따라 선택됩니다 (단축 속성 vertical-align 참고), 기본값은 부모의 dominant-baseline과 일치합니다. 글리프의 경우, 정렬 기준선은 항상 부모의 우세 기준선(dominant baseline)에 따라 결정됩니다.

다음은 샘플 마크업입니다:

<p><span class="outer">Ap <span class="inner">ਜੀ</span></span></p>

그리고 다음 스타일 규칙:

.inner { font-size: 75%; }

부모(.outer)와 자식(.inner)의 baseline set이 폰트 크기 차이 때문에 일치하지 않습니다. 자식 박스는 부모와 알파벳 기준선을 맞춰 정렬됩니다.

여기서 알파벳 기준선이 사용된 이유는 기본적으로 박스의 정렬 기준선이 부모의 우세 기준선과 일치하며, 수평 타이포그래픽 모드에서는 우세 기준선 자체가 알파벳 기준선이 기본값입니다.

위 예시의 .inner 요소에 vertical-align: super를 추가하면, 동일한 규칙으로 .inner 자식이 부모에 맞춰 정렬되지만, 기준선 정렬 외에도 자식이 위 첨자 위치로 이동하게 됩니다.

4.1. 우세 기준선: dominant-baseline 속성

이 속성은 박스 내부 콘텐츠 정렬에 사용되는 기본 우세 기준선 타입을 지정합니다.

인라인 박스의 경우, 우세 기준선을 사용하여 박스의 텍스트를 정렬합니다 (그리고 vertical-align으로 별도 지정하지 않는 한, 모든 인라인 레벨 자식 박스도 동일). 각 글리프/박스의 해당 기준선을 박스의 우세 기준선에 맞춰 정렬합니다. 기타 박스의 경우, 이 값은 박스의 정렬 기준선의 기본값을 의미하며, 해당 박스의 기준선 정렬에 참여하는 모든 박스에 적용됩니다; (alignment-baseline: baseline 및 [CSS-ALIGN-3] 참고)

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

auto

alphabetic과 동일(수평 writing mode, 또는 text-orientation이 sideways인 수직 writing mode). central과 동일(수직 writing mode에서 text-orientation이 mixed 또는 upright일 때).

단, SVG 텍스트에서는 글리프의 원점이 항상 central처럼 처리됩니다(수직 writing mode).

text-bottom

text-under 기준선 사용.

alphabetic

alphabetic 기준선 사용.

ideographic

ideographic-under 기준선 사용.

middle

x-middle 기준선 사용; 단, text-orientation: upright에서는(alphabetic 및 x-height 기준선이 사실상 무의미할 때) central 기준선 사용.

central

central 기준선 사용.

mathematical

수학 기준선 사용.

hanging

행잉 기준선 사용.

text-top

text-over 기준선 사용.

[CSS-WRITING-MODES-3]에서 우세 기준선 소개 참고.

지정된 기준선이 central이 아닐 때, 혼합된 수직 방향에 대해 비합리적이지 않은 동작을 정의해야 합니다.

4.2. 횡축 박스 정렬: vertical-align 속성

이 단축(shorthand) 속성은 인라인 레벨 박스를 줄 내에서 어떻게 정렬할지 지정합니다. 즉, 정렬 기준선(alignment baseline) 타입(alignment-baseline), 기준선 정렬 선호도(baseline alignment preference)(baseline-source), 그리고 정렬 후 이동(post-alignment shift)(baseline-shift) 를 하나의 선언에서 지정합니다.

first 또는 last가 지정되면, baseline-source를 설정하며(그 외에는 auto로 리셋됨). 기타 값은 아래의 개별 속성(longhand) 규칙과 동일하게 적용됩니다.

저자는 이 단축 속성(vertical-align)을 사용해야 하며, 단, 개별 longhand를 독립적으로 cascade하거나(SVG 요소에서) 레거시 SVG 구현 지원이 필요한 경우에만 longhand를 별도로 써야 합니다.

참고: vertical-align은 align-content가 normal일 때 테이블 셀의 정렬에도 영향을 줄 수 있습니다. 구체적으로, top (baseline-shift: top)은 start로, bottom (baseline-shift: bottom)은 end로, 그리고 middle (alignment-baseline: middle)은 center로 매핑됩니다. 자세한 내용은 CSS Box Alignment 3 § 5.1.1 블록 컨테이너(테이블 셀 포함)를 참고하세요.

4.2.1. 정렬 기준선 소스: baseline-source 롱핸드

인라인 레벨 박스가 기준선 정보를 위한 여러 소스(예: 다중 줄 인라인 블록이나 인라인 플렉스 컨테이너)를 가질 수 있는 경우, 이 속성은 first baseline set 또는 last baseline set 중 어느 것을 정렬에 우선할지 지정하며, 박스의 기준선 정렬 선호도를 나타냅니다. 값의 의미는 다음과 같습니다:

auto

last-baseline alignment를 inline-block에, 그 외에는 first-baseline alignment를 지정합니다.

first

first-baseline alignment 지정.

last

last-baseline alignment 지정.

CSS Box Alignment 3 § 9.1 박스의 기준선 결정에서 인라인 박스 이외의 박스 기준선 찾는 법 참고.

4.2.2. 정렬 기준선 종류: alignment-baseline 롱핸드

이 속성은 박스의 정렬 기준선(alignment baseline)을 지정합니다: 박스를 정렬 이후 이동 (적용 시) 전에 정렬할 때 사용하는 기준선입니다.

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

baseline

부모의 우세 기준선 선택을 사용합니다.

text-bottom

text-under 기준선 사용.

alphabetic

alphabetic 기준선 사용.

ideographic

ideographic-under 기준선 사용.

middle

일반적으로 x-middle 기준선 사용; 단, text-orientation: upright일 때(alphabetic 및 x-height 기준선이 사실상 무의미할 때) central 기준선 사용.

central

central 기준선 사용.

mathematical

수학 기준선 사용.

text-top

text-over 기준선 사용.

기준선 정렬을 수행할 때, 이 값들은 박스의 어떤 기준선을 부모 정렬 컨텍스트의 해당 기준선과 맞춰 정렬할지 지정합니다. (인라인 포맷팅 컨텍스트에서는 inline formatting context, 인라인 레벨 박스 fragment와 글리프들이 부모 인라인 박스 fragment의 인라인 축에서 하나의 정렬 컨텍스트를 공유합니다. 다른 포맷팅 컨텍스트의 경우, CSS Box Alignment 3 § 9.2 기준선 정렬 그룹화 참고.) SVG 텍스트 레이아웃에서는 이 값들이 대신 SVG current text position에 맞춰 정렬할 기준선을 지정합니다.

4.2.2.1. SVG 레거시 값

SVG 구현체는 레거시 콘텐츠 지원을 위해 아래 별칭을 지원할 수 있습니다:

• text-before-edge는 text-top 별칭입니다

• text-after-edge는 text-bottom 별칭입니다

4.2.3. 정렬 이후 이동: baseline-shift 롱핸드

이 속성은 박스의 정렬 이후 이동(post-alignment shift)을 지정합니다. baseline-relative shift values <length-percentage>, sub, super는 박스를 기준선 정렬 위치에서 상대적으로 이동시키고, line-relative shift values top, center, bottom은 인라인 박스와 그 콘텐츠를 라인 박스의 경계에 대해 상대적으로 이동시킵니다.

저자는 CSS1부터 존재한 vertical-align 단축 속성을 사용해야 하며, 이 baseline-shift 롱핸드는(예외적으로 SVG 콘텐츠에서는 baseline-shift가 레거시 UA에서 더 널리 지원됨) 사용하지 않는 것이 좋습니다.

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

<length>

지정한 길이만큼 위(양수) 또는 아래(음수)로 이동.

<percentage>

지정한 백분율만큼 line-height 기준으로 위(양수)/아래(음수)로 이동.

sub

부모 박스의 아래 첨자 위치에 맞춰 아래로 이동. UA는 부모 폰트 메트릭을 사용할 수 있으며, 그렇지 않으면 기본적으로 부모 font-size의 1/5만큼 내림.

super

부모 박스의 위 첨자 위치에 맞춰 위로 이동. UA는 부모 폰트 메트릭을 사용할 수 있으며, 그렇지 않으면 기본적으로 부모 font-size의 1/3만큼 올림.

top

line-over 엣지에 정렬된 서브트리의 line-over 엣지를 라인 박스와 맞춤.

center

정렬된 서브트리의 중앙과 라인 박스의 중앙을 맞춤.

bottom

line-under 엣지에 정렬된 서브트리의 line-under 엣지를 라인 박스와 맞춤.

정렬된 서브트리는 인라인 박스의 레이아웃 경계와, 계산된 alignment-baseline 값이 라인 기준 이동 값이 아닌 모든 자식 인라인 박스의 정렬된 서브트리를 포함합니다. 정렬된 서브트리의 line-over 엣지는 서브트리 내 레이아웃 경계 중 가장 높은 over 엣지이고, line-under 엣지는 반대로 가장 낮은 엣지입니다.

line-relative shift value는 alignment-baseline과 baseline-shift의 이분법에 완벽히 맞지 않습니다. 찬성 반대 모두 논리가 있습니다. 현재는 여기서 초안화되어 있으나, 강력한 이동 논거가 있으면 이슈로 제출해 주세요.

4.2.3.1. SVG 레거시 값

UA는 레거시 SVG 콘텐츠 지원이 필요하다면 baseline 키워드를 0으로 계산하는 것을 지원할 수 있습니다. 이 값은 vertical-align 단축 속성에서는 허용되지 않습니다.

baseline 값을 제거하고 싶으며, SVG UA에게 실제로 필요한지 피드백을 받고 싶습니다.

5. 논리적 높이 및 줄 간격

블록 축에서 라인 박스의 크기는 콘텐츠의 크기와 정렬에 따라 결정됩니다. 이 크기 산정은 line-height 및 line-fit-edge 속성으로 제어됩니다.

5.1. 줄 간격: line-height 속성

이 속성은 박스의 선호 줄 높이(preferred line height)를 지정하며, 이것은 “레이아웃 경계”를 계산할 때 사용됩니다, 즉, 자신의 라인 박스 논리적 높이에 기여하는 값입니다. (§ 5.3 인라인 박스의 논리적 높이 기여(“레이아웃 경계”) 계산 참고)

참고: 루트 인라인 박스에 블록 컨테이너에서 지정하면, line-height가 그 블록의 라인 박스의 최소 높이를 사실상 결정합니다.

이 속성의 값 의미는 다음과 같습니다:

normal

폰트 메트릭을 기반으로 선호 줄 높이를 자동 결정.

<length [0,∞]>

지정된 길이를 선호 줄 높이로 사용. 음수 값은 허용되지 않음.

<number [0,∞]>

선호 줄 높이는 이 숫자에 요소의 계산된 font-size를 곱한 값. 음수 값은 허용되지 않음. 계산값은 명시값과 동일.

<percentage [0,∞]>

속성의 선호 줄 높이 및 계산값 은 요소의 계산된 font-size의 해당 백분율. 음수 값은 허용되지 않음.

참고: 첫 번째 사용 가능 폰트가 아닌 폰트의 메트릭은 레이아웃 경계에만 영향을 주며, 인라인 박스가 line-height: normal일 때만 적용됩니다.

div { line-height: 1.2; font-size: 10pt }     /* 숫자 */
div { line-height: 1.2em; font-size: 10pt }   /* 길이 */
div { line-height: 120%; font-size: 10pt }    /* 백분율 */

백분율이 길이로 계산된다는 점이 불편합니다. Issue 3118 및 Issue 2165 참고.

참고: line-fit-edge가 leading일 때, 인라인 박스의 마진, 테두리, 패딩은 라인 박스의 높이 계산에 영향을 주지 않습니다. 하지만 이러한 박스 주위에 여전히 렌더링됩니다. 즉, line-height로 지정한 크기가 박스의 크기보다 작으면, 배경과 테두리가 인접한 라인 박스로 "넘쳐흐르며", 앞의 콘텐츠를 가릴 수 있습니다.

5.2. 텍스트 엣지 메트릭: line-fit-edge 속성

이것은 제안 초안의 초기 버전이며, 디자인 검토와 사용 사례가 등록되고 다양한 세부 사항 및 다른 속성들과의 상호작용이 조정됨에 따라 크게 변경될 수 있습니다. 아직 배포하지 마십시오.

인라인 박스는 텍스트를 담는 것이 주 목적이며, 블록 축에서 폰트 메트릭에 따라 크기가 정해집니다. line-fit-edge 속성이 어떤 메트릭을 쓸지 제어합니다. 선택된 메트릭은 해당 인라인 박스의 레이아웃 경계(layout bounds)를 계산하는 기준이 되며(루트 인라인 박스가 아닌 경우), 기본적으로 text-box-trim에도 사용됩니다.

<text-edge> 값은 특정 폰트 메트릭을 지정하며, 다음과 같이 확장됩니다.

<text-edge> = [ text | ideographic | ideographic-ink ]
              | [ text | ideographic | ideographic-ink | cap | ex ]
                [ text | ideographic | ideographic-ink | alphabetic ]

첫 번째 값은 텍스트 over 엣지를 지정하고, 두 번째 값은 텍스트 under 엣지를 지정합니다. 값이 하나만 지정된 경우, 가능한 경우 두 엣지 모두 같은 키워드를 사용하며; 아니라면 누락된 값에 text가 기본값으로 사용됩니다.

longhand가 필요한가요, 아니면 이 shorthand만으로 충분한가요? [Issue #5236]

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

leading

상승(ascent)/하강(descent)에 양수 half-leading을 더함. 마진/패딩/테두리는 라인 박스 크기 산정에서 무시됨.

text

text-over 기준선 / text-under 기준선을 각각 over/under 엣지로 사용.

cap

cap-height 기준선을 over 엣지로 사용.

ex

x-height 기준선을 over 엣지로 사용.

ideographic

ideographic-over 기준선 / ideographic-under 기준선을 각각 over/under 엣지로 사용.

ideographic-ink

ideographic-ink-over 기준선 / ideographic-ink-under 기준선을 각각 over/under 엣지로 사용.

alphabetic

alphabetic 기준선을 under 엣지로 사용.

text라는 ascent/descent 메트릭 명칭이 합리적인가요, 아니면 더 나은 명칭이 있을까요? leading 키워드도 마찬가지입니다. [Issue #8067]

line-fit-edge가 leading이 아닌 경우(이 경우에는 박스 자체의 line-height로 간격을 추가함), 박스의 margin, padding, border도 레이아웃 경계에 포함됩니다.

참고: leading 및 text 값은 폰트 상승(ascent)과 하강(descent)을 기반으로 텍스트가 잘 들어가도록 합니다. 다른 값은(특히 악센트 등) 지정된 메트릭 위로 올라가거나 오버플로우가 더 쉽게 일어날 수 있으므로, 이런 값을 쓰는 경우 저자는 충분한 간격을 직접 조절해야 하며, 특히 다국어 환경에서 주의가 필요합니다.

참고: leading만 양수 half-leading을 적용하지만, 텍스트를 촘촘하게 배치할 수 있도록 모든 값이 음수 half-leading도 적용합니다. § 5.3 인라인 박스의 논리적 높이 기여(“레이아웃 경계”) 계산 참고. half-leading은 텍스트 양쪽에 똑같이 적용되며, 더 정밀한 겹침 제어는 line-fit-edge: text와 해당 텍스트에 음수 margin을 함께 사용할 수 있습니다.

5.3. 인라인 박스의 논리적 높이 기여(“레이아웃 경계”) 계산

인라인 박스가 라인 박스의 논리적 높이에 기여하는 값, 즉 레이아웃 경계(layout bounds)는 항상 자신의 텍스트 메트릭을 기준으로 아래 설명처럼 계산되며, line-fit-edge 및 line-height로 제어됩니다. 자식 박스의 크기와 위치는 자신의 레이아웃 경계(및 논리적 높이, inline-sizing 참고)에 영향을 주지 않습니다.

참고: 레이아웃 경계는 박스의 엣지와 반드시 일치하지는 않습니다.

인라인 박스의 레이아웃 경계를 찾으려면, UA는 먼저 인라인 박스에 직접 포함된 모든 글리프를 우세 기준선에 맞춰 정렬해야 합니다. (§ 3.3 글리프와 박스의 기준선 참고.) 인라인 박스에 글리프가 전혀 없거나 폴백 폰트의 글리프만 있으면, 해당 박스의 첫 사용 가능한 폰트의 메트릭을 가진 폭 0의 보이지 않는 글리프(strut)가 있다고 간주합니다.

각 글리프(및 strut)에 대해 A는 기준선 위의 상승값, D는 기준선 아래의 하강값을 의미합니다. line-fit-edge가 다른 메트릭을 지정하지 않는 한, A는 해당 폰트와 크기에 대한 상승 메트릭, D는 하강 메트릭을 의미하며, 각각 우세 기준선의 0 기준 오프셋을 반영해 보정됩니다. line-height가 normal이고 line-fit-edge가 leading이거나 루트 인라인 박스일 경우, 폰트의 라인 갭 메트릭을 half-leading으로 각 측면에 더할 수 있습니다.

computed line-height가 normal일 때, 인라인 박스의 레이아웃 경계는 모든 글리프를 포함하며, 가장 높은 A부터 가장 깊은 D까지 입니다. (하나의 박스 내 글리프가 서로 다른 폰트에서 왔으므로 A와 D가 모두 같지 않을 수 있음에 유의.)

계산된 line-height가 normal이 아닐 때, 그 레이아웃 경계는 해당 first available font의 메트릭만(다른 폰트의 글리프 무시)으로 결정되며, leading을 사용하여 실제 A와 D의 합이 사용된 line-height가 되도록 조정합니다. leading L은 L = line-height - (A + D)로 계산합니다. leading의 절반(half-leading)은 first available font의 A 위에, 나머지 절반은 first available font의 D 아래에 더해집니다. 이로 인해 기준선 위의 실제 상승값은 A′ = A + L/2, 실제 하강값은 D′ = D + L/2가 됩니다. 하지만 line-fit-edge가 leading이 아니고, 이 박스가 root inline box가 아니면, half-leading이 양수일 경우 0으로 처리합니다. 레이아웃 경계는 이 실제 A′와 D′를 정확히 감쌉니다.

참고: L은 음수일 수도 있습니다.

또한, line-fit-edge가 leading이 아닐 경우, 레이아웃 경계는 각 측면의 마진, 테두리, 패딩의 합만큼 더 커집니다. 음수 마진이 실제 효과를 내도록, 음수 마진도 동일 인라인 포맷팅 컨텍스트에 속하는 자손 인라인 박스의 레이아웃 경계에 누적됩니다.

Quirks 모드 [QUIRKS]에서는, 테두리와 패딩이 모두 0이고 직접적으로 텍스트나 보존된 공백 [CSS-TEXT-3]을 포함하지 않는 인라인 박스 fragment는 라인 박스 크기 산정에서 무시됩니다.

6. 텍스트 위/아래 여백 다듬기

일반적인 흐름 텍스트의 경우 일관된 간격을 보장하기 위해, CSS 줄 레이아웃은 각 줄의 텍스트 콘텐츠 위와 아래에 필요한 만큼 leading을 도입하여 line-height를 보장합니다. 추가로, 상승 및 하강 폰트 메트릭 자체에도 전형적인 글리프 형태의 위와 아래에 추가 공간이 포함되어 있는 경우가 많으며, 이는 때때로 일반적인 범위를 넘어서는 문자나 발음 부호가 올라가거나 내려가는 것을 수용하기 위함입니다. 이렇게 하면 인접한 텍스트 줄이 서로 겹치는 것을 방지할 수 있습니다. 하지만 이러한 모든 추가 간격은 시각적 정렬과 실질적(시각적으로 보이는) 간격 제어를 방해합니다.

text-box 속성은 블록의 첫 번째와 마지막 줄 위/아래의 추가 공간을 다듬을 수 있게 해주어, 글리프 주변 간격을 더 정밀하게 제어할 수 있도록 합니다. 하드코딩된 길이 대신 폰트 메트릭에 의존하기 때문에, 이 기능은 콘텐츠 크기 조정, 줄 바꿈, 다양한 폰트 렌더링 시에도 그 정밀한 간격을 유지할 수 있습니다.

흔한 문제는 수직 가운데 정렬입니다. 텍스트 컨테이너를 아이콘과 수직 가운데 정렬하는 것은 쉽지만, 라틴 텍스트의 시각적 경계는 cap height와 알파벳 기준선이기 때문에, 상승/하강값이 아니라서 원하는 시각적 효과가 나오지 않는 경우가 많습니다.

텍스트를 시각적으로 가운데 정렬하려면, cap height와 알파벳 기준선을 각각 텍스트의 위/아래 엣지로 간주해야 합니다.

text-box-trim을 사용해 cap height 위와 알파벳 기준선 아래의 간격을 제거하면, 박스를 가운데 정렬하면 실제로 텍스트가 가운데에 오게 됩니다; 그리고 어떤 폰트로 렌더링되든 신뢰성 있게 동작합니다.

6.1. 텍스트 박스 다듬기 단축: text-box 속성

이 속성은 단축 속성으로, text-box-trim과 text-box-edge 두 속성을 한 번에 지정할 수 있습니다.

키워드 normal만 지정하면, text-box-trim은 none으로, text-box-edge는 auto로 설정합니다. 그렇지 않고 text-box-trim 값을 생략하면 both(초기값 아님)으로, text-box-edge 값을 생략하면 auto(초기값)으로 설정됩니다.

예시를 추가할 것.

6.2. 텍스트 위/아래 다듬기: text-box-trim 속성

인라인 박스에서, 콘텐츠 박스를 지정한 text-box-edge 메트릭에 맞게 다듬을지 지정합니다. 자세한 내용은 § 5.3 인라인 박스의 논리적 높이 기여(“레이아웃 경계”) 계산 참고.

블록 컨테이너와 다단 컨테이너의 각 컬럼에서는, 박스의 콘텐츠의 시작/끝에서 half-leading을 다듬어 콘텐츠 엣지와 텍스트 콘텐츠가 더 잘 맞도록 합니다. 이때 다듬는 엣지는 해당 text-box-edge 값의 시작/끝에 따라 결정되며, 해당 라인 박스의 컨테이닝 블록 기준입니다.

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

none

라인 박스의 첫/마지막에 대해 블록 컨테이너에 적용할 때 특별한 처리 없음.

인라인 박스에 적용하면, 박스의 위/아래 콘텐츠 엣지가 text-over 및 text-under 기준선과 일치하며, text-box-edge와 무관합니다.

trim-start

블록 컨테이너 및 컬럼 박스에 대해: block-start 측의 첫 포맷된 줄을 해당 루트 인라인 박스의 지정된 메트릭에 맞춰 다듬음. 해당 줄이 없거나, 중간에 0이 아닌 패딩/테두리가 있으면 효과 없음.

인라인 박스의 경우: 박스의 block-start 측을 콘텐츠 엣지와 지정한 text-box-edge 메트릭에 맞춰 다듬음.

trim-end

블록 컨테이너 및 컬럼 박스에 대해: 마지막 포맷된 줄의 block-end 측을 해당 루트 인라인 박스의 지정된 메트릭에 맞춰 다듬음. 해당 줄이 없거나, 중간에 0이 아닌 패딩/테두리가 있으면 효과 없음.

인라인 박스의 경우: 박스의 block-end 측을 콘텐츠 엣지와 지정한 text-box-edge 메트릭에 맞춰 다듬음.

trim-both

trim-start와 trim-end를 동시에 적용.

참고: ::first-line과 같이 이 속성은 flex, grid, table 포맷팅 컨텍스트에는 적용/전파되지 않습니다.

참고: block-end 측은 line-under 측과 일치하지 않습니다 writing-mode가 vertical-lr일 때.

여러 상위 요소가 동일한 라인 박스에 대해 다듬기를 지정한 경우, 사용하는 메트릭은 해당 라인 박스의 해당 측에 대해 다듬기를 요청한 가장 안쪽 블록 컨테이너의 것입니다.

참고: text-box-trim 값이 초기값이 아닐 때 박스에서 넘치거나 잉크가 넘치는 콘텐츠는 일반적으로 박스나 라인 박스에서 넘치는 콘텐츠와 동일하게 처리합니다.

::first-line과 달리, 다단 컨테이너의 첫(또는 마지막) 포맷된 줄에 적용할 때, 이 속성은 다단 컨테이너의 모든 컬럼의 첫(또는 마지막) 포맷된 줄에 적용됩니다.

컬럼이 spanner로 나눠지면 어떻게 되는가? [Issue #11363]

text-box-trim이 적용된 박스가 분할(fragmentation)되면 다듬기가 각 fragment마다 적용될지, 첫/마지막 fragment의 시작/끝 엣지에만 적용될지는 box-decoration-break에 의해 결정됩니다.

프린트 시 라인 박스 다듬기로 인해 콘텐츠가 잘릴 경우, UA는 해당 라인 박스 엣지에서 text-box-trim을 무시할 수 있습니다.

6.3. 텍스트 다듬기 메트릭: text-box-edge 속성

이 속성은 text-box-trim 효과에 사용할 메트릭을 지정합니다. 값의 의미는 line-fit-edge와 동일합니다; auto 키워드는 line-fit-edge의 값을 사용하며, leading(초기값)은 text로 해석됩니다.

참고: 이 속성은 text-box-trim과 text-box 단축 속성에서 함께 설정할 수 있습니다. line-fit-edge와는 달리 상속되지 않지만, 초기값은 상속되는 line-fit-edge에서 복사됩니다.

6.4. 인라인 박스 그리기 높이: inline-sizing 속성

이름이 혼란스럽습니다. 새 이름이 필요합니다. 또는 text-box-trim에 통합할까요? [Issue #5189]

이 속성은 인라인 박스의 콘텐츠 영역의 논리적 높이를 그 내용과 어떻게 측정할지 지정합니다. 박스 콘텐츠, 라인 박스, 기타 콘텐츠의 크기/위치에는 영향을 주지 않습니다.

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

normal

인라인 박스의 콘텐츠 영역은 첫 사용 가능한 폰트의 (가상) 텍스트에 맞춰 크기와 위치가 정해집니다. text-box-trim이 다듬기를 나타내면, 지정한 메트릭을 사용해야 합니다. 그렇지 않으면 명세에서 방법을 지정하지 않습니다. UA는 예를 들어 폰트의 최대 ascender/descender를 사용할 수 있습니다. (em-box 위/아래로 파츠가 있는 글리프도 콘텐츠 영역에 들어가게 되지만, 폰트마다 박스 크기가 달라질 수 있습니다.)

참고: 여러 폰트가 사용되는 경우 (글리프가 여러 폰트에서 발견될 때), 콘텐츠 영역의 논리적 높이는 폴백 폰트 글리프에 영향받지 않으며, 첫 사용 가능한 폰트만 따릅니다. 단, 이런 폴백 글리프도 라인 박스 크기에는 영향을 줄 수 있습니다 line-height가 normal일 때; § 5.3 인라인 박스의 논리적 높이 기여(“레이아웃 경계”) 계산 참고.

stretch

라인 박스가 크기가 정해지고 내용이 normal 값처럼 위치가 정해진 뒤, 인라인 박스의 박스 엣지를 이동시켜 over / under 마진 엣지가 해당하는 라인 박스 엣지와 일치하도록 함. 인라인 박스의 내부 논리적 높이를 늘려서 외부 크기가 라인 박스를 채움. (흐름 내(in-flow) 콘텐츠의 크기/위치는 영향 없음)

참고: height 속성은 인라인 박스에는 적용되지 않습니다.

참고: line-height는 인라인 박스의 크기에 영향 없으며, 해당 박스가 라인 박스의 논리적 높이에 기여하는 것에만 영향 줍니다.

7. 첫글자(드롭캡)

편집자들은 특히 인도계 문자를 포함한 비서구 문자에서 드롭캡 예시를 환영합니다.

7.1. 첫글자 소개

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

크고 장식적인 글자는 인쇄술이 발명되기 전부터 새로운 텍스트 단락의 시작에 사용되어 왔습니다. 실제로, 이러한 사용은 소문자가 생기기 이전부터 존재했습니다.

7.1.1. 드롭 이니셜

드롭 이니셜(dropped initial)(또는 "드롭캡(drop cap)") 은 단락의 시작에 평소보다 큰 글자가 나오며, 기준선이 단락의 첫 기준선보다 최소 한 줄 아래에 위치합니다. 드롭 이니셜의 크기는 보통 차지하는 줄 수로 표시합니다. 2줄 또는 3줄 드롭 이니셜이 매우 흔합니다.

드롭 이니셜의 정확한 크기와 위치는 글리프의 정렬에 따라 달라집니다. 드롭캡의 기준점은 본문 텍스트의 기준점과 정밀하게 맞춰져야 하며, 정렬 조건은 문자 시스템에 따라 다릅니다.

서구 문자에서는, 상단 기준점이 이니셜 글자와 첫 줄 텍스트의 cap-height이고, 하단 기준점은 이니셜 글자의 알파벳 기준선과 N번째 줄의 기준선입니다. 아래 그림은 관련 기준선이 표시된 간단한 2줄 드롭캡을 보여줍니다.

한자 계열 문자에서는, 이니셜 글자가 첫 줄 글리프의 block-start 엣지부터 N번째 줄 글리프의 block-end 엣지까지 확장됩니다.

일부 인도계 문자에서는, 상단 정렬점이 행잉 기준선(hanging baseline)이고, 하단 정렬점이 text-after-edge입니다.

7.1.2. 내려간 첫글자

드롭 이니셜 스타일 중 일부는 첫 줄 텍스트와 정렬되지 않습니다. 내려간 첫글자(sunken initial)(또는 "sunken cap") 는 첫 기준선 아래로 내려가면서, 첫 줄 윗부분을 넘어서 확장됩니다.

7.1.3. 올린 첫글자

올린 첫글자(raised initial)(종종 "raised cap" 또는 "stick-up cap"이라 불림)은 첫 텍스트 기준선까지 "내려"옵니다.

참고: 올린 첫글자는 단순히 첫글자 폰트 크기를 키우는 것보다 여러 장점이 있습니다. 단락의 나머지 줄 간격은 변경되지 않고, 큰 하강부(디센더)가 있을 경우 해당 부분만 배제됩니다. 또한 올린 첫글자 크기를 정수 줄 수로 정의하면, 암시적 기준선 그리드를 유지할 수 있습니다.

7.2. 첫글자 선택

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

첫글자는 보통 한 글자이지만, 구두점이나 여러 문자가 사용자에게 하나의 타이포그래피 단위로 인식될 수도 있습니다. ::first-letter 의사 요소는 [SELECT] 및 [CSS-PSEUDO-4]에서 정의되며, 첫글자(initial letter)로 스타일링할 문자(들)를 선택할 때 사용할 수 있습니다.

첫글자에 포함될 문자를 더 세밀하게 제어하거나, 치환 요소 또는 여러 단어에 첫글자 스타일을 적용하고 싶다면 initial-letter 속성을 블록 컨테이너의 첫 인라인 레벨 자식에 적용할 수 있습니다.

<p>이 단락의 첫글자 "T"는 드롭입니다.
<p><img alt="H" src="illuminated-h.svg">ere는 장식 "H"를 사용합니다.
<p><span>단어도</span> 단락 시작에 첫글자 스타일을 줄 수 있습니다.

::first-letter, /* 첫 단락의 T에 스타일 */
img, /* 장식 H에 스타일 */
span /* span 내부 문구에 스타일 */
{ initial-letter: 2; }

주의: ::first-letter가 첫 문자 앞이나 뒤의 구두점도 선택하므로, ::first-letter를 사용할 때 이런 문자들도 첫글자에 포함됩니다.

이런 동작을 옵트아웃할 방법이 필요할까요? GitHub Issue 310 참고.

7.3. 첫글자 생성: initial-letter 속성

이 속성은 드롭, 올림, 내려간 첫글자의 크기(size)와 내려감(sink)을 차지하는 줄 수로 지정합니다.

h2 + p::first-letter { initial-letter: 2; }

다음 값을 가질 수 있습니다:

normal

특별한 첫 글자 효과 없음. 텍스트는 일반적으로 동작합니다.

<number [1,∞]>

이 첫 번째 인자는 첫 글자의 크기를 몇 줄을 차지하는지로 정의합니다. 1보다 작은 값은 유효하지 않습니다.

<integer [1,∞]>

이 선택적 두 번째 인자는 첫 글자가 가라앉는 줄 수를 정의합니다. 1 값은 올린 첫 글자를 나타내며; 1보다 큰 값은 가라앉은 첫 글자를 나타냅니다. 1보다 작은 값은 유효하지 않습니다.

raise

첫 글자 가라앉는 줄 수가 1로 계산됩니다.

drop

첫 글자 가라앉는 줄 수가 첫 글자 크기를 가장 가까운 양의 정수로 내림하여 계산됩니다.

내려감(sink) 값을 생략하면, drop이 기본값입니다.

normal이 아닌 값은 해당 박스를 첫글자 박스(initial letter box)로 만들며, 이는 특별한 레이아웃 동작을 갖는 흐름내 인라인 레벨 박스입니다.

다른 CSS 속성과 함께 initial-letter를 사용하면 "붙어있는 첫글자(adjacent initial letters)"를 만들 수 있습니다. 즉, 첫글자가 텍스트에 붙어 있음:

p::first-letter {
  initial-letter: 3;
  color: red;
  width: 5em;
  text-align: right;
  margin-left: -5em;
}

p {
  margin-left: 5em;
}

7.3.1. 적용 범위

저자가 첫글자(initial letter)로 스타일링할 문자를 더 정확하게 제어하고, 여러 문자(예: 첫 단어, 구)를 첫글자로 스타일링할 수 있도록 하기 위해, initial-letter 속성은 CSS에서 정의한 ::first-letter 의사 요소뿐 아니라, inside 위치의 ::marker 의사 요소와 첫 줄 맨 앞에 배치된 인라인 레벨 박스에도 적용됩니다. 구체적으로, initial-letter는 부모 박스의 첫 번째 자식이며(즉, 인라인 레벨 박스 중 첫 번째), 상위 박스(있는 경우)가 containing block의 후손이고, 모두 첫 자식 인라인 박스이며, computed initial-letter 값이 normal일 때만 적용됩니다.

예를 들어, 아래 예시의 <span>, <em>, <b> 요소는 <p>의 "첫번째 인라인 레벨 자손"이지만, <strong> 요소는 해당하지 않습니다:

<p><span><em><b>This</b> phrase</em> is styled
<strong>specially</strong>.</span> …

다음 규칙을 적용하면:

em { initial-letter: 2; }
b, strong { initial-letter: 3; }

initial-letter 속성은 <em>에만 적용됩니다. <b>는 상위에 이미 첫글자 스타일이 있어 무시되고, <strong>은 두 번째 형제이므로 무시됩니다.

렌더링 결과는 다음과 같을 수 있습니다:

initial-letter가 양방향(bidi) 재정렬 등으로 인해 줄 맨 앞에 배치되지 않은 인라인 레벨 박스에 적용되거나, 앞에 다른 인라인 레벨 콘텐츠가 있으면, used value가 normal이 되며, 첫글자로 포맷되지 않습니다.

initial-letter 속성은 ruby base container box의 자식이나 ruby container box에는 효과가 정의되지 않습니다.

참고: initial-letter 속성은 float 값이 none이 아니거나, position 값이 static이 아닌 요소에는 적용되지 않습니다. 이런 값이면 display가 block으로 계산되기 때문입니다.

7.4. 첫글자 정렬: initial-letter-align 속성

앞서 언급했듯, 첫글자 정렬은 사용하는 문자 시스템에 따라 다릅니다. initial-letter-align 속성으로 올바른 정렬 방식 지정이 가능합니다.

이 속성은 첫글자의 크기와 위치를 맞출 때 사용하는 정렬 기준점을 지정합니다. 두 가지 기준점이 필요합니다: over 및 under 정렬점이 첫글자에서 결정되며, 루트 인라인 박스의 해당 over와 under 기준점에 맞춥니다.

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

alphabetic

주변 텍스트의 cap-height와 alphabetic 기준선을 사용하여 첫글자를 정렬합니다.

ideographic

주변 텍스트의 ideographic-ink-over와 ideographic-ink-under 기준선을 사용하여 첫글자를 정렬합니다.

hanging

주변 텍스트의 행잉 기준선과 alphabetic 기준선을 사용하여 첫글자를 정렬합니다.

leading

주변 텍스트의 over/under half-leading 엣지 (즉, 상승/하강 + half-leading) 을 사용하여 첫글자를 정렬합니다.

참고: 이는 첫글자의 엣지가 첫/마지막 영향을 받은 줄 위/아래 줄 간격의 중간에 맞춰지는 효과를 내며, 이는 일부 인도계 조판 [ILREQ]에서 사용되는 경우가 있습니다.

border-box

첫글자 박스의 line-under 및 line-over border edge를 각각 over / under 정렬점으로 사용.

span.initial {
  initial-letter: 2;
  initial-letter-align: ideographic;
}

border-box를 지정한 경우를 제외하면, 첫글자의 정렬 기준점은 내용에서 자동으로 결정됩니다:

1. 첫글자가 atomic inline이면, over 및 under 콘텐츠 박스 엣지를 사용.
2. 첫글자에 Han, Hangul, Kana, Yi Unicode script property가 있는 문자가 포함되면, ideographic-ink-over 및 ideographic-ink-under 기준선을 사용.
3. 첫글자에 Han, Hangul, Kana, Yi Unicode script property가 있는 문자가 포함되면, 행잉 기준선과 alphabetic 기준선을 사용.
4. 그 외에는 cap-height와 alphabetic 기준선을 사용.

히브리어, 태국어 등 일부 문자에서 첫글자 정렬은 OpenType에 해당 메트릭이 없어 현재 불가능합니다. (Issue 5244)

참고: 이 속성 키워드의 순서는 border-box가 [border-box | alphabetic | ideographic | hanging]로 확장될 경우, 첫글자의 정렬점을 명시적으로 지정할 수 있도록 고정되어 있습니다.

7.4.1. UA 기본 스타일시트의 initial-letter-align

더 나은 기본 동작을 제공하기 위해, UA는 기본 UA 스타일시트에 다음 규칙을 포함해야 합니다:

[lang]:lang(zh, ja, ko, ii) {
  initial-letter-align: ideographic;
}
[lang]:lang(hi, mr, ne, pi, kok, brx, mai, sd, sa) {
  initial-letter-align: hanging;
}
/* 스크립트 태그가 언어 태그보다 우선함 */
[lang]:lang('*-Latn', '*-Cyrl') {
  initial-letter-align: alphabetic;
}
[lang]:lang('*-Hani', '*-Hant', '*-Hans') {
  initial-letter-align: ideographic;
}

이 규칙은 가장 일반적인 언어/스크립트 변환 체계만 다룹니다. UA 스타일시트에 더 많은 스크립트 태그를 포함해야 할까요?

7.5. 첫글자 레이아웃

첫글자 박스에는 두 가지 종류가 있습니다: 치환되지 않은 인라인 박스에서 생기는 경우와 원자 인라인에서 생기는 경우입니다.

비원자 인라인 첫글자의 경우, 박스와 그 내용은 해당 줄의 인라인 포맷팅 컨텍스트에 함께 참여하며, 기대되는 크기와 정렬을 맞추기 위한 특별 규칙이 많이 적용됩니다.

원자 첫글자의 경우에는, 치환 요소이거나, 내용에 대해 독립 포맷팅 컨텍스트를 생성하는 경우입니다. 박스의 크기(블록 축에서 자동 크기 제외)와 내용의 레이아웃은 평소 규칙을 따르며, 박스의 배치(positioning)만 특별하게 처리됩니다.

7.5.1. 첫글자에 적용되는 속성

인라인 박스에 적용되는 모든 속성은 인라인 첫글자에도 적용되지만, vertical-align 및 그 하위 속성, font-size, line-height, line-fit-edge, inline-sizing은 제외됩니다. 또한, 크기 관련 속성과 box-sizing 도 첫글자에 적용됩니다([css-sizing-3] 참고).

원자 인라인에 적용되는 모든 속성은, 해당 원자 인라인이 첫글자로 스타일링될 때도 적용되지만, vertical-align 및 그 하위 속성은 제외됩니다.

7.5.2. 마진, 테두리, 패딩

첫글자는 다른 박스처럼 마진, 패딩, 테두리로 스타일링할 수 있습니다. initial-letter-align이 border-box가 아닌 한, 수직 정렬과 폰트 크기에는 영향이 없습니다. 하지만 실질적 배제 영역(보통 첫글자의 마진 박스, initial-letter-wrap 참고) 은 영향을 받습니다.

패딩과 테두리가 0이면 첫글자에 커닝(글자 간격 조정)을 적용할 수 있습니다. 아래 참고.

7.5.3. 첫글자 폰트 크기 계산

인라인 첫글자의 경우, 첫글자 내용에 쓰일 폰트 크기는 지정된 크기(initial-letter 참고) 와 지정된 정렬 기준점(initial-letter-align)에 맞춰 계산됩니다. 이 계산은 레이아웃이 필요하지 않고, 오로지 계산된 값과 폰트 메트릭만을 기반으로 합니다. 이 사용된 폰트 크기 계산은 계산된 font-size에 영향을 주지 않으므로, em 단위 값 등의 계산에는 영향을 주지 않습니다.

자손에 대한 상속은 어떻게 처럼 해야 하나요? [Issue #4988]

이 계산에 사용되는 줄 높이(line-height)는 컨테이닝 블록의 line-height를 따릅니다. (기준선 그리드가 사용되는 경우에는 기준선 그리드의 줄 간격[CSS-LINE-GRID-1]을 따름.) 해당 줄에 포함된 내용이나, 높이·위치 변화는 고려하지 않습니다.

서구 문자에서 N줄 드롭 이니셜의 경우, 글자의 cap-height는 (N – 1) × 줄 높이(line-height) + 주변 텍스트의 cap-height가 됩니다. 이 높이는 드롭 이니셜의 폰트 크기가 아닙니다.

실제로 이 폰트 크기를 계산하는 것은 까다롭습니다. N줄 드롭 이니셜의 경우, 드롭 이니셜 폰트 크기는 다음과 같습니다:

이 계산을 a) 모든 문자/정렬점에 대해 일반적으로 만들고 b) 비정수 크기도 처리하도록 업데이트 필요.

원자 첫글자의 경우, 사용되는 폰트 크기는 평소처럼 계산된 폰트 크기입니다.

7.5.4. 형태 및 글리프 선택

initial-letter가 normal이 아니면, 인라인 첫글자는 글리프 형태를 위해 분리되어 처리됩니다; 하지만 그 뒤의 텍스트는 인라인 첫글자 박스의 경계를 넘어서도 첫 줄 텍스트의 일부로 간주되어 형태가 이어져야 합니다. (CSS Text 3 § 7.3 요소 경계 간 형태 처리 참고.) 예를 들어, "يحق"라는 단어의 첫글자에 initial-letter: 2 1을 적용하면, 첫글자는 분리형 "ي"로 스타일되고, 뒤에는 "ﺤﻖ"이 연결형으로 나오며, 이 연결형은 첫글자 내용이 평소 텍스트처럼 앞에 있다고 간주합니다.

7.5.5. 첫글자 박스 크기 산정

인라인 첫글자의 경우, 첫글자의 선호 너비/선호 높이가 확정적(definite)이면, 해당 값을 사용합니다 (최소/최대 크기 속성에 따라 제한하고, box-sizing 처리 포함).

그렇지 않으면 해당 차원에서 자동 크기로 간주하며, 콘텐츠 박스는 다음 두 가지 모두를 포함하도록 크기가 결정됩니다:

• 지정된 내려감(sink)(즉, over/under 정렬점 사이의 공간).
• 포함된 모든 글리프의 윤곽선(단, hang되는 글리프는 제외, hanging-punctuation 참고), 그리고 포함된 원자 인라인의 마진 박스.
  첫글자 글리프가 지정된 내려감 영역에 꼭 들어가지 않을 수 있음. 예를 들어, 첫글자에 디센더가 있으면 n+1번째 줄과 충돌할 수 있음. 이는 바람직하지 않음.

  

  따라서 라인 박스는 첫글자 글리프 윤곽에 영향을 받는 모든 줄에서 배제되어야 하며, 내려감(sink) 범위 내의 줄만 배제해서는 안 됩니다.

  

단, block-start 패딩과 테두리가 모두 0이면, block-start 콘텐츠 엣지가 over 정렬점과 정확히 일치하며, 그 위로 넘치는 내용은 레이아웃 계산에서 무시됩니다.

참고: 인라인 첫글자에 기준점 위로 올라가는 ascender가 있고, 저자가 마진을 첫글자 또는 컨테이닝 블록에 충분히 주지 않으면, ascender가 앞의 콘텐츠와 충돌할 수 있습니다.

참고: 이런 ascender를 마진으로 간주해 컨테이닝 블록의 마진과 합쳐 자동 간격을 만들면, 공간이 실제로 필요할 때만 추가 간격이 생기게 할 수 있습니다. 구현 난이도에 따라 향후 이런 옵션을 검토할 수 있지만, 당분간은 저자가 직접 충분한 간격을 명시적으로 제공해야 합니다.

hanging-punctuation을 박스 내부에 포함시켜야 할까요? (테두리/배경으로 표시될 때 박스가 구두점을 감싸게 하고, 박스 위치 지정할 때만 제외해서, 첫글자와 구두점이 올바르게 배치되도록) 논의 참고.

원자 첫글자의 경우, 크기 산정은 해당 원자 인라인 타입의 평소 규칙을 따릅니다. 단, 박스의 자동 블록 크기(auto)가 있으면, 블록 크기는 인라인 첫글자의 border-box 정렬과 같이 계산되며, 확정적(definite)입니다.

7.5.6. 첫글자 박스 내부 정렬

기본적으로(자동 크기일 때), 인라인 첫글자의 콘텐츠 박스는 내용에 딱 맞춰지고, text-align 또는 align-content는 적용되지 않습니다. 하지만 박스가 자동 크기가 아닐 경우:

• 인라인 크기가 확정적(definite)이면, text-align을 사용해 첫글자 내용을 인라인 축(inline axis)에서 정렬합니다 (글리프 윤곽 경계가 아니라 일반적인 인라인 축 bearing 사용).
• 블록 크기가 확정적(definite)이면, align-content를 사용해 박스 내용물을 블록 축(block axis)에서 정렬합니다 (블록 축 bearing 사용, 필요하면 합성).

7.6. 첫글자 위치 및 간격

7.6.1. 블록 축 위치 지정

블록 축에서 첫글자는 자신이 생성된 라인 박스에 대해 정렬(initial-letter-align) 및 지정된 내려감(sink)(initial-letter)을 만족시키도록 위치가 결정됩니다.

• 크기(size)가 내려감(sink)보다 크거나 같다면, 첫글자는 under 정렬을 만족하도록 배치한 뒤, (내려감(sink) - 1) × line-height 만큼 컨테이닝 블록의 block end 방향으로 이동합니다.

• 크기(size)가 내려감(sink)보다 작다면, 첫글자는 over 정렬을 만족하도록 배치됩니다.

참고: 첫글자는 본질적으로 initial-letter의 두 번째 인자로 지정된 줄 수만큼 내려가도록 배치되고, 필요한 under 정렬점에 맞춰집니다. 이때 컨테이닝 블록에 첫글자만 있고 그 뒤에 무한한 일반 텍스트가 루트 인라인 박스에 직접 포함된 것으로 가정합니다. 영향을 받는 라인 박스의 내용에 의해 줄 높이가 달라져도 첫글자의 위치에는 영향을 주지 않습니다.

첫글자는 자신이 포함된 라인 박스의 논리적 높이를 증가시키지 않습니다: 위나 아래로 튀어나올 수 있습니다. 자신의 block-start margin edge가 컨테이닝 블록의 block-start content edge 아래에 오도록 위치해야 하며, 이에 따라 생성된 라인 박스(및 그 뒤의 내용)가 해당 엣지에서 더 멀어지도록 강제할 수 있습니다.

7.6.2. 인라인 커닝

첫글자가 자동 인라인 크기와 0 패딩 및 테두리를 가진 비원자 인라인이면, 마진 박스가 콘텐츠 박스의 시작 엣지에서 첫글자가 아니었을 때 라인 박스의 시작 엣지에 배치될 내용까지의 거리만큼 음수로 인셋(커닝)됩니다. 즉, 글리프 경계 박스와 시작 bearing과의 거리만큼 인셋됩니다. 이 인셋은 실질적으로 박스에 추가되는 inline-start margin입니다.

7.7. 첫글자 감싸기: initial-letter-wrap 속성

참고: initial-letter-wrap는 폐기 위험이 있습니다.

이 속성은 첫글자로 인해 영향을 받는 줄이 첫글자 박스의 직사각형 형태 또는 글리프 윤곽에 맞춰 짧아질지 여부를 지정합니다.

none

윤곽 맞춤(contour-fitting) 없음: 영향받는 각 줄은 inline-end margin edge에서 첫글자와 딱 맞게 정렬됨.

first

첫글자 뒤 첫 타이포그래픽 문자 단위가 Unicode General Category Zs이면 none처럼 동작. 아니면 첫 줄은 all처럼, 나머지 줄은 none처럼 동작.

아래 예시에서 첫 줄 윤곽 맞춤이 왜 필요한지, 그리고 첫글자 뒤에 공백이 있으면 왜 생략되는지 보여줍니다:

무조건적인 first가 필요할까요? (auto로 이름을 바꾸고, 공백을 체크하지 않는 first 값을 추가?) GitHub issue 410 참고

all

첫글자로 영향을 받는 각 줄마다, 첫글자에 인접한 라인 박스는 start에서 첫글자의 글리프 윤곽과 겹치지 않는 지점부터 시작합니다.

shape-outside 값이 none이 아니면, 글리프 윤곽 대신 shape-outside를 사용.

두 경우 모두 shape-margin으로 윤곽을 확장하고, 결과 윤곽은 첫글자의 margin edge로 잘립니다.

참고: 이 값은 폐기 위험이 있습니다.

grid

none과 동일하지만, 영향받는 줄의 배제 영역이 마지막 엣지가 문자 그리드(즉, (1ic + letter-spacing)의 배수)에 맞도록 더 늘어남. justify-self 속성으로 첫글자 박스를 배제 영역 내에서 정렬할 수 있습니다.

참고: 이 예시에서 드롭 첫글자의 배제 영역은 인라인 축 정렬을 위해 글리프보다 더 큽니다.

참고: 이 값도 폐기 위험이 있습니다.

<length>

<percentage>

이 값은 first와 동일하게 동작하지만, 첫 줄 조정이 글리프 형태에서 추론되는 대신 명시적으로 주어집니다.

폰트 상대 길이는 사용된 크기에 대해 상대적이어야 함.

참고: 이 값은 구현이 더 쉬워서 존재합니다. 저자는 first 값을 사용하고, 마진으로 간격을 조절하며, 필요하다면 글리프 감지의 폴백으로 이 값을 쓰는 것이 좋습니다.

아래 예시에서 UA가 first를 지원하면 글리프 윤곽과 지정된 마진을 사용해 첫 줄을 배치하고, <length> 또는 <percentage> 값만 지원하면 첫글자 너비의 40%만큼 첫 줄을 당긴 뒤 마진을 추가합니다.

h1 + p:first-letter {
  initial-letter: 3; /* 3줄 드롭캡 */
  initial-letter-wrap: first;
  margin-right: 0.1em;
}
@supports (not (initial-letter-wrap: first)) {
  /* 첫글자에 맞춰 자동 생성된 클래스 */
  p.A:first-letter {
    initial-letter-wrap: -40%; /* 올바른 폰트라고 가정한 글리프 윤곽 시작점 */
  }
}

이런 값과 관련 불편은 Blink에 first 지원 패치가 들어가면 불필요할 수도 있습니다.

auto가 다양한 상황에서 어떻게 동작하는지 그림 수정 필요

p::first-letter {
  initial-letter: 3;
  initial-letter-wrap: none;
}

p::first-letter {
  initial-letter: 3;
  initial-letter-wrap: all;
}

p::first-letter {
  initial-letter: 3;
  initial-letter-wrap: first;
}

p::first-letter {
  initial-letter: 3;
  initial-letter-wrap: all;
}

7.8. 줄 레이아웃

첫글자 박스는 자신의 블록 포맷팅 컨텍스트에서 흐름내(in-flow)로 간주되며, 생성된 라인 박스(생성 라인 박스)의 내용에 포함됩니다. 수직 축(상세는 § 7.6.1 블록 축 위치 지정 참고)을 제외하면, 줄의 나머지 내용과의 상호작용은 인라인 레벨 콘텐츠에 대한 보통 규칙과 동일하지만, 일부 구체적 예외가 존재합니다…

7.8.1. 인라인 흐름 레이아웃: 정렬, 정당화, 공백

첫글자 박스는 자신이 속한 인라인 레벨 콘텐츠들과 동일하게 생성 라인 박스에서 정렬, 정당화, 공백 처리에 참여합니다.

다만, 영향을 받는 모든 줄의 정렬을 일관되게 유지하기 위해, 접힘 가능한 공백(collapsible white space)이 내려간 첫글자와 그 뒤의 내용 사이에 있으면 생성 라인에서 그 공백이 제거됩니다. 또한 letter-spacing이나 정당화 기회도 내려간 첫글자와 그 뒤 내용이 인접할 때 원래 생기는 부분은 억제됩니다. (단, word-spacing이나 정당화 기회가 단어 구분자로 인해 생기는 경우엔 영향 없음; 해당 공백은 타이포그래픽 문자 단위 자체가 제공하며, 인접 문자와의 조합에서 생기는 것이 아니기 때문임.)

7.8.2. 엣지 효과: 들여쓰기 및 행잉 구두점

text-indent와 hanging-punctuation은 첫글자의 생성 라인 박스에 평소처럼 적용되며, 줄 내용의 시작점(첫글자 포함)을 이동시킵니다. 이후 배제(exclusion)로 영향을 받은 줄들은 평소처럼 짧아지는데, 첫글자의 위치에 따라 더 짧거나 길어질 수 있습니다.

initial-letter와 hanging-punctuation 상호작용은 논의 중입니다.

7.8.3. 상위 인라인 박스

첫글자 박스가 인라인 박스 상위에 포함되면, 해당 인라인 박스의 경계는 첫글자 박스를 제외한 것처럼 그려집니다(즉, 시작 마진 엣지 외부에 있는 것처럼). 이는 순수한 기하학적 처리이며, 속성 상속이나 letter-spacing 등에는 영향 주지 않습니다.

7.8.4. 여러 줄 첫글자

첫글자가 한 줄에 다 들어가지 않으면, (평소 텍스트 줄 바꿈 규칙에 따라) 줄 바꿈되며, 각 줄은 마치 첫 줄만 있고, 첫글자가 너무 길어 일반 텍스트가 올 수 없는 것처럼 채워지고 포맷됩니다. 첫글자 뒤의 일반 텍스트는 마지막 줄에서 시작하며, 해당 줄이 첫 줄인 것처럼 영향을 받습니다.

7.9. 첫글자 클리어링

7.9.1. 올린/내려간 캡

첫글자의 마진 박스는 해당 요소의 크기에 기여합니다. 첫 줄 위로 확장되는 첫글자는(raised cap 또는 sunken cap) 이전 요소 위로는 확장되지 않습니다. 첫글자의 콘텐츠 박스에는 모든 글리프 잉크가 포함되므로, 이는 첫글자의 cap-height 위에 악센트나 잉크가 있어도 이전 요소를 침범하지 않음을 의미합니다.

폰트의 cap-height 위에 글리프 잉크가 있을 때 처리 필요. 제안: 해당 부분을 라인 박스와 테두리 박스의 배제 영역으로 처리, 첫글자에 지정된 마진도 배제 영역에 포함해 간격 제어.

박스 모델 다이어그램을 여기에 추가할 것. 첫글자의 마진이 컨테이너와 합쳐지는가?

7.9.2. 짧은 단락에 첫글자

첫글자가 있는 단락이 첫글자가 차지하는 줄보다 적은 줄을 가질 수 있습니다. 이 경우에도 첫글자의 상단 정렬은 유지되며, 배제 영역은 이후 블록에도 계속 이어집니다. 이로 인해 이후 인라인 레벨 콘텐츠가 첫글자 주변을 감싸며 배치됩니다—마치 해당 블록의 텍스트가 자신의 컨테이너의 일부인 것처럼. (이는 float이 이후 블록에서 콘텐츠를 배제하는 방식과 유사함.)

이후 블록이 첫글자로 시작하거나, 독립 포맷팅 컨텍스트를 생성하거나, 첫글자의 컨테이닝 블록의 시작 방향에 clear를 지정하면, 이전 블록의 첫글자를 클리어해야 합니다.

7.9.3. float과의 상호작용

첫글자는 float가 아니며, 흐름내(in-flow) 인라인 레벨 콘텐츠로 라인 박스에 속합니다. 따라서:

• clear 속성은 첫글자에 신경 쓰지 않으며, 첫글자에는 적용되지 않고, 주변 float에도 영향을 주지 않습니다.
• 라인 박스나 float과 마찬가지로 첫글자 박스는 동일 블록 포맷팅 컨텍스트에서 float의 마진 박스와 겹치면 안됨. 겹치면 첫글자 박스를 안쪽이나 아래로 이동시켜 겹치지 않을 때까지 또는 더 이상 float이 없을 때까지 반복.
• 라인 박스의 시작 엣지가 float을 클리어하기 위해 이동하면, 그 안에서 첫글자 생성도 함께 이동; 마찬가지로 첫글자가 float을 클리어하기 위해 안쪽/아래로 이동하면, 해당 생성 라인 박스 및 이후 라인 박스도 짧아지거나 이동.
• inline-start float이 첫글자 인접 첫 줄에서 생성되면, 첫글자를 지나서 컨테이닝 블록 엣지 방향으로 이동, 즉 첫글자가 일반 인라인 레벨 콘텐츠인 것처럼 처리됨.

  그러나 이후 줄에서 (내려간) 첫글자 인접으로 float이 생성되면, 그 float은 첫글자를 클리어해야 함.

CSS2§9.5에서 float과 인접 콘텐츠의 레이아웃에 대해 더 자세히 볼 수 있습니다. [CSS2]

이후 줄에서 생성된 inline-end float도 첫글자를 클리어해야 하는지(첫줄의 inline-start float처럼) 논의 중. 미적 이유는 없으나, 기본 레이아웃 모델에서 두 경우를 어떻게 구분할지 불분명.

7.9.4. 분할(페이징)과의 상호작용

단일 글리프는 페이지(또는 컬럼, 기타 분할 컨테이너)에서 분할(fragmentation)될 수 없으므로, 첫글자 박스는 블록 축 분할(페이지, 컬럼, 영역 등에서의 분할)에서 단일(monolithic) 객체로 간주됩니다 [CSS-BREAK-3]. 또한, 첫글자 박스와 함께 흐름내 줄 사이에는 widows와 orphans로 인한 줄바꿈이 피하는 것처럼, 분할이 피하도록 처리됩니다. 하지만, 첫글자 박스 옆에 강제 분할(forced break)이 있으면 우선 적용되고, 첫글자 박스 자체에는 영향 없음.

다른 단일(monolithic) 객체와 마찬가지로, 첫글자 박스가 분할 컨테이너의 맨 위에 있고, 해당 분할 컨테이너가 너무 짧아 담을 수 없으면, 첫글자는 잘리거나 분할될 수 있습니다. 하지만 인접 콘텐츠는 자신의 규칙대로 분할(fragmentation)되며, 첫글자와 함께 잘리거나 분할되지 않습니다.

부록 A: 정렬 메트릭 합성

A.1: Em-over 및 Em-under 계산

참고: em-over 및 em-under 기준선은 CSS에서 사용되지 않습니다. 이 정의는 이 모듈에 포함되어 있으며, Canvas TextMetrics API에서 사용하는 다른 메트릭과 일관성을 위해 포함되었습니다.

em-over 및 em-under 메트릭은 다음과 같이 계산합니다:

• 폰트에 central, ideographic-over, ideographic-under 중 하나라도 정의되어 있으면, em-over는 central 기준선 위 0.5em, em-under는 아래 0.5em으로 합니다. central 기준선이 없으면 아래 규칙에 따라 파생합니다.

• 그 외에는 상승(ascent)과 하강(descent)을 비례적으로 보정하여 합이 정확히 1em이 되도록 하고, 이 정규화된 메트릭을 em-over 및 em-under로 사용합니다.

참고: 이 계산은 em-over와 em-under가 항상 정확히 1em 간격이 되게 하며, 글리프 윤곽의 "무게중심"이 가운데에 오도록 합니다.

A.2: 텍스트용 기준선(및 기타 폰트 메트릭) 합성

일부 폰트에는 이 모듈에서 설명한 대로 텍스트를 제대로 정렬하는 데 필요한 메트릭 정보가 없을 수 있습니다. 사용자 에이전트는 필수 메트릭이 없을 경우 다음 전략을 사용할 수 있습니다:

관련 메트릭 사용

일부 메트릭은 서로 관련이 있으므로, 이 관계를 이용해 없는 메트릭을 추정할 수 있습니다. 폰트 포맷 자체에서 계산법을 정의하지 않으면, 다음 규칙을 사용할 수 있습니다:

1. central baseline은 ideographic-over와 ideographic-under 기준선의 중간으로 정의됩니다. 따라서 이 중 두 개만 있으면 나머지 하나를 결정할 수 있습니다.
2. ideographic-over와 ideographic-under 기준선은 보통 1em 간격이므로, ideographic-over/ideographic-under/central 중 하나만 있으면 나머지를 계산할 수 있습니다.
3. CJK 폰트에서는 상승(ascent)과 하강(descent)이 ideographic-over와 ideographic-under 기준선과 일치하는 경우가 많으므로, 둘 다 없으면 대체로 사용할 수 있습니다.

폰트 측정

메트릭은 글리프 모양에서 추출할 수 있습니다. 예시:

1. 마이너스 기호(U+2212)의 중앙을 수학 기준선으로 삼을 수 있습니다.
2. 소문자 “o”가 알파벳 기준선 아래로 내려가는 만큼을 위쪽과 뺀 값으로 x-height 측정이 가능합니다.

   

3. 대문자 “O”가 알파벳 기준선 아래로 내려가는 만큼을 위쪽과 뺀 값으로 cap-height 측정.
4. 永(U+6C38)의 경계 박스를 사용해 한자 글자 면(edge)를 찾을 수 있습니다.
5. 히브리어 He(U+05D4 “ה”) 중앙의 윗부분을 히브리어 행잉 기준선으로 삼을 수 있습니다.
6. Ka 문자의 중앙 윗부분을 행잉 기준선으로 삼을 수 있습니다. 어떤 Ka를 쓸지는 콘텐츠 언어에 따라 달라집니다:

   언어	스크립트	글자
   	데바나가리	क U+0915 KA
   	벵골어	ক U+0995
   	구르무키	ਕ U+0A15
   	티베트어	ཀ U+0F40

   기본값을 선택할 것.

   

7. Issue: 여기에 더 많은 노트를 추가할까요?

위의 휴리스틱 검증 필요.

폴백 값 사용

다음 폴백 값 추천:

• x-height: .5em;
• cap-height: .66em;
• 행잉 기준선: .6em;

A.3: 원자 인라인 기준선 합성

원자 인라인(inline-block, inline-table, 치환 요소 등)에 해당 인라인 포맷팅 컨텍스트의 인라인 축에 콘텐츠 기반 기준선 집합이 없으면, UA는 정렬을 위해 다음과 같이 기준선을 합성해야 합니다.

이 기준선은 line-under 마진 엣지에 있다고 간주합니다:

• text-under baseline
• ideographic-under baseline
• ideographic-ink-under baseline
• alphabetic baseline

다음 기준선은 line-under와 line-over 마진 엣지의 중간에 있다고 간주합니다:

• central baseline
• math baseline
• x-middle baseline

다음 기준선은 line-over 마진 엣지에 있다고 간주합니다:

• text-over baseline
• ideographic-over baseline
• ideographic-ink-over baseline
• cap-height baseline
• 행잉 기준선
• x-height 기준선

참고: 저자는 마진(양수 또는 음수)을 사용해 줄 내 치환 콘텐츠의 정렬을 조정할 수 있습니다.

img[src^="/text/"] {
  height: 1em; /* 인접 텍스트와 크기 맞춤 */
  margin-bottom: -0.2em; /* 기준선이 아래에서 20% 위에 오도록 */
}
...
<p>이 텍스트는 인코딩되지 않은 스크립트로 쓴 단어입니다:
<img src="/text/ch3439.png" alt="...">
  <img src="/text/ch3440.png" alt="...">
  <img src="/text/ch3442.png" alt="...">

참고: CSS의 차기 버전에서 치환 요소에 대해 전체 기준선 테이블을 지정하는 방법이 포함될 수 있습니다. (아마도 baseline-table 속성에 [<baseline-keyword> <percentage>]+ 형태를 쓸 수 있게 될 것입니다.)

변경사항

2024년 8월 12일 워킹 드래프트 이후 변경사항:

• <text-edge>의 두 값 모두 필수로 변경. (이슈 10703)
• text-box-edge가 상속되도록 변경; text-box-trim은 영향을 받는 라인 박스에 적용된 관련 값을 참조함. (이슈 10904)
• text-box-trim의 fragmentation 브레이크에서의 동작 정의. (이슈 5335)
• text-box-trim의 다단 컨테이너에서의 동작 정의 및 기타 포맷팅 컨텍스트에서의 적용 방식 명확화. (이슈 5335, 이슈 11038)
• “invisible line boxes”를 phantom line boxes로 이름 변경. CSS2와의 일관성을 위해서이며, 레이아웃에서 “보이지 않음”임을 명확히 함.

2024년 8월 8일 워킹 드래프트 이후 변경사항:

• text-box-edge 관련 참조들 일부 정리.
• text-box-edge: auto가 영향을 받는 line-fit-edge를 참조하도록 조정.

2023년 4월 1일 워킹 드래프트 이후 변경사항:

• text-box-edge를 두 속성으로 분리— text-box-edge는 text-box-trim 엣지 제어, line-fit-edge는 라인 박스 크기 제어 용도—그리고 text-box 단축 속성 추가. (이슈 8829, 8696)
• text-box-trim 키워드에 trim-* 접두사 추가. text-box 단축 맥락에서 의미가 명확해지도록. (이슈 10675)
• 여러 상위에 다듬기 지정시 text-box-trim은 가장 안쪽 다듬기 엣지를 사용. (이슈 5426)
• 블록 축의 음수 마진을 인라인 박스 자식에도 적용하여 레이아웃 경계 계산시 실제 효과가 나도록 함. (이슈 8182)
• phantom line boxes가 inline-axis 박스 데코레이션만 고려하도록 수정. (이슈 9344)

2022년 11월 14일 워킹 드래프트 이후 변경사항:

• text-edge를 text-box-edge로, leading-trim을 text-box-trim으로 변경, 초기값도 이름 변경. (이슈 8067)
• line gap metric를 0으로 바닥(floor) 처리. (이슈 5064)

2020년 8월 28일 워킹 드래프트 이후 변경사항:

• inline-sizing을 상속되도록 수정. (이슈 1974)
• inline-sizing의 "적용 대상"에서 루비 박스 제외.
• 편집상 수정 및 누락 이미지 추가 등.

2020년 6월 18일 워킹 드래프트 이후 변경사항:

• leading 값을 initial-letter-align에 추가하여 일부 인도계 문자 관행에 대응. Indic Layout Requirements 참고. (이슈 864)
• 상위에 0이 아닌 패딩/테두리가 있으면 leading-trim 효과가 막히도록 처리. (이슈 5237)
• hebrew 값을 initial-letter-align에서 삭제. (이슈 5208)
• 첫글자 크기가 sink보다 작은 경우 under 정렬점 사용. (이슈 5329)
• 드롭 이니셜 인접 공백을 접도록 처리. (이슈 5120)
• 드롭 이니셜이 올린 이니셜과 text-align에서는 동일하게 동작하도록 수정. (이슈 5207)
• shape-margin, margin, shape-outside의 상호작용을 float와 동일하게 조정(initial-letter-wrap 참고). (이슈 5119)
• em-over와 em-under 기준선 정의 추가(Canvas 2D 참조용). (이슈 5312)
• vertical-align의 (신규) 문법에 대한 미세 조정. (이슈 5235)
• baseline-shift: sub | super의 폴백 이동 정의. (이슈 5225)

2020년 6월 4일 워킹 드래프트 이후 변경사항:

• 이전 line-sizing 및 text-box-trim 제안을 통합해 text-edge와 구조가 다른 leading-trim 신설. (이슈 5168)
• line-relative shift values를 alignment-baseline 장기(longhand)에서 baseline-shift 장기로 이동. (이슈 5180)
• text-edge를 라인 박스 높이 계산에 통합.
• 여러 기준선 정의를 별도 섹션으로 리팩터링하고 [CSS-WRITING-MODES-3]에서 용어/도입부 가져옴.
• [CSS2]에서 인라인 레이아웃 핵심 및 라인 박스 크기 관련 규범적 설명 통합 및 업데이트.
• 원자 인라인의 모든 기준선에 대한 기준선 합성 규칙 정의.
• central baseline을 한자(ideographic) 중앙 기준선으로 명확히 정의.
• 첫글자 박스와 이후 텍스트 간 공백 접힘(collapsing) 정의. (이슈 5120)
• 첫글자 박스의 박스 모델 정의와 컨테이닝 블록과의 상호작용 강화. (이슈 719)
• 기타 소규모 수정, 명확화, 편집 개선.

2018년 8월 8일 워킹 드래프트 이후 변경사항:

• line-sizing 속성 추가, 줄 간격 계산 제어. (이슈 3199)
• baseline-source 속성 추가, 정렬에 첫/마지막 기준선 사용 제어. (이슈 861)
• leading-trim 제안 추가, line-over/line-under 엣지 제어용. (이슈 3240, 3955)
• line-height 정의 및 관련 규범 설명을 [CSS2]에서 가져옴.
• § 2 인라인 레이아웃 모델에서 인라인 레이아웃에 대한 개괄 설명 개선.
• initial-letters를 다시 initial-letter로 이름 변경. (이슈 862)
• 구문 편의를 위한 raise 및 sink 키워드 추가. (이슈 2955)
• 원자 인라인에 기준선 집합이 없을 때 기준선 합성 규칙 명확화.
• middle, text-top, text-bottom의 세로쓰기 모드에서의 해석 명확화. (이슈 4495)
• text-top/text-bottom/text 값이 vertical-align, dominant-baseline, leading-trim, 인라인 박스 콘텐츠 박스 그리기에서 일관되게 해석되어야 함을 명확화. (이슈 3978)
• dominant-baseline의 초기값을 auto로 수정. (이슈 4115)
• vertical-align 장기/단기 사용에 대한 저자 가이드 개선.
• initial-letter와 float/position의 상호작용 명확화.
• § 7.5 첫글자 레이아웃 섹션 재구성, 가독성 개선 및 일부 문장 명확화.
• shape-margin이 글리프 윤곽에 적용됨을 명확화.
• 기준선 합성 규칙에서 永(U+6C38) 사용.
• 첫글자는 형태상 분리됨(isolated)임을 명확히, 이후 텍스트는 연결형임에도. (이슈 2399)

더 이전 2016년 5월 24일 워킹 드래프트 이후 변경사항도 참고.

감사의 글

초기 저자인 Eric A. Meyer와 Michel Suignard에게 특별히 감사드립니다.

저자 외에도, 이 명세는 아래 분들의 도움 없이는 불가능했을 것입니다:

David Baron, Mike Bremford, David M Brown, Oriol Brufau, John Daggett, Stephen Deach, Sylvain Galineau, David Hyatt, Myles Maxfield, Shinyu Murakami, Jan Nicklas, Tess O’Connor, Sujal Parikh, Florian Rivoal, Alan Stearns, Weston Thayer, Bobby Tung, Chris Wilson, Grzegorz Zygmunt.

프라이버시 고려사항

이 명세에 대해 새롭게 보고된 프라이버시 고려사항은 없습니다.

보안 고려사항

이 명세에 대해 새롭게 보고된 보안 고려사항은 없습니다.