CSS 텍스트 장식 모듈 레벨 3

1. 소개

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

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

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

1.1. 모듈 상호작용

이 모듈은 [CSS2] 16장에 정의된 텍스트 장식 기능을 대체하고 확장합니다.

1.2. 값 정의

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

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

1.3. 용어

이 명세에서 사용되는 문자(character), 글자(letter), 콘텐츠 언어(content language) 용어는 [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에서는 항상 마진, 테두리, 패딩을 건너뛰도록 요구했습니다. 이 단계에서는 기본적으로 장식 박스의 마진, 테두리, 패딩만 건너뜁니다. 앞으로 CSS2.1도 이 새로운 기본값에 맞게 업데이트될 수 있습니다. 또한, 선행/후행 공백 장식 제어는 4단계에서 제공될 예정이며, 기본적으로 HTML ins 및 del 요소에 적용됩니다.

UA는 밑줄 또는 윗줄이 글리프 잉크를 가로지르는 경우와 글리프 윤곽선 양쪽으로 일정 거리에서 밑줄/윗줄을 중단할 수 있습니다; 이 동작은 이 단계에서는 제어할 수 없지만, 4단계에서 더 정의될 예정입니다. 취소선(line-through)은 반드시 연속적으로 유지되어야 합니다.

글리프 잉크 건너뛰기

UA가 밑줄이나 윗줄을 글리프 경계에서 중단하는 경우, 그 경계에서 선의 형태는 글리프의 형태를 따라야 합니다.

참고: 이 명세는 글리프의 “형태를 따르는” 구체적 방법을 일부러 강제하지 않습니다. UA가 미적·성능상의 고려를 위해 적절한 방식을 취할 수 있도록 하기 위함입니다. 예를 들어, UA는 성능상의 이유로 특정 크기 이하에서는 선 끝을 네모로 처리할 수 있고, 더 얇은 선 장식에서는 곡선을 근사하기 위해 사다리꼴 끝을 사용할 수 있습니다. 미적인 측면에서는, 글리프 경계가 선 두께의 일부만 교차할 때나 거의 수평에 가까운 경사일 때, 곡선을 정확하게 따를 경우 타이포그래피적으로 어색한 밑줄 잔여(wisp)가 생길 수 있습니다. 글리프 내부에 둘러싸인 영역에서 선을 보여줄지 여부도 또 다른 고려 사항입니다.

글리프 내부에 밑줄 일부를 숨기면 글자가 더 깔끔하게 보이며, 글자 외곽을 따라 이어지는 곡선형 밑줄 끝은 그 글자를 통과하는 밑줄의 연속성을 암시합니다.

자손을 상대적으로 위치시키면 적용된 모든 텍스트 장식이 자손의 텍스트와 함께 이동하지만, 장식의 초기 위치 계산에는 영향을 주지 않습니다. 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 속성

요소에 어떤 줄 장식이 추가되는지 지정합니다. 값의 의미는 다음과 같습니다:

none

텍스트 장식이 생성되거나 억제되지 않습니다.

underline

각 텍스트 줄에 밑줄이 그려집니다.

overline

각 텍스트 줄 위에 선이 그려집니다 (즉, 밑줄과 반대쪽).

line-through

각 텍스트 줄 가운데에 선이 그려집니다.

blink

텍스트가 깜빡입니다(보임과 숨김이 번갈아 나타남). 적합한 사용자 에이전트는 텍스트를 깜빡이지 않을 수도 있습니다. 텍스트를 깜빡이지 않는 것은 WAI-UAAG 체크포인트 3.3를 만족하는 한 가지 방법입니다. 이 값은 더 이상 권장되지 않으며 Animations [CSS-ANIMATIONS-1]을 사용하는 것이 좋습니다.

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

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

이 속성은 요소에 지정된 텍스트 장식선의 스타일을 지정합니다. 값의 의미는 border-style 속성 [CSS-BACKGROUNDS-3]과 동일합니다. wavy는 물결 모양의 선을 나타냅니다.

텍스트 장식의 스타일은 해당 요소에서 시작된 모든 장식에 동일하게 적용되어야 하며, 자식 박스에 다른 스타일이 지정되어 있더라도 변경되지 않습니다.

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

이 속성은 text-decoration-line으로 설정된 요소의 텍스트 장식(밑줄, 윗줄, 취소선)의 색상을 지정합니다.

텍스트 장식의 색상은 해당 요소에서 시작된 모든 장식에 동일하게 적용되어야 하며, 자식 박스에 다른 색상이 지정되어 있더라도 변경되지 않습니다.

2.4. 텍스트 장식 단축 속성: text-decoration 속성

이 속성은 text-decoration-line, text-decoration-color, 그리고 text-decoration-style을 한 번에 설정하는 단축 속성입니다. 생략된 값은 초기값으로 설정됩니다.

참고: text-decoration 선언에서 text-decoration-color와 text-decoration-style 값을 모두 생략하면 CSS 1, 2 레벨과의 하위 호환성을 유지합니다.

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

참고: 이 단축 속성은 text-underline-position 속성을 일부러 포함하지 않습니다. 이 속성은 언어/문자 체계에 따라 콘텐츠에 맞춰지는 설정이기 때문에, text-decoration 단축 속성의 (상속되지 않는) 스타일 설정과 독립적으로 캐스케이드 및 상속될 수 있도록 하기 위함입니다.

2.5. 텍스트 밑줄 위치: text-underline-position 속성

이 속성은 요소에 지정된 밑줄의 위치를 설정합니다. (조상 요소에 의해 지정된 밑줄에는 영향을 주지 않습니다.) left 또는 right가 단독으로 지정되면, auto도 포함된 것으로 간주합니다.

: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; }

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

