CSS 텍스트 장식 모듈 레벨 4

1. 소개

이 절은 비규범적입니다.

이 모듈은 텍스트 글리프를 폰트 및 타이포그래피 규칙에 따라 조판한 후 장식하는, 즉 텍스트 장식에 대해 다룹니다. ([CSS-TEXT-3] 및 [CSS-FONTS-3] 참고.) 이러한 기능들은 전통적으로 단순히 장식 목적뿐만 아니라, 강조 표시, 경칭, 삽입/삭제/오탈자와 같은 편집적 변화를 나타내기 위해서도 사용됩니다.

CSS 레벨 1 및 2는 서양 타이포그래피 전통에 맞는 매우 기본적인 선 장식(밑줄, 윗줄, 취소선)만 정의했습니다. 이 모듈의 3단계에서는 이러한 장식의 색상, 스타일, 위치, 연속성을 변경할 수 있고, 강조 표시(동아시아 타이포그래피에서 전통적으로 사용됨)와 그림자(2단계에서 제안되었다가 연기됨)를 도입하였습니다. 4단계에서는 이러한 장식에 대한 추가 제어 기능을 도입합니다.

1.1. 모듈 상호작용

이 모듈은 [CSS-TEXT-DECOR-3]에서 정의한 텍스트 장식 기능을 대체하고 확장합니다.

이 모듈의 모든 속성은 ::first-line 및 ::first-letter 의사 요소에 적용할 수 있습니다.

1.2. 값 정의

