16 텍스트(Text)

다음 항목들에서 이 속성들은 글자들, 공간들, 단어들과 문단들의 보이는 표현에 영향을 주는 것을 정의한다.

16.1 들여쓰기: 'text-indent' 속성

이 속성은 블럭(block)에서 텍스트 첫번째 줄의 들여쓰기를 지정한다. 더 정확하게 말하면, 이는 블럭(block)의 처음 라인 박스(line box) 안에 오는 첫번째 박스(box)의 들여쓰기를 지정한다 박스가 라인 박스(line box)의 왼쪽(또는 오른쪽에서 왼쪽으로 배열되는 경우에는 오른쪽) 모서리에 상대적으로 들여쓰기가 된다. 사용도구들은 들여쓰기를 빈 공간으로 표현하여야 한다.

값들은 다음의 의미를 갖는다:

<길이>

고정 길이(length) 들여쓰기.

<백분율>

용기블럭(containing block) 너비의 백분율 만큼 들여쓰기.

'text-indent'의 값은 음수일 수 있으나, 적용에 따른 제한들이 있을 수 있다.

P { text-indent: 3em }

16.2 정렬: 'text-align' 속성

이 속성은 블럭(block)의 인라인 내용이 정렬되는가를 기술한다. 값들은 다음의 의미를 갖는다:

left, right, center와 justify

각각 텍스트의 왼쪽, 오른쪽, 중앙과 이중 justify 이다.

<문자열>

테이블의 컬럼(table column) 안에서 어떤 셀(cell)들에 문자열이 정렬되는가를 지정한다(세부사항과 예제는 컬럼에서의 수평정렬 참조). 이 값은 테이블(table)의 셀들에 만 적용된다. 만일 다른 엘레멘트들에 지정되면, 방향('direction')이 왼쪽에서 오른쪽으로('ltr')인가 오른쪽에서 왼쪽으로('rtl') 인가에 따라 'left' 또는 'right'로 처리된다.

텍스트 블럭(block)은 라인 박스(line box)들의 싸여진 것이다. 'left', 'right'와 'center'의 경우, 이 속성은 각 라인 박스 안에서 인라인 박스들이 라인 박스의 왼쪽과 오른쪽 면들에 대하여 어떻게 정렬되는가를 지정한다; 정렬은 뷰포인트(viewport)에 대하여 이루어지는 것이 아니다. 'justify'의 경우, 사용도구는 그 인접 위치에 추가하여 인라인 박스들을 잡아 늘릴 수 있다('letter-spacing'과 'word-spacing' 참조).

DIV.center { text-align: center }

16.3 장식

16.3.1 밑줄긋기, 윗줄긋기, 가운데줄긋기와 깜빡거리기:
'text-decoration' 속성

이 속성은 엘레멘트의 텍스트에 추가되는 장식들을 지정한다. 만일 그 속성이 블럭레벨(block-level) 엘레멘트에 지정되었으면, 그 엘레멘트 모든 인라인(inline-level) 하위(descendant)들에 적용된다. 만일 인라인 엘레멘트에 지정되거나 영향을 주면, 그 엘레멘트에 의하여 생성된 모든 박스들에 작용한다. 만일 그 엘레멘트가 내용이나 텍스트 내용을 자기고 있지 않으면(예: HTML의 IMG 엘레멘트), 사용도구들은 이 속성을 무시하여야 한다.

값들은 다음의 의미를 갖는다:

none(없음)

텍스트 장식이 없다.

underline(밑줄)

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

overline(윗줄)

각 텍스트의 줄 위에 줄을 긋는다.

line-through(가운데 줄긋기)

각 텍스트의 줄 지운 것 같이 가운데에 줄을 긋는다.

blink(깜빡거림)

텍스트가 깜빡거린다(보였다 안보였다를 반복). 규격에 부합하는 사용도구들은 이 값의 지원을 필요로 하지 않는다.

텍스트 장식에 필요한 색상들은 'color' 속성값들에서 부터 와야 한다.

이 속성은 전달(inherit)되지 않지만, 블럭 박스의 하위(descendant) 박스들은 같은 장식으로 양식화되어야 한다(예: 모두 밑줄그어짐). 하위 엘레멘트들이 다른 'color' 값들을 가지고 있다 하더라도, 색상 장식들은 변하지 않는다.

A[href] { text-decoration: underline }

16.3.2 텍스트 그림자: 'text-shadow' 속성

이 속성은 컴마로 엘레멘트의 텍스트에 적용되는 그림자(shadow) 효과들의 분리된 목록을 수용한다. 그림자 효과들은 지정된 순서로 적용되고 서로 겹칠 수 있으나, 텍스트 자체에는 절대로 겹쳐지지 않는다. 그림자 효과들은 박스의 크기를 변경시키지 않으나, 그러나 그 테두리들 밖으로 확장될 수 있다. 그림자 효과들의 stack 수준은 그 엘레멘트 자체의 것과 같다.

각 그림자 효과는 그림자 오프세트(offset)을 지정하여야 하고, 선택적으로 흐림 직경(blur radius)와 그림자 색상을 지정할 수 있다.

그림자 오프세트(offset)는 텍스트로 부터의 거리를 나타내는 두 <길이> 값들로 지정된다. 첫번째 길이 값은 텍스트의 오른쪽까지의 수평 거리를 지정한다. 음수 수평 길이 값은 텍스트의 왼쪽에 그림자를 위치시킨다. 두번째 길이 값은 텍스트의 아래까지 수직거리를 지정한다. 음수 수직적 길이 값은 텍스트의 위쪽에 그림자를 위치시킨다.