auto

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

참고: 기본 밑줄 위치는 알파벳 기준선 가까이에 배치하는 것이 좋지만, 아래 첨자(또는 그 밖의 낮아진 텍스트)를 가로지르거나 한자, 티베트어 등 아시아 문자 글리프 위에 밑줄이 너무 높게 그려지는 경우에는, 밑줄을 더 낮추거나 under에서 설명한 em 박스 경계에 맞추는 것이 더 적절할 수 있습니다.

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

under

밑줄은 요소의 텍스트 콘텐츠 아래에 배치됩니다. 이 경우 밑줄은 일반적으로 내림부를 관통하지 않습니다. (이 방식은 종종 “회계 밑줄(accounting underline)”이라고 불립니다.) 이 값은 수직 타이포그래피 모드에서 특정 측면을 선호하는 경우 left 또는 right와 함께 사용할 수 있습니다.

text-underline-position: under

text-underline-position은 상속되며, text-decoration 단축 속성으로 재설정되지 않으므로, 다음 예제처럼 문서 전체에 under 밑줄을 적용할 수 있습니다. 이는 내림부가 길고 복잡한 문자 체계에 더 적합할 수 있습니다. 수식이나 화학식 등 첨자가 많은 텍스트에도 유용합니다.

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

참고: under 값은 밑줄이 글리프와 충돌하지 않을 것을 보장하지 않습니다. 일부 폰트는 폰트의 하강선(descent) 메트릭을 넘는 내림부나 발음 기호를 가질 수 있기 때문입니다.

left

수직 타이포그래피 모드에서 밑줄은 under와 같이 정렬되지만, 항상 텍스트 왼쪽에 정렬됩니다. 이로 인해 밑줄이 텍스트의 "over" 쪽에 그려지는 경우, 윗줄(overline)도 반대쪽으로 이동하여 "under" 쪽에 그려집니다.

right

수직 타이포그래피 모드에서 밑줄은 under와 같이 정렬되지만, 항상 텍스트 오른쪽에 정렬됩니다. 이로 인해 밑줄이 텍스트의 "over" 쪽에 그려지는 경우, 윗줄(overline)도 반대쪽으로 이동하여 "under" 쪽에 그려집니다.

left	right

수직 타이포그래피 모드에서 text-underline-position의 left와 right 값으로 밑줄을 텍스트 양쪽에 배치할 수 있습니다. (수평 타이포그래피 모드에선 두 값 모두 auto로 처리됩니다.)

선 장식의 정확한 위치와 두께는 이 단계에서 UA에 의해 정의됩니다. 하지만 밑줄과 윗줄의 경우 UA는 한 줄에서 단일 장식 박스에서 파생된 장식에 대해 한 번의 두께와 위치만을 사용해야 합니다.

vs.

<u>A<sup>B</sup><big>C</big>D</u> 의 올바른/잘못된 밑줄 렌더링

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