이 명세는 [CSS2]의 CSS 속성 정의 규약을 따르며, [CSS-VALUES-3]의 값 정의 문법을 사용합니다. 이 명세에서 정의되지 않은 값 타입은 CSS 값 및 단위 [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과의 조합은 이러한 값 타입의 정의를 확장할 수 있습니다.

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

1.3. 용어

이 명세에서 사용하는 타이포그래픽 문자 단위(문자), 타이포그래픽 글자 단위(글자), 그리고 콘텐츠 언어는 [CSS-TEXT-3]에서 정의됩니다. 이 명세에서 사용하는 기타 용어나 개념은 [CSS2]와 [CSS-WRITING-MODES-4]에서 정의됩니다.

2. 선 장식: 밑줄, 윗줄, 취소선

다음 속성들은 요소의 콘텐츠에 추가되는 선 장식에 대해 설명합니다. 인라인 박스에 지정되거나 전파되면, 해당 박스는 해당 장식을 위한 장식 박스가 되어, 모든 박스 조각에 장식을 적용합니다. 장식은 이후 인라인을 분할하는 in-flow 블록 레벨 박스에도 전파됩니다 (CSS2.1 9.2.1.1절 참고). 블록 컨테이너에 지정되거나 전파되어 인라인 포맷팅 컨텍스트를 생성하면, 장식은 익명 인라인 박스에 전파되어 in-flow 인라인 레벨 자식 전체를 감쌉니다. 루비 컨테이너에 지정되거나 전파되면, 장식은 루비 베이스에만 전파됩니다. 그 외의 박스 타입에는 모든 in-flow 자식에게 장식이 전파됩니다.

텍스트 장식은 out-of-flow 자손이나 인라인 블록, 인라인 테이블 등 원자적 인라인 레벨 자손의 내용에는 전파되지 않습니다. 또한 인라인 박스의 인라인 자식에게도 전파되지는 않지만, 해당 박스에는 적용됩니다.

밑줄, 윗줄, 취소선은 non-replaced 인라인 박스에만 그려지며, 모든 텍스트(공백, 글자 간격, 단어 간격 포함)에 대해 그려집니다 단, 줄의 처음과 끝의 공백(공백, 글자 간격, 단어 간격)은 제외됩니다. 원자적 인라인(예: 이미지, 인라인 블록)에는 장식이 적용되지 않습니다. 장식 박스의 마진, 테두리, 패딩은 항상 건너뛰지만, 자식 인라인 박스의 마진, 테두리, 패딩은 건너뛰지 않습니다.

CSS 2.1에서는 항상 마진, 테두리, 패딩을 건너뛰도록 요구했습니다. 3단계 이후로는 기본적으로 장식 박스의 마진, 테두리, 패딩만 건너뜁니다. 앞으로 CSS2.1도 이 새로운 기본값에 맞게 업데이트될 수 있습니다.

자식의 상대 위치 지정은 해당 자식에 적용된 모든 텍스트 장식을 자식의 텍스트와 함께 이동시키지만, 해당 줄에서 장식의 최초 위치 계산에는 영향을 주지 않습니다. visibility 속성, text-shadow, 필터, 기타 그래픽 변환 역시 해당 박스에 적용된 모든 텍스트 장식(조상 박스에서 전파된 장식 포함)에 영향을 주며, 장식의 최초 위치나 두께 계산에는 영향을 주지 않습니다. (라인 장식이 원자적 인라인에 그려지거나, non-replaced 인라인 박스의 마진/테두리/패딩에 걸쳐 그려질 경우, 해당 장식은 장식 박스가 아니라 영향을 받는 원자적 인라인/인라인 박스와 연관됩니다.)

blockquote { text-decoration: underline; color: blue; }
em { display: block; }
cite { color: fuchsia; }

<blockquote>
 <p>
  <span>
   Help, help!
   <em> I am under a hat! </em>

   <cite> —GwieF </cite>
  </span>
 </p>
</blockquote>

참고: 선 장식은 상속이 아닌 박스 트리를 따라 전파되며, display: contents가 지정된 요소에 대해선 자손에 아무 효과도 없습니다.

2.1. 텍스트 장식선: text-decoration-line 속성

이 속성은 text-decoration 축약형의 하위 속성으로, 요소에 어떤 선 장식이 추가되는지를 지정합니다. text-decoration-line이 아닌 값은 요소가 해당 텍스트 장식을 생성하고, 위 설명에 따라 적용 및 전파하게 합니다.

참고: 선의 색상, 스타일, 두께가 cascade에서 더 낮은 선언에 의해 설정되길 원하지 않는 한, 이 text-decoration 축약형을 이 긴 형식 대신 사용하는 것이 더 안전합니다.

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

none

텍스트 장식을 생성하거나 방지하지 않습니다.

underline

각 줄의 텍스트에 밑줄을 긋습니다.

overline

각 줄의 텍스트 위에 선을 긋습니다 (즉, 밑줄과 반대쪽).

line-through

각 줄 텍스트의 중간에 선을 긋습니다.

blink

텍스트가 깜빡입니다(보였다 안 보였다 반복). 구현 UA는 텍스트를 깜빡이지 않을 수도 있습니다. 깜빡이지 않는 것은 WAI-UAAG 체크포인트 3.3을 만족시키는 한 방법입니다. 이 값은 Animations [CSS3-ANIMATIONS]을 권장하며 더는 권장되지 않습니다.

spelling-error

UA가 맞춤법 오류를 강조하는 데 사용하는 텍스트 장식 유형을 나타냅니다. 모양은 UA가 정의하며, 플랫폼에 따라 다를 수 있습니다. 일반적으로 빨간 물결 밑줄로 표시됩니다.

grammar-error

UA가 문법 오류를 강조하는 데 사용하는 텍스트 장식 유형을 나타냅니다. 모양은 UA가 정의하며, 플랫폼에 따라 다를 수 있습니다. 일반적으로 초록색 물결 밑줄로 표시됩니다.

참고: 세로 쓰기 모드에서는 text-underline-position에 따라 밑줄과 윗줄의 위치가 바뀔 수 있습니다. 이를 통해 밑줄 위치가 언어별 선호도에 맞게 자동으로 조정됩니다.

spelling-error와 grammar-error 장식은 전적으로 UA가 정의하므로, UA는 하위 속성이나 선 장식의 모양에 영향을 주는 기타 속성(text-underline-position, color, stroke, fill 등)을 무시할 수 있습니다. 하지만 UA의 선택적 렌더링에 따라 이러한 속성 중 일부를 적용하는 것이 의미 있고 실용적이라면, UA는 기본 스타일에 대한 수정으로 이를 적용해야 합니다.

2.2. 텍스트 장식 스타일: text-decoration-style 속성

이 속성은 text-decoration 축약형의 하위 속성으로, 요소에 text-decoration-line으로 지정된 밑줄, 윗줄, 취소선의 선 그리기 스타일을 설정합니다. 하위 박스가 다른 스타일을 지정하더라도, 이 요소에서 시작된 모든 장식에 영향을 미칩니다.

값의 의미는 border-style 속성 [CSS-BACKGROUNDS-3]과 동일합니다. wavy는 물결선임을 나타냅니다.

2.3. 텍스트 장식 색상: text-decoration-color 속성

이 속성은 text-decoration 축약형의 하위 속성으로, 요소에 text-decoration-line으로 지정된 밑줄, 윗줄, 취소선의 색상을 설정합니다. 하위 박스가 다른 색상을 지정하더라도, 이 요소에서 시작된 모든 장식에 영향을 미칩니다.

2.4. 텍스트 장식선 두께: text-decoration-thickness 속성

이 속성은 text-decoration 축약형의 하위 속성으로, 요소에 text-decoration-line으로 지정된 밑줄, 윗줄, 취소선의 선 두께를 설정합니다. 하위 박스가 다른 두께를 지정하더라도, 이 요소에서 시작된 모든 장식에 영향을 미칩니다.

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

auto

UA가 텍스트 장식선에 적합한 두께를 선택합니다. 아래 참고.

from-font

첫 사용 가능 폰트가 선호하는 밑줄 두께 메트릭을 제공하는 경우 해당 두께를 사용하고, 그렇지 않으면 auto처럼 동작합니다.

<length>

텍스트 장식선의 두께를 고정 길이로 지정합니다. UA는 실제 값을 장치의 한 픽셀로 내림해야 합니다.

참고: 길이는 고정값으로 상속되며, 폰트 크기에 따라 스케일되지 않습니다.

<percentage>

텍스트 장식선의 두께를 1em의 백분율로 지정합니다. UA는 실제 값을 장치의 한 픽셀로 내림해야 합니다.

참고: 백분율은 상대값으로 상속되어, 상속 시 폰트 크기 변화에 따라 스케일됩니다.

2.4.1. 텍스트 장식선의 자동 두께

일부 폰트 포맷(OpenType 등)은 선 장식에 적합한 두께 정보를 제공합니다. UA는 auto 두께를 선택할 때 가능하면 이러한 폰트 기반 정보를 사용해야 합니다.

2.5. 선 장식의 위치와 두께 결정

이 절은 Text Decoration Level 3의 초기 초안에서 복사된 내용입니다. 아직 검토 중이며, text-underline-offset 및 text-decoration-thickness와의 통합이 필요합니다.

선 장식은 다양한 폰트 크기와 수직 정렬을 가진 요소에 걸칠 수 있으므로, 선 장식의 최적 위치는 장식 박스에 의해 이상적으로 지정된 위치와 반드시 일치하지는 않습니다. 대신, 각 줄마다 해당 줄에서 장식 박스가 장식하는 모든 텍스트로부터 계산되며, 이를 대상 텍스트라 합니다. 그러나 장식 박스의 자손 중 text-decoration-skip으로 인해 건너뛰는 자손, text-decoration-skip: ink이 지정된 자손 인라인, 그리고 장식 박스의 인라인 포매팅 컨텍스트에 참여하지 않는 모든 자손은 대상 텍스트 집합에서 제외됩니다.

선 장식의 위치는 각 줄마다 다음과 같이 계산됩니다 (over 위치의 밑줄은 over 선, under 위치의 윗줄은 under 선으로 처리합니다):

over 선

선 장식을 over EM-box의 가장 높은 edge에 맞춥니다. (기준: 대상 텍스트)

알파벳 밑줄

알파벳 밑줄 위치는 각 대상 텍스트 run의 이상적 오프셋(알파벳 기준선으로부터)을 취해 평균을 내고, 실제로는 가장 낮은 알파벳 기준선을 사용해 선을 위치시킵니다. (지배적 기준선이 비알파벳일 경우, baseline 정렬된 박스 간 기준선이 다를 수 있음.) 윗첨자/아랫첨자가 위치를 어긋나게 하지 않도록, vertical-align이 기본값이 아닌 인라인은 부모의 이상적 밑줄 위치를 갖는 것으로 처리합니다.

비알파벳 under 선

선 장식을 under EM-box의 가장 낮은 edge에 맞춥니다. (기준: 대상 텍스트)

취소선(line-through)

취소선은 알파벳 밑줄과 유사한 평균값 산출을 사용하지만, 자손에 다른 font-size가 있을 때마다 위치를 다시 계산합니다. (이로써 폰트 크기가 달라져도 텍스트가 효과적으로 "취소선" 처리됨을 보장합니다.) 동일한 font-size를 가진 대상 텍스트의 각 run마다 폰트 메트릭에서 이상적 위치를 평균내어 계산합니다. 윗첨자/아랫첨자가 위치를 어긋나게 하지 않도록, vertical-align이 기본값이 아닌 인라인은 부모의 이상적 밑줄 위치를 갖는 것으로 처리합니다. 각 장식된 조각마다 해당 위치에 선을 그립니다.

단순화를 위해, 취소선은 각 요소에서 그 요소의 선호/평균 위치에 그려야 합니다. 이로 인해 다소 튀는 현상이 나타날 수 있지만, 모든 경우에 정답이 될 수 있는 방법이 없고, 모든 시도는 지나치게 복잡해집니다. 대상 텍스트 없이 font-size만 다른 요소 위에서는 취소선 위치를 어떻게 해야 할까요?

CSS는 선 장식의 두께를 정의하지 않습니다. 텍스트 장식선의 두께를 결정할 때, 사용자 에이전트는 적절한 평균 두께를 제공하기 위해 자손의 폰트 크기, 폰트 패밀리, 두께를 고려할 수 있습니다.

2.6. 텍스트 장식 축약형: text-decoration 속성

이 속성은 text-decoration-line, text-decoration-thickness, text-decoration-style, text-decoration-color를 한 번에 지정하는 축약형입니다. 생략된 값은 각 속성의 초기값으로 설정됩니다.

:link {
  color: blue;
  text-decoration: underline;
  text-decoration: navy dotted underline; /* CSS1/CSS2 UA에서는 무시됨 */
}

참고: 축약형에는 text-underline-position 속성이 의도적으로 포함되어 있지 않습니다. 이 속성은 언어/쓰기 체계에 따라 콘텐츠에 맞게 달라지는 세팅이므로, (상속되지 않는) text-decoration 축약형의 스타일 설정과는 독립적으로 계단식/상속될 수 있도록 합니다.

2.7. 밑줄 위치: text-underline-position 속성

이 속성은 text-decoration 축약형의 하위 속성이 아닙니다. 이 속성은 밑줄을 텍스트에 대해 어느 위치에 그릴지 지정하며, 제로 위치를 정의하여 text-underline-offset로 추가 조정할 수 있습니다. 하위 박스가 다른 위치를 지정하더라도, 이 요소에서 시작된 모든 장식에 영향을 미칩니다. 조상 요소가 지정한 밑줄에는 영향을 주지 않습니다.

:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; }
:root:lang(zh), [lang|=zh] { text-underline-position: under left; }