흐림 직경(blur radius)은 그림자 오프세트 다음에 선택적으로 지정될 수 있다. 흐림 직경은 길이 흐림 효과를 주는 테두리를 지정하는 값이다. 실제적인 흐림 효과의 계산 기능은 정의되지 않았다.

색상값은 그림자 효과의 길이 값들 이전이나 이후에 선택적으로 지정될 수 있다. 색상값은 그림자 효과를 위한 기초로 사용된다. 만일 색상이 지정되지 않았으면, 'color' 속성값이 대신 사용된다.

텍스트의 그림자는 :first-letter와 :first-line 가상 엘레멘트(pseudo-element)들과 함께 사용될 수 있다.

H1 { text-shadow: 0.2em 0.2em }

H2 { text-shadow: 3px 3px 5px red }

H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

예제:

다음 예제를 보자:

SPAN.glow {
   background: white;
   color: white;
   text-shadow: black 0px 0px 5px;
}

여기서 'background'와 'color' 속성들은 같은 값이고 'text-shadow' 속성이 일식효과("solar eclipse") 효과 생성에 사용된다.:

[D]

16.4 글자와 단어 간격: 'letter-spacing', 'word-spacing' 속성

이 속성은 텍스트 글자들사이의 간격 띄움을 지정한다. 값들은 다음의 의미를 갖는다:

normal(정상)

현재 글꼴의 정상적인 간격 띄움이다. 이 값은 사용도구에게 텍스트를 justify하기 위하여 글자들사이의 간격 변경을 허용한다.

<길이>

이 값은 글자들사이의 디폴트(default) 간격에 추가하여 글자사이의 간격을 지정한다. 값들은 음수일 수 있으나, 특정 적용에 한계들이 있을 수 있다. 사용도구들은 글자사이의 간격을 텍스트를 맞춤(justify)하기 위하여 추가적으로 증가 또는 감소시킬 수 없다.

글자사이의 간격 넣는 기능들은 사용도구에 따라 다르고, 맞춤(justification: 'text-align' 속성 참조)에 의하여도 영향을 받는다.

BLOCKQUOTE { letter-spacing: 0.1em }

BLOCKQUOTE { letter-spacing: 0cm } /* '0'과 같음 */

결과적인 두 글자들사이의 간격이 디폴트 간격과 같지 않을 때는, 사용도구들은 설상(ligature)들를 사용하지 말아야 한다.

규격에 부합하는 사용도구들은 'letter-spacing' 속성값을 'normal'로 고려할 수 있다.

이 속성은 단어들사이의 간격을 지정한다. 값들은 다음의 의미를 갖는다:

normal(정상)

현재의 글꼴와/또는 사용도구에 정의된 정상적인 단어들사이의 간격이다.

<길이>

이 값은 단어들사이의 디폴트 간격에 추가하여 단어들사이의 간격을 지정한다. 값들은 음수가 될 수 있으나, 특정 적용에 한계들이 있을 수 있다.

단어사이의 간격 넣기 기능은 사용도구에 따라 다르고, 맞춤(justification: 'text-align' 속성 참조)에 의해서도 영향을 받는다.

H1 { word-spacing: 1em }

규격에 부합하는 사용도구들은 'word-spacing' 속성값을 'normal'로 고려할 수 있다.

16.5 대문자화: 'text-transform' 속성

이 속성은 엘레멘트 텍스트의 대문자화 효과들을 제어한다. 값들은 다음의 의미를 갖는다:

capitalize(대문자화)

각 단어의 첫번째 글자를 대문자로 한다.

uppercase(대문자화)

각 단어의 모든 글자들 대문자로 한다.

lowercase(소문자화)

각 단어의 모든 글자들 소문자로 한다.

none(변화없음)

대문자화 효과들이 없다.

실제적인 각 대소문자 변환은 쓰여진 언어에 따라 다르다. 엘레멘트의 언어에서 방법을 알기 위해 RFC 2070 ([RFC2070])를 참조하라.

규격에 부합하는 사용도구들은, Latin-1 레파토리(repertoire)에서 오지 않은 글자들과 ISO 10646 ([ISO10646])의 대소문자 변환 테이블에 의하여 지정된 것과 다른 변환을 하는 언어들의 엘레멘트들에서, 'text-transform' 값을 'none'으로 고려할 수 있다.

H1 { text-transform: uppercase }

16.6 공백: 'white-space' 속성

이 속성은 엘레멘트 안에서 공백이 어떻게 취급되는가를 정의하며, 값들은 다음의 의미를 갖는다:

normal(정상)

이 값은 연속 공백과 라인 박스(line box)들을 채우기위한 줄바꿈을 통합(collapse)하도록 사용도구들에게 지시한다. 생성된 내용 안에서 "\A"를 만나면 추가적 줄바꿈(line break)들이 생성될 수 있다(예: HTML의 BR 엘레멘트).

pre(원문대로)

이 값은 사용도구들이 연속 공백의 통합하는 것을 방지한다. 줄은 원문 혹은 생성된 내용에서 "\A"를 만날 때 만 새로운 줄로 줄바꿈한다.

nowrap(줄바꿈 없음)

이 값은 공백을 'normal'에서와 같이 통합하지 만, 생성된 내용 안에서 "\A"에 의하여 요구되지 않는 한 텍스트에서의 줄바꿈이 억제된다(예: HTML의 BR 엘레멘트).

PRE { white-space: pre }
P { white-space: normal }
TD[nowrap] { white-space: nowrap }

규격에 부합하는 사용도구들은 제작자와 사용자 스타일쉬트들에서 'white-space' 속성을 무시할 수 있으나, 디폴트 스타일쉬트에서는 그 값이 지정되어야 한다.

맨위이 문서()는 자유로이 연결 사용이 가능함.
(수정일 )