수직 텍스트의 중앙 기준선 정렬 때문에, 작은 수직 텍스트에 왼쪽 밑줄을 그리면 더 큰 글꼴 크기의 자식 텍스트를 관통할 수 있습니다. 밑줄이 분리되는 것은 허용되지 않으며, 밑줄 위치를 더 왼쪽으로 조정하면 모든 밑줄 텍스트를 제대로 감쌀 수 있습니다.

UA는 반드시 장식 박스가 vertical-align 값이 baseline [CSS2]가 아니거나 font-variant-position을 통해 아래첨자/위첨자로 이동된 경우 선 위치를 조정해야 하지만, 장식 박스의 자손이 그렇게 스타일링된 경우에는 선 위치나 두께를 조정해서는 안 됩니다. 이를 통해 아래첨자/위첨자에 밑줄, 취소선 등을 올바르게 적용할 수 있지만, 자손의 위치가 조상 장식의 위치에 영향을 주거나 왜곡하지 않습니다.

위첨자 텍스트에 적용된 밑줄 vs. 위첨자를 포함한 텍스트에 적용된 밑줄 예시

일부 폰트 포맷(OpenType 등)은 선 장식의 적절한 위치 정보를 제공합니다. UA는 적절한 경우 폰트에서 제공하는 정보(밑줄 두께, 알파벳 밑줄 위치 등)를 사용해야 합니다.

참고: 일반적으로 OpenType 폰트 메트릭은 alphabetic 밑줄 위치를 제공합니다. CJK 폰트의 경우 under left 위치를 제공하는 경우도 있습니다. (이 경우 폰트의 밑줄 메트릭은 em 박스의 하단에 닿는 경우가 많습니다.) 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를 들 수 있으며, 특별히 강조 표시 기호를 위해 설계되었습니다.

강조 기호는 타이포그래피 문자 단위마다 한 번씩 그려집니다. 단, 강조 표시 기호는 아래의 경우 그려지지 않습니다:

• 단어 구분자 또는 Unicode 구분자 클래스(Z*)에 속하는 기타 문자. (하지만 결합 문자와 조합된 공백에는 강조 표시가 적용됩니다.)
• 구두점--즉, Unicode 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	파트 교대 기호

• Unicode 클래스 중 제어 코드 및 미할당 문자(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

수직 타이포그래피 모드에서 텍스트 왼쪽에 기호를 그립니다.

강조 기호는 각 문자가 해당 ruby 주석 텍스트를 갖는 것처럼, text-emphasis-position에 따라 ruby 위치를 지정하고 ruby 정렬은 가운데로 하여 정확히 그려집니다. 이 위치가 밑줄 또는 윗줄 장식과 충돌할 경우 조정될 수 있습니다.

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

참고: 강조 표시 기호의 선호 위치는 언어에 따라 다릅니다. 예를 들어 일본어는 over right가 선호되고, 중국어는 under right가 선호됩니다. 아래 표는 중국어와 일본어의 선호 강조 표시 및 ruby 위치를 요약합니다:

선호 강조 표시 및 ruby 위치

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

강조 표시가 ruby와 같은 위치에 그려지는 문자에 적용된 경우, 강조 표시 기호는 ruby 외부에 배치됩니다. 이는 자동 숨김 및 비어 있는 ruby 주석에도 적용됩니다.

ruby가 있는 2개와 없는 2개 문자에 강조 표시가 적용된 예시

ruby { text-emphasis: none; }

em { text-emphasis: dot; } /* <em> 요소에 text-emphasis 설정 */
em rt { display: none; }   /* <em> 요소 내부 ruby 숨기기 */

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

이 속성은 요소 텍스트에 적용할 쉐도우 효과의 쉼표로 구분된 목록을 허용합니다. 값은 box-shadow [CSS-BACKGROUNDS-3]와 동일하게 해석됩니다. (단, spread 값과 inset 키워드는 허용되지 않습니다.) 각 레이어는 요소의 텍스트와 모든 텍스트 장식(합성된 상태)을 그림자 처리합니다.

그림자 효과는 앞에서 뒤로 적용됩니다: 첫 번째 그림자가 맨 위에 옵니다. 그림자는 서로 겹칠 수 있지만, 텍스트 자체를 덮는 일은 없습니다. 그림자는 반드시 요소의 테두리/배경(있다면)과 요소 텍스트 및 텍스트 장식 사이의 스택 레벨에 그려져야 합니다. UA는 인접한 동일 스택 레벨 및 스태킹 컨텍스트에 속한 요소의 텍스트 위에 그림자를 그리는 것을 피해야 합니다. (이는 그림자의 정확한 스택 레벨이 요소에 테두리나 배경이 있는지에 따라 달라질 수 있음을 의미하며, 텍스트 그림자의 정확한 스태킹 동작은 UA 정의입니다.) 그림자 레이어가 각 글리프/장식을 독립적으로 그림자 처리하는지, 또는 텍스트/장식을 평면화한 후 그림자 처리하는지는 정의되지 않습니다.

box-shadow와 달리, 텍스트 그림자는 그림자 모양에 클리핑되지 않으며, 텍스트가 반투명한 경우 그림자가 비칠 수 있습니다. box-shadow와 같이, 텍스트 그림자는 레이아웃에 영향을 주지 않고, 스크롤을 유발하거나 스크롤 가능 오버플로 영역 크기를 증가시키지 않습니다.

참고: 여기 정의된 그림자 페인팅 순서는 1998년 CSS2 권고안과 반대입니다.

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;
}