left 또는 right만 지정된 경우, auto도 암시됩니다. 값의 의미는 다음과 같습니다:

auto

사용자 에이전트는 밑줄 위치를 결정하는 어떤 알고리즘도 사용할 수 있습니다. 단, 반드시 알파벳 기준선 또는 그 아래에 위치해야 합니다.

참고: 기본 밑줄 위치는 알파벳 기준선 바로 아래가 적합하나, 만약 그 위치가 아래첨자(또는 그 외로 내려간) 텍스트를 가로지르거나, 한자, 티베트 문자 등 아시아 문자처럼 알파벳 기준선이 너무 높은 경우에는 밑줄을 더 아래로 내리거나 under 설명처럼 em box edge에 맞추는 것이 더 적합할 수 있습니다.

일반적인 “알파벳형” 밑줄은 알파벳 기준선 바로 아래에 위치합니다.

from-font

첫 사용 가능 폰트가 선호하는 밑줄 오프셋 메트릭을 제공하는 경우 해당 값을 사용하고, 그렇지 않으면 auto처럼 동작합니다.

under

밑줄을 요소의 텍스트 콘텐츠 아래에 위치시킵니다. 이 경우 밑줄이 보통 글자의 내려오는 부분(descender)을 가로지르지 않습니다. (때로 "회계 밑줄"이라 부르기도 함.) 이 값은 수직 타이포그래피 모드에서 left 또는 right와 조합할 수 있습니다.

text-underline-position: under

text-underline-position은 상속되며, text-decoration 축약형에 의해 초기화되지 않으므로, 다음 예시는 문서 전체에 under 밑줄을 사용하도록 전환합니다. 이 방식은 내려오는 부분이 많은 문자체계, 수학/화학 등 첨자가 많은 텍스트에 적합합니다.

:root { text-underline-position: under; }

참고: under 값이 밑줄이 글리프와 겹치지 않음을 보장하지는 않습니다. 일부 폰트는 내려오는 부분이나 분음부가 폰트의 descent 메트릭 아래로 확장될 수 있습니다.

left

수직 타이포그래피 모드에서 밑줄은 under와 같이 정렬하되, 항상 텍스트의 왼쪽에 맞춥니다. 이로 인해 밑줄이 텍스트의 "over" 쪽에 그려지면, 윗줄도 위치를 바꿔 "under" 쪽에 그려집니다.

right

수직 타이포그래피 모드에서 밑줄은 under와 같이 정렬하되, 항상 텍스트의 오른쪽에 맞춥니다. 이로 인해 밑줄이 텍스트의 "over" 쪽에 그려지면, 윗줄도 위치를 바꿔 "under" 쪽에 그려집니다.

left	right

수직 타이포그래피 모드에서 text-underline-position 값 left와 right 는 밑줄을 텍스트의 어느 쪽에 둘지 지정할 수 있습니다. (수평 타이포그래피 모드에서는 두 값 모두 auto로 취급됩니다.)

2.8. 밑줄 오프셋: text-underline-offset 속성

이 속성은 text-decoration 축약형의 하위 속성이 아닙니다. 이 속성은 밑줄의 제로 위치로부터의 오프셋을 지정합니다. 양수 오프셋은 텍스트로부터 바깥쪽, 음수 오프셋은 안쪽 거리를 의미합니다. 하위 박스가 다른 위치를 지정하더라도, 이 요소에서 시작된 모든 장식에 영향을 미칩니다. 조상 요소가 지정한 밑줄에는 영향을 주지 않습니다.

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

auto

UA가 밑줄의 적절한 오프셋을 선택합니다.

단, text-underline-position의 계산값이 from-font이고, UA가 폰트에서 적절한 메트릭을 추출해 사용할 수 있었다면 이 오프셋은 0이어야 합니다.

<length>

밑줄의 오프셋을 고정 길이로 지정합니다.

참고: 길이는 고정값으로 상속되며, 폰트 크기에 따라 스케일되지 않습니다.

<percentage>

밑줄의 오프셋을 1em의 백분율로 지정합니다.

참고: 백분율은 상대값으로 상속되어, 상속 시 폰트 크기 변화에 따라 스케일됩니다.

text-decoration-line 속성 값이 spelling-error 또는 grammar-error일 때, UA는 text-underline-position 값을 무시할 수 있습니다.

2.8.1. 밑줄 오프셋 기준점(제로 위치)

제로 위치는 밑줄의 기준점이며, 아래에 설명된 text-underline-position 값에 따라 달라집니다.

밑줄은 지정된 위치의 바깥쪽(positive 방향)으로 두께가 확장되도록 정렬됩니다.

자손 콘텐츠에 맞춘 자동 조정이 있다면 그대로 유지되며, text-underline-offset는 그 위에 추가로 적용됩니다.

2.8.2. 폰트 메트릭을 이용한 자동 위치 지정

일부 폰트 포맷(OpenType 등)은 선 장식에 적합한 위치 정보를 제공합니다. UA는 auto 오프셋을 선택할 때 적절하다면 이러한 폰트 기반 정보를 사용해야 하며, from-font가 text-underline-position에 지정된 경우 반드시 사용해야 합니다.

참고: 일반적으로 OpenType 폰트 메트릭은 alphabetic 밑줄 위치를 제공합니다. (CJK 폰트 등 일부 경우에는 under left 밑줄 위치를 제공하기도 합니다. 이때 폰트의 밑줄 메트릭은 em 박스 하단 edge에 닿는 경우가 많습니다.) UA는 폰트 메트릭이 잘못된 경우 보정할 수도 있고, 반드시 보정하지 않아도 됩니다.

2.9. 텍스트 장식선의 균일성

선 장식의 정확한 위치와 두께는 위에서 정의한 text-underline-position, text-underline-offset, text-decoration-thickness 값에 따라 달라지며, 그 외 부분은 UA가 정의합니다. 단, 밑줄과 윗줄의 경우 UA는 한 장식 박스에서 파생된 장식에 대해 한 줄마다 두께와 위치를 통일해 사용해야 합니다.

vs.

올바른/잘못된 렌더링 예시: <u>A<sup>B</sup><big>C</big>D</u>

참고: 선 장식은 다양한 폰트 크기와 수직 정렬을 가진 요소에 걸칠 수 있으므로, 선 장식의 최적 위치는 장식 박스에 의해 지정된 이상적 위치와 반드시 일치하지는 않습니다. 예를 들어, 작은 폰트에 맞춘 윗줄은 그 요소에 큰 폰트 텍스트가 포함될 경우 실질적으로 취소선이 될 수 있습니다. 밑줄의 경우도, 텍스트가 알파벳 기준선에 정렬되지 않으면 (예: 세로 조판 스타일에서 텍스트는 기본적으로 중앙 기준선에 정렬됨 [CSS-WRITING-MODES-4]) 큰 폰트 자식의 텍스트를 밑줄이 관통하게 됩니다. UA가 자손 콘텐츠를 고려하면 더 나은 타이포그래피 결과를 얻을 수 있습니다.

세로 텍스트의 중앙 기준선 정렬로 인해, 작은 세로 텍스트의 왼쪽 밑줄은 더 큰 폰트 크기의 자식 텍스트를 관통하게 됩니다. 밑줄을 분리해서 그릴 수는 없으며, 위치를 더 왼쪽으로 조정하면 모든 밑줄 텍스트를 제대로 감쌀 수 있습니다.

UA는 vertical-align이 baseline이 아니거나 [CSS2]에서 첨자(sup/sub) 처리된 장식 박스에 대해 반드시 선 위치를 해당 박스의 이동된 메트릭에 맞추어 조정해야 하며, font-variant-position [CSS-FONTS-3] 등으로 첨자 처리된 경우에도 마찬가지입니다. 단, 이렇게 스타일된 장식 박스의 자손에 대해서는 선 위치나 두께를 조정하면 안 됩니다 (다만, 위에서 언급한 것처럼 단지 폰트 크기가 다른 자손 등은 조정해도 무방). 이를 통해 윗첨자/아랫첨자에 장식(밑줄, 취소선 등)을 제대로 적용할 수 있으면서도, 조상 장식의 위치가 왜곡·분리되는 것을 방지할 수 있습니다.

윗첨자에만 밑줄 적용한 경우와, 윗첨자를 포함한 텍스트 전체에 밑줄 적용한 예

2.10. 텍스트 장식선 연속성: text-decoration-skip 축약형 및 하위 속성

CSSWG에서는 text-decoration-skip-ink과 같이 개별 속성으로 나누어 계단식 동작을 개선하기로 결정했습니다. 관련 논의와 결의 참고. 이 절은 초안이며 CSSWG의 검토를 거치지 않았습니다.

text-decoration-skip 및 그 하위 속성(text-decoration-skip-self, text-decoration-skip-box, text-decoration-skip-inset, text-decoration-skip-spaces, text-decoration-skip-ink) 는 해당 요소 또는 조상이 장식 박스일 때 장식선이 중단되는 방식을 제어합니다. none 값은 모든 하위 속성을 none으로 설정하며, auto 값은 모든 하위 속성을 초기값으로 설정합니다.

이 none 정의가 웹 호환성이 있는지? 웹 호환성을 위해 ink 값도 추가해야 할까요?