/* ruby 텍스트에 text-emphasis marks 상속 비활성화:
   강조 표시는 base 텍스트에만 적용 */
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: 변경사항

2019년 8월 후보 권고안 이후 변경사항 (August 2019 Candidate Recommendation)

변경 사항:

• text-shadow가 shadow list로 box-shadow와 같이 애니메이션된다는 점 명확화. (Issue 4375)
• 텍스트에 적용되는 속성을 명확히 언급. (Issue 5303)
• 사소한 편집 수정.

2018년 7월 후보 권고안 이후 변경사항 (July 2018 Candidate Recommendation)

변경 사항:

• 텍스트 장식 오버플로우가 잉크 오버플로우임을 명확히 함. (Issue 3272)
• 샘플 text-underline-position 규칙의 불일치 수정. (Issue 3441)
• “계산된 값” 라인을 새로운 관례에 맞게 정리.

댓글 처리 결과도 제공됩니다.

2013년 8월 후보 권고안 이후 주요 변경사항 (August 2013 Candidate Recommendation)

주요 변경 사항:

• text-decoration-skip을 Level 4로 연기하여 주요 변경 허용. 행동 기본값은 본문에서 정의. (Issue 1, Issue 22, Issue 26)
• 취소선(line-through)이 잉크 스킵 기능에 영향을 받지 않음을 명시. (Issue 24)
• 잉크를 건너뛸 때 선 끝이 글리프 형태를 따르도록 권장. (Issue 30)
• 쓰기 모드 민감 조건을 타이포그래피 모드에 의존하도록 변경, sideways-lr 및 sideways-rl 값 추가 반영. 강조 표시의 방향성은 sideways-lr 및 sideways-rl에서는 정의되지 않음. (Issue 10, Issue 20)
• text-emphasis-position의 [ right | left ] 옵션을 선택적으로 변경, 기본값을 right로 지정. (Issue 17)
• text-underline-position이 auto를 암시(under 대신)하도록 변경, left 또는 right만 지정된 경우. (Issue 18)
• 텍스트 장식이 앞/뒤 공백을 건너뛰도록 변경. (Issue 6)
• ruby 주석 위치가 텍스트 장식과 충돌하지 않도록 조정될 수 있음을 명시. (Issue 21)
• text-shadow의 초기값을 currentColor로 변경. (Issue 28)
• text-shadow의 “계산된 값” 라인 오류 수정. (Issue 7)
• text-shadow 값의 정규 순서를 구현과 일치하도록 수정. (Issue 35)
• 자동 숨김 및 비어 있는 ruby 주석에 대한 강조 표시 위치 정의. (Issue 9)

  ruby와 강조 표시가 동일 위치에 그려지는 경우, 강조 기호는 ruby 외부에 배치됨. 이는 자동 숨김 및 비어 있는 ruby 주석에도 해당.

• text-emphasis가 기본적으로 구두점을 건너뛰도록 변경. (Issue 16)
• 강조 표시 글꼴에 ruby 적용 규칙 추가. (Issue 13)
• 기본 UA 규칙(text-emphasis-position, text-underline-position)의 다양한 수정 및 개선. (Issue 11, Issue 12, Issue 18, Issue 19, Issue 36)