이 속성들은 상속되며, 자손 요소는 서로 다른 설정을 가질 수 있습니다.

HTML 기본 UA 스타일시트에는 다음 내용이 추가됩니다:

ins, del { text-decoration-skip: none; }

text-decoration-line 속성 값이 spelling-error 또는 grammar-error일 때, UA는 이 속성들을 모두 무시할 수 있습니다.

2.10.1. 공백 건너뛰기: text-decoration-skip-self 속성

CSSWG에서는 text-decoration-skip을 하위 속성으로 분할하기로 결정했으나, 이 값 집합은 아직 CSSWG의 검토를 거치지 않았습니다.

이 속성은 조상에 의해 그려진 텍스트 장식선이 이 요소에 전파되거나 가로지르는지 여부를 지정합니다. 값의 의미는 다음과 같습니다:

none

아무것도 건너뛰지 않음: 조상 장식 박스의 장식선이 이 박스에 전파되거나 가로질러 그려짐.

objects

이 요소가 원자적 인라인(예: 이미지, 인라인 블록)일 경우, 이 요소(전체 margin box)를 건너뜀.

2.10.2. 공백 건너뛰기: text-decoration-skip-box 속성

CSSWG에서는 text-decoration-skip을 하위 속성으로 분할하기로 결정했으나, 이 값 집합은 아직 CSSWG의 검토를 거치지 않았습니다.

이 속성은 해당 요소에 영향을 주는 텍스트 장식선이 요소의 박스 영역 중 어느 부분을 건너뛰어야 하는지 지정합니다. 이 속성은 조상에 의해 그려진 텍스트 장식선에만 영향을 줍니다. 값의 의미는 다음과 같습니다:

none

아무것도 건너뛰지 않음: 조상 장식 박스의 장식선은 margin에서 margin까지 전체 영역에 그려짐.

all

조상 장식 박스에 적용된 텍스트 장식선을 그릴 때, 이 박스의 margin, border, padding 영역은 건너뛰고 content 영역 내에서만 선을 그림.

이 값은 조상에 의해 적용된 장식선에만 효과가 있으며, 장식 박스 자신은 자기 박스 장식 위에 선을 그리지 않음.

2.10.3. 인셋 에지: text-decoration-skip-inset 속성

CSSWG에서는 text-decoration-skip을 하위 속성으로 분할하기로 결정했으나, 이 값 집합은 아직 CSSWG의 검토를 거치지 않았습니다.

이 속성은 요소의 박스 영역 중 텍스트 장식이 건너뛰어야 하는 부분을 지정합니다. 이 속성은 해당 요소가 그리는 모든 텍스트 장식선에만 적용되며, 조상이 그리는 텍스트 장식선에는 적용되지 않습니다. 값의 의미는 다음과 같습니다:

none

아무것도 건너뛰지 않음: 텍스트 장식선이 박스 에지에서 에지까지 그려집니다.

auto

UA는 장식선의 시작과 끝을 장식 박스의 콘텐츠 에지에서 약간 안쪽으로 배치해야 하며, 예를 들어 두 개의 밑줄 요소가 나란히 있을 때 단일 밑줄처럼 보이지 않도록 해야 합니다. 인셋의 크기는 UA에 따라 다르지만(예: 선 두께의 절반) 0이 아니어야 합니다. (중국어에서 밑줄은 구두점의 한 형태이기 때문에 중요합니다.)

text-decoration-skip-inset: auto — <u>石井</u><u>艾俐俐</u>

이 속성은 text-decoration-skip 세트의 일부가 아니라 독립 속성이어야 할 수도 있습니다. 선 길이를 명시적으로 제어하는 것에 대한 이슈 4557도 참고하세요.

2.10.4. 공백 건너뛰기: text-decoration-skip-spaces 속성

웹 호환성을 위해 초기값을 none으로 해야 할까요? 아니라면, INS와 DEL에는 최소한 UA 기본 스타일시트에서 none을 할당해야 할 것입니다. 이슈 4653도 참고하세요.

이 속성은 텍스트 장식이 공백을 건너뛸지 여부를 지정합니다. 이 속성은 해당 요소가 그리는 모든 텍스트 장식선과 조상이 그리는 모든 텍스트 장식선에도 영향을 줍니다. 값의 의미는 다음과 같습니다:

none

공백 문자는 건너뛰지 않습니다. 다른 문자와 동일하게 장식이 적용됩니다.

all

모든 공백 문자와 인접한 letter-spacing 또는 word-spacing도 건너뜁니다.

start

줄의 시작에 위치한 모든 공백 문자와 인접한 letter-spacing 또는 word-spacing을 건너뜁니다.

end

줄의 끝에 위치한 모든 공백 문자와 인접한 letter-spacing 또는 word-spacing을 건너뜁니다.

이 속성에서 공백 문자란, Unicode White_Space 속성 [UAX44]을 가진 타이포그래픽 문자 단위(단, U+202F NARROW NO-BREAK SPACE 제외)나, 단어 분리자를 의미합니다.

2.10.5. 글리프 건너뛰기: text-decoration-skip-ink 속성

이 속성은 장식선이 글리프를 가로지를 때 윗줄/밑줄을 어떻게 그릴지 제어합니다. 이 속성은 하위 박스가 다른 스타일을 지정하더라도 이 요소에서 시작된 모든 장식에 영향을 줍니다.

활성화 시, 장식선은 글리프가 그려진 부분을 건너뜁니다: 장식선이 글리프를 가로지를 위치에서 선을 끊어 텍스트 모양이 드러나도록 합니다. UA는 글리프 외곽선 양쪽에 약간의 간격도 건너뛰어야 합니다.

글리프 잉크 건너뛰기

이 속성은 윗줄/밑줄에만 적용되며, 취소선(line-through)에는 항상 연속적으로 선이 그려집니다.

auto

UA는 밑줄/윗줄이 글리프 잉크를 가로지르는 곳과 외곽선 양쪽 일정 거리에서 선을 멈추어도 됩니다. UA는 어떤 콘텐츠 범위에 잉크 건너뛰기를 적용할지 결정할 때(아래 주 참고) 텍스트의 문자체계를 고려해야 합니다.

all

UA는 밑줄/윗줄이 글리프 잉크를 가로지르는 곳과 외곽선 양쪽 일정 거리에서 반드시 선을 멈춰야 합니다.

none

UA는 밑줄/윗줄이 글리프를 가로지르더라도 반드시 연속적으로 선을 그려야 합니다.

2.10.6. 모양 방해 처리

UA가 밑줄 또는 윗줄을 글리프 경계에서 끊을 때, 해당 경계의 선 모양은 글리프의 형태를 따라야 합니다.

참고: 이 명세는 의도적으로 "글리프 형태 따르기"의 특정 방법을 강제하지 않으므로, UA는 심미성과 성능을 고려해 적절한 방식을 사용할 수 있습니다. 예를 들어, 성능상 임계값 이하에서는 선 끝을 사각형으로 처리할 수도 있고, 얇은 장식선에서는 곡선을 근사하기 위해 사다리꼴 끝을 사용할 수도 있습니다. 심미성 측면에서는, 글리프 경계가 선 두께의 일부만 교차하거나 거의 수평에 가까울 때 곡선을 정확히 따를 경우 어색한 잔여선이 생길 수 있습니다. 글리프 내부에 닫힌 영역이 있을 때 선을 보일지 여부도 또 다른 고려점입니다.

고리 내부의 밑줄을 숨기면 더 깔끔한 인상을 주며, 외곽 곡선을 따라가는 밑줄 끝은 해당 글자를 통해 밑줄이 이어짐을 암시해줍니다.

3. 강조 표시를 위한 추가 제어

동아시아 문서에서는 전통적으로 텍스트 일부를 강조하기 위해 각 글리프 옆에 작은 기호(강조 부호)를 사용합니다. 예시:

일본어 텍스트에 적용된 악센트 강조(파란색으로 표시)

text-emphasis 축약형과, 그 하위 text-emphasis-style, text-emphasis-color 속성으로 텍스트에 강조 부호를 적용할 수 있습니다. 별도로 상속되는 text-emphasis-position 속성은 강조 부호의 위치를 텍스트 기준으로 지정할 수 있게 합니다.

크기/위치 연속성 관련 이슈도 참고하세요.

3.1. 강조 부호 스타일: text-emphasis-style 속성

이 속성은 요소의 텍스트에 강조 부호를 적용합니다. 값의 의미는 다음과 같습니다:

none

강조 부호 없음.

filled

모양이 실색으로 채워집니다.

open

모양이 비어 있습니다.

dot

작은 원 모양 부호를 표시합니다. 채워진 점은 U+2022 '•', 빈 점은 U+25E6 '◦'입니다.

circle

큰 원 모양 부호를 표시합니다. 채워진 원은 U+25CF '●', 빈 원은 U+25CB '○'입니다.

double-circle

이중 원 모양 부호를 표시합니다. 채워진 이중 원은 U+25C9 '◉', 빈 이중 원은 U+25CE '◎'입니다.

triangle

삼각형 모양 부호를 표시합니다. 채워진 삼각형은 U+25B2 '▲', 빈 삼각형은 U+25B3 '△'입니다.

sesame

깨 모양 부호를 표시합니다. 채워진 깨는 U+FE45 '﹅', 빈 깨는 U+FE46 '﹆'입니다.

<string>

지정한 문자열을 부호로 표시합니다. 작성자는 <string>에 하나의 문자만 지정해야 하며, UA는 하나 이상의 그래핀 클러스터로 구성된 문자열은 잘라내거나 무시할 수 있습니다.

모양 키워드가 지정되었으나 filled 또는 open이 지정되지 않은 경우, filled가 기본값입니다. filled 또는 open만 지정한 경우, 수평 타이포그래픽 모드에서는 circle, 세로 타이포그래픽 모드에서는 sesame로 계산됩니다.

부호는 요소의 폰트 설정(추가로 ruby 기능 추가, 크기는 50% 축소)에 따라 그려야 합니다. 단, 모든 폰트가 모든 글리프를 갖고 있지 않거나 부호 코드 포인트에 부적절한 크기를 사용하는 경우가 있으므로, UA는 강조 부호에 적합한 폰트를 사용할 수 있고, 또는 UA가 부호를 합성할 수도 있습니다. 세로 타이포그래픽 모드에서는 부호를 반드시 세워서(회전하지 않고) 그려야 하며, CJK 문자처럼 쓰기 방향에 따라 회전하지 않습니다. 수평 타이포그래픽 모드를 가진 세로 쓰기 모드의 경우 부호의 방향은 이 레벨에서 정의하지 않습니다(필요하다면 미래 레벨에서 정의될 수 있음).

참고: 강조 부호에 적합한 폰트의 예로 Adobe의 오픈소스 Kenten Generic OpenType Font가 있습니다.

부호는 각 타이포그래픽 문자 단위마다 한 번씩 그려집니다. 단, 다음과 같은 경우에는 강조 부호가 그려지지 않습니다:

• 단어 분리자 또는 유니코드 구분자 클래스(Z*)에 속하는 문자. (단, 결합 문자와 결합된 공백에는 부호가 그려집니다.)
• 구두점--즉, 유니코드 P* 일반 카테고리에 속하지만 아래 기호로 NFKD 정규화되지 않는 문자:

  #	U+0023	숫자 기호
  %	U+0025	퍼센트 기호
  ‰	U+2030	퍼밀 기호
  ‱	U+2031	만분율 기호
  ٪	U+066A	아라비아 퍼센트 기호
  ؉	U+0609	아라비아-인디아 퍼밀 기호
  ؊	U+060A	아라비아-인디아 만분율 기호
  &	U+0026	앰퍼샌드
  ⁊	U+204A	티로니아 부호 ET
  @	U+0040	상업용 AT 기호
  §	U+00A7	섹션 기호
  ¶	U+00B6	필크로우 기호
  ⁋	U+204B	반전 필크로우 기호
  ⁓	U+2053	스윙 대시
  〽	U+303D	부분 교대 마크

• 제어 코드(Cc, Cf) 및 할당되지 않은 문자(Cn) 유니코드 클래스에 속하는 문자.

참고: 어떤 문자에 부호를 그릴지 제어하는 기능은 레벨 4에서 추가될 예정입니다. (구두점 목록 역시 특히 비-CJK 구두점에 대해 더 정교해질 수 있습니다.)

3.2. 강조 부호 색상: text-emphasis-color 속성

이 속성은 강조 부호의 전경색을 지정합니다.

참고: currentcolor 키워드는 그 자체로 계산되며, 상속 후 color 값으로 해석됩니다. 즉, text-emphasis-color는 기본적으로 텍스트 color와 동일하게 적용되며, color가 요소마다 달라져도 이를 따릅니다.

3.3. 강조 부호 축약형: text-emphasis 속성

이 속성은 text-emphasis-style과 text-emphasis-color를 한 번에 지정하는 축약형입니다. 생략된 값은 각 속성의 초기값으로 설정됩니다.

참고: text-emphasis-position은 이 축약형에서 재설정되지 않습니다. 일반적으로 모양/색상은 바뀌더라도 위치는 언어마다 문서 전체에 걸쳐 일관되게 사용되므로, 위치는 별도로 상속되어야 합니다.

3.4. 강조 부호 위치: text-emphasis-position 속성

이 속성은 강조 부호가 어디에 그려질지 지정합니다. [ right | left ]를 생략하면 기본값은 right입니다. 값의 의미는 다음과 같습니다:

over

수평 타이포그래픽 모드에서 텍스트 위에 부호를 그립니다.

under

수평 타이포그래픽 모드에서 텍스트 아래에 부호를 그립니다.

right

세로 타이포그래픽 모드에서 텍스트 오른쪽에 부호를 그립니다.

left

세로 타이포그래픽 모드에서 텍스트 왼쪽에 부호를 그립니다.

강조 부호는 각 문자가 해당 부호를 루비 주석 텍스트로 할당받고 루비 위치는 text-emphasis-position, 정렬은 중앙인 것처럼 정확히 그려집니다. 단, 이 위치가 밑줄/윗줄 장식과 충돌하는 경우 조정될 수 있습니다.

강조 부호가 줄 높이에 미치는 영향은 루비 텍스트와 동일합니다.

참고: 강조 부호의 선호 위치는 언어에 따라 다릅니다. 예를 들어 일본어의 기본 위치는 over right이고, 중국어는 under right입니다. 아래 표는 중국어·일본어의 선호 강조 부호 위치를 요약한 것입니다:

언어별 권장 강조 부호 및 루비 위치

언어	권장 위치		예시
	수평	수직
일본어	over	right
한국어
몽골어
중국어	under	right

강조 부호가 루비와 같은 위치에 그려지는 문자에 적용된 경우, 강조 부호는 루비 바깥쪽에 배치됩니다. 여기에는 auto-hidden 및 빈 루비 주석도 포함됩니다.

루비가 있는 2글자, 없는 2글자에 모두 강조 부호가 적용된 예시

ruby { text-emphasis: none; }

em { text-emphasis: dot; } /* <em> 요소에 강조 부호 적용 */
em rt { display: none; }   /* <em> 내부 루비 감추기 */

3.5. 강조 표시 건너뛰기: text-emphasis-skip 속성

이 섹션은 아이디어 수집 중입니다. 출판물마다 원하는 동작이 다름에도 불구하고 이 속성이 실제로 필요한지 여부는 아직 명확하지 않습니다.

이 속성은 어떤 문자에 강조 표시가 그려지는지를 설명합니다. 값은 다음과 같은 의미를 가집니다:

spaces

단어 구분자 또는 기타 문자로서 유니코드 구분자 범주(Z*)에 속하는 문자를 건너뜁니다. (단, 결합 문자와 결합된 공백에는 강조 표시가 그려집니다.)

punctuation

구두점을 건너뜁니다. 여기서 구두점은 유니코드 P* 범주에 속하지만 아래의 symbols로 정의되지 않은 문자를 포함합니다.

symbols

기호를 건너뜁니다. 여기서 기호는 모든 전형적 문자 단위 중 유니코드 S* 일반 범주에 속하는 것과 NFKD 동등한 [UAX15] 값이 아래의 유니코드 Po 범주 문자와 동일한 것을 포함합니다:

#	U+0023	넘버 기호
%	U+0025	퍼센트 기호
‰	U+2030	퍼밀 기호
‱	U+2031	만분율 기호
٪	U+066A	아랍어 퍼센트 기호
؉	U+0609	아랍-인디언 퍼밀 기호
؊	U+060A	아랍-인디언 만분율 기호
&	U+0026	앰퍼샌드
⁊	U+204A	TIRONIAN SIGN E[[
@	U+0040	상업용 앳(@)
§	U+00A7	섹션 기호
¶	U+00B6	필크로우(문단 기호)
⁋	U+204B	반전 필크로우
⁓	U+2053	물결 대시
〽️	U+303D	파트 교대 기호

narrow

유니코드 데이터베이스의 East_Asian_Width 속성 [UAX11] 값이 F(전각) 또는 W(와이드)가 아닌 문자들을 건너뜁니다. [UAX44]

제어 코드 및 할당되지 않은 문자(Cc, Cf, Cn)로 유니코드 클래스에 속하는 문자는 이 속성 값과 관계없이 항상 건너뜁니다.

이 문법은 UA가 공백에 대해 강조 표시를 그릴 것을 요구합니다. 실제로 그런 경우가 필요한가요? 필요 없다면, 문법을 수정하여 공백에 강조 표시를 그리지 않도록 해야 할까요?

초기값 논의도 참고하세요.

4. 텍스트 그림자: text-shadow 속성

이 속성은 요소의 텍스트에 적용할 쉐도우 효과를 쉼표로 구분된 리스트로 받습니다. 값은 box-shadow [CSS-BACKGROUNDS-3]와 동일하게 해석됩니다. 각 계층은 요소의 텍스트 및 모든 텍스트 장식(합성된 상태) 위에 그림자를 만듭니다. 쉐도우 효과는 앞쪽(첫 번째 쉐도우가 맨 위)에 적용됩니다. 따라서 그림자가 서로 겹칠 수 있습니다.

box-shadow와 달리, 확산 거리(spread distance)는 항상 글리프 윤곽선의 임의의 점에서 바깥쪽 거리로 해석되며, 블러 반지름과 유사하게 둥근 모서리를 만듭니다. 음수 확산 값은 유효하지 않습니다.

모서리의 형태를 정의하지 않은 채 둘 것인가요? [Issue #7250]

외부 텍스트 그림자 (inset 키워드 없이 지정된 경우) 텍스트—및 텍스트 스트로크 [FILL-STROKE-3] 포함—를 잘라내어 주변 캔버스 위로 띄운 것처럼 그림자를 만듭니다. box-shadow와 달리, 외부 텍스트 그림자는 그림자 형태에 클리핑되지 않으며, 텍스트가 반투명할 경우 그림자가 비칠 수 있습니다.

내부 텍스트 그림자 (inset 키워드와 함께 지정된 경우) 텍스트를 잘라내어 주변 캔버스 아래로 떨어뜨린 것처럼 캔버스와 텍스트 스트로크 [FILL-STROKE-3]에 그림자를 만듭니다. 따라서 스트로크의 내부 경계 내에서만 그려집니다.

외부 텍스트 그림자는 요소의 테두리/배경(존재한다면)과 요소의 텍스트 및 텍스트 장식 사이의 스택 레벨에 그려져야 합니다. 내부 텍스트 그림자는 텍스트 및 장식 위에 그려져야 합니다. UA는 동일한 스택 레벨 및 스태킹 컨텍스트에 속하는 인접 요소의 텍스트 위에 텍스트 그림자를 그리는 것을 피해야 합니다. (이것은 그림자의 정확한 스택 레벨이 요소에 테두리나 배경이 있는지에 따라 달라질 수 있음을 의미함: 텍스트 그림자의 정확한 스태킹 동작은 UA 정의입니다.)

스트로크와의 스태킹 관계? [Issue #7251]

box-shadow와 마찬가지로, 텍스트 그림자는 레이아웃에 영향을 주지 않으며, 스크롤을 유발하거나 스크롤 가능한 오버플로우 영역의 크기를 증가시키지 않습니다.

text-shadow 속성은 ::first-line 및 ::first-letter 의사 요소 모두에 적용됩니다.

5. 텍스트 장식 그리기

5.1. 텍스트 장식의 그리기 순서

[CSS2]와 같이, 텍스트 장식은 장식 대상 텍스트 바로 위/아래에 다음 순서(가장 아래부터)로 그려집니다:

• 그림자 (text-shadow)
• 밑줄 (text-decoration)
• 윗줄 (text-decoration)
• 텍스트
• 강조 표시 (text-emphasis)
• 취소선 (text-decoration)

선 장식이 박스 장식이나 원자 인라인 위에 그려질 경우, 비포지셔닝 콘텐츠 위에, 포지셔닝된 자식 바로 아래(즉 CSS2.1 부록 E의 레이어 #8 바로 아래)에 그려집니다.

5.2. 텍스트 장식의 오버플로우

박스 바깥으로 넘치는 텍스트 장식은 잉크 오버플로우로 간주됩니다: 스크롤 가능한 오버플로우 영역을 확장하지 않습니다. [css-overflow-3]

부록 A: 감사의 글

이 명세서는 다음 분들의 도움 없이는 불가능했을 것입니다: Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett, Martin Dürst, Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye Gittelman, Ian Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa, Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley, Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley, Marcin Sawicki, Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao Suzuki, Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi Yabe 그리고 Steve Zilles.

부록 B: 기본 UA 스타일시트

이 부록은 참고용이며, UA 개발자가 기본 스타일시트를 구현하는 데 도움을 주기 위한 것이나, UA 개발자는 이를 무시하거나 변경할 수 있습니다.

/* HTML의 일반적인 스타일링 */
blink {
  text-decoration-line: blink;
}
s, strike, del {
  text-decoration: line-through;
}
u, ins, :link, :visited {
  text-decoration: underline;
}
abbr[title], acronym[title] {
  text-decoration: dotted underline;
}

/* 루비 텍스트에 text-emphasis 마크 상속 비활성화:
  강조 마크는 본문 텍스트에만 적용 */
rt { text-emphasis: none; }

/* 언어별 기본 강조 마크 위치 지정 */
:root:lang(zh), [lang|=zh] { text-emphasis-position: under right; }
[lang|=ja], [lang|=ko]     { text-emphasis-position: over right; }

/* 언어별 기본 밑줄 위치 지정 */
:root:lang(ja), [lang|=ja],
:root:lang(mn), [lang|=mn],
:root:lang(ko), [lang|=ko] { text-underline-position: right; }
:root:lang(zh), [lang|=zh] { text-underline-position: left;  }
/* auto는 위에서 under 대신 콘텐츠 호환성 문제로 선택됨 */

문제, 추가 제안 혹은 정정 사항이 있다면 www-style@w3.org로 [css-text-decor]를 제목에 포함하여 보내주세요.

@keyframes blink {
  0% {
    visibility: hidden;
    animation-timing-function: step-end;
  }
  25%, 100% {
    visibility: visible;
  }
}
blink {
  animation: blink 1s infinite;
}

부록 C: 변경사항

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

2020년 5월 6일 워킹드래프트 이후 중요한 변경사항:

• spread distance 및 inset이 text-shadow에 추가됨. (이슈 6074, 이슈 6971)
• text-decoration-skip-ink가 오직 해당 요소에서 시작된 장식에만 영향을 준다는 점 명확화. (이슈 2817)
• 텍스트에 적용되는 속성이 “적용 대상” 행에 명시됨. (이슈 5303)

Level 3 이후 추가사항

다음 기능이 Level 3 이후 추가되었습니다:

• spelling-error 및 grammar-error 값이 text-decoration-line에 추가됨.
• text-decoration-thickness 및 text-underline-offset 속성 추가.
• from-font 값이 text-underline-position에 추가됨.
• text-decoration-skip 속성과 그 롱핸드 초안 작성.
• text-emphasis-skip 속성 초안 작성.
• spread distance 및 inset이 text-shadow에 추가됨.

6. 프라이버시 및 보안 고려사항

이 명세는 새로운 프라이버시 또는 보안 고려사항을 도입하지 않습니다.