목차
이 장은 참고용입니다. UA는 CSS 2.2에 적합하도록 이 장의 속성을 구현할 필요는 없습니다.
CSS의 미래 버전에서는 음성 출력에 대해 새로운 속성과 값이 정의될 것으로 예상됩니다. 따라서 CSS 2.2는 'speech' 미디어 유형을 예약하지만 ( 7장, "미디어 유형" 참조), 여전히 어떤 속성이 이에 적용되는지 정의하지 않습니다.
이 부록의 속성은 CSS2에 도입된 'aural'이라는 미디어 유형에 적용됩니다. 'aural' 유형은 이제 더 이상 권장되지 않습니다.
이는 다음과 같은 스타일 시트가
@media speech { body { voice-family: Paul } }
유효하지만 그 의미는 CSS 2.2에서 정의되지 않는 반면,
@media aural { body { voice-family: Paul } }
더 이상 권장되지 않지만, 이 부록에서 정의됩니다.
문서의 청각 렌더링은 이미 시각 장애인과 읽기 장애 커뮤니티에서 일반적으로 사용되며, 음성 합성과 "청각 아이콘"을 결합합니다. 종종 이러한 청각 프레젠테이션은 문서를 일반 텍스트로 변환하고 이를 스크린 리더 (화면의 모든 문자를 단순히 읽는 소프트웨어 또는 하드웨어)에 제공하여 이루어집니다. 이로 인해 문서 구조가 유지되는 경우보다 덜 효과적인 프레젠테이션이 이루어집니다. 청각 프레젠테이션을 위한 스타일 시트 속성은 시각적 속성과 함께 사용(혼합 미디어)되거나 시각적 프레젠테이션의 청각 대안으로 사용할 수 있습니다.
명백한 접근성 이점 외에도, 정보 청취를 위한 다른 큰 시장이 있습니다. 예를 들어 차량 내 사용, 산업 및 의료 문서화 시스템(인트라넷), 홈 엔터테인먼트, 그리고 읽기를 배우거나 읽기에 어려움을 겪는 사용자를 돕는 경우 등이 포함됩니다.
청각 속성을 사용할 때, 캔버스는 3차원 물리적 공간(사운드 서라운드)과 시간적 공간(다른 소리 전에, 중간에, 그리고 후에 소리를 지정할 수 있음)으로 구성됩니다. CSS 속성은 또한 작성자가 합성된 음성의 품질(음성 유형, 주파수, 억양 등)을 다양하게 설정할 수 있도록 합니다.
h1, h2, h3, h4, h5, h6 { voice-family: paul; stress: 20; richness: 90; cue-before: url("ping.au") } p.heidi { azimuth: center-left } p.peter { azimuth: right } p.goat { volume: x-soft }
이는 음성 합성기가 "paul"이라는 이름의 목소리(일종의 "오디오 글꼴")로 헤더를 읽도록 지시하며, 평평한 톤으로 하지만 매우 풍부한 목소리로 읽도록 지시합니다. 헤더를 읽기 전에 주어진 URL에서 사운드 샘플이 재생됩니다. 클래스가 "heidi"인 단락은 (사운드 시스템이 공간 오디오를 지원하는 경우) 왼쪽 앞에서 나오는 것처럼 보이며, "peter" 클래스는 오른쪽에서 나오는 것처럼 보입니다. "goat" 클래스의 단락은 매우 조용하게 들립니다.
각도 값은 텍스트에서 <angle>로 표시됩니다. 형식은 <number> 뒤에 각도 단위 식별자가 바로 따라옵니다.
각도 단위 식별자는 다음과 같습니다:
각도 값은 음수가 될 수 있습니다. 사용자 에이전트는 이를 0-360deg 범위로 정규화해야 합니다. 예를 들어, -10deg와 350deg는 동일합니다.
예를 들어, 직각은 '90deg', '100grad', 또는 '1.570796326794897rad'로 나타낼 수 있습니다.
<length>와 마찬가지로, 값이 0인 경우 단위를 생략할 수 있습니다: '0deg'는 '0'으로 작성할 수 있습니다.
시간 값은 텍스트에서 <time>로 표시됩니다. 형식은 <number> 뒤에 시간 단위 식별자가 바로 따라옵니다.
시간 단위 식별자는 다음과 같습니다:
시간 값은 음수가 될 수 없습니다.
<length>와 마찬가지로, 값이 0인 경우 단위를 생략할 수 있습니다: '0s'는 '0'으로 작성할 수 있습니다.
주파수 값은 텍스트에서 <frequency>로 표시됩니다. 형식은 <number> 뒤에 주파수 단위 식별자가 바로 따라옵니다.
주파수 단위 식별자는 다음과 같습니다:
주파수 값은 음수가 될 수 없습니다.
예를 들어, 200Hz (또는 200hz)는 저음이며, 6kHz는 고음입니다.
<length>와 마찬가지로, 값이 0인 경우 단위를 생략할 수 있습니다: '0Hz'는 '0'으로 작성할 수 있습니다.
이름: | volume |
---|---|
값: | <number> | <percentage> | silent | x-soft | soft | medium | loud | x-loud | inherit |
초기값: | medium |
적용 대상: | 모든 요소 |
상속됨: | 예 |
백분율: | 상속된 값 참조 |
미디어: | aural |
계산값: | 숫자 |
볼륨은 파형의 중간 볼륨을 나타냅니다. 즉, 50의 볼륨에서 강하게 변조된 음성은 훨씬 높은 피크에 도달할 수 있습니다. 전체 값은 편안함을 위해 사용자에 의해 조정될 가능성이 높습니다. 예를 들어 물리적 볼륨 컨트롤로 0과 100 값을 비례적으로 증가시키는 것처럼, 이 속성은 동적 범위를 조정합니다.
값의 의미는 다음과 같습니다:
사용자 에이전트는 '0'과 '100'에 해당하는 값을 청취자가 설정할 수 있도록 해야 합니다. 어떤 설정도 보편적으로 적용되지 않으며, 적합한 값은 사용 중인 장비(스피커, 헤드폰), 환경(차량, 홈 시어터, 도서관), 개인 선호도에 따라 달라집니다. 몇 가지 예는 다음과 같습니다:
클라이언트 측에서 '0'과 '100' 포인트를 적절히 매핑하기만 하면, 동일한 작성자 스타일 시트를 모든 경우에 사용할 수 있습니다.
이름: | speak |
---|---|
값: | normal | none | spell-out | inherit |
초기값: | normal |
적용 대상: | 모든 요소 |
상속됨: | 예 |
백분율: | N/A |
미디어: | aural |
계산값: | 명시된 대로 |
이 속성은 텍스트가 청각적으로 렌더링될지 여부와 그렇다면 어떤 방식으로 렌더링될지를 지정합니다. 가능한 값은 다음과 같습니다:
'volume' 속성의 값이 'silent'인 요소와 'speak' 속성의 값이 'none'인 요소의 차이를 유의하십시오. 전자는 요소 전후의 멈춤을 포함하여 말해진 것처럼 동일한 시간을 차지하지만, 소리는 생성되지 않습니다. 후자는 시간이 필요하지 않으며 렌더링되지 않습니다 (그러나 후손 요소는 렌더링될 수 있습니다).
이름: | pause-before |
---|---|
값: | <time> | <percentage> | inherit |
초기값: | 0 |
적용 대상: | 모든 요소 |
상속됨: | 아니요 |
백분율: | 본문 참조 |
미디어: | aural |
계산값: | time |
이름: | pause-after |
---|---|
값: | <time> | <percentage> | inherit |
초기값: | 0 |
적용 대상: | 모든 요소 |
상속됨: | 아니요 |
백분율: | 본문 참조 |
미디어: | aural |
계산값: | time;; |
이 속성은 요소의 내용을 말하기 전에 (또는 후에) 관찰해야 할 일시정지를 지정합니다. 값의 의미는 다음과 같습니다:
참고. CSS3에서는 일시정지가 큐와 콘텐츠 주위에 삽입되며, 그들 사이가 아닙니다. 자세한 내용은 [CSS3SPEECH]를 참조하십시오.
일시정지는 요소의 내용과 'cue-before' 또는 'cue-after' 콘텐츠 사이에 삽입됩니다.
작업자는 speech-rate에서 큰 변화가 발생하더라도 더 강력한 스타일 시트를 생성하기 위해 상대적인 단위를 사용해야 합니다.
이름: | pause |
---|---|
값: | [ [<time> | <percentage>]{1,2} ] | inherit |
초기값: | 개별 속성 참조 |
적용 대상: | 모든 요소 |
상속됨: | 아니요 |
백분율: | 'pause-before' 및 'pause-after' 설명 참조 |
미디어: | aural |
계산값: | 개별 속성 참조 |
'pause' 속성은 'pause-before'와 'pause-after'를 설정하기 위한 축약형입니다. 두 개의 값이 주어지면, 첫 번째 값은 'pause-before'이고, 두 번째 값은 'pause-after'입니다. 하나의 값만 주어지면, 두 속성 모두에 적용됩니다.
h1 { pause: 20ms } /* pause-before: 20ms; pause-after: 20ms */ h2 { pause: 30ms 40ms } /* pause-before: 30ms; pause-after: 40ms */ h3 { pause-after: 10ms } /* pause-before 미지정; pause-after: 10ms */
이름: | cue-before |
---|---|
값: | <uri> | none | inherit |
초기값: | none |
적용 대상: | 모든 요소 |
상속됨: | 아니요 |
백분율: | N/A |
미디어: | aural |
계산값: | 절대 URI 또는 'none' |
이름: | cue-after |
---|---|
값: | <uri> | none | inherit |
초기값: | none |
적용 대상: | 모든 요소 |
상속됨: | 아니요 |
백분율: | N/A |
미디어: | aural |
계산값: | 절대 URI 또는 'none' |
청각 아이콘은 의미적 요소를 구별하는 또 다른 방법입니다. 요소를 구분하기 위해 소리가 요소의 이전 및/또는 이후에 재생될 수 있습니다. 값의 의미는 다음과 같습니다:
a {cue-before: url("bell.aiff"); cue-after: url("dong.wav") } h1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
이름: | cue |
---|---|
값: | [ <'cue-before'> || <'cue-after'> ] | inherit |
초기값: | 개별 속성 참조 |
적용 대상: | 모든 요소 |
상속됨: | 아니요 |
백분율: | N/A |
미디어: | aural |
계산값: | 개별 속성 참조 |
'cue' 속성은 'cue-before' 및 'cue-after'를 설정하기 위한 축약형입니다. 두 값이 주어지면, 첫 번째 값은 'cue-before'이고, 두 번째 값은 'cue-after'입니다. 하나의 값만 주어지면, 두 속성 모두에 적용됩니다.
다음 두 규칙은 동일합니다:
h1 {cue-before: url("pop.au"); cue-after: url("pop.au") } h1 {cue: url("pop.au") }
사용자 에이전트가 청각 아이콘을 렌더링할 수 없는 경우(예: 사용자의 환경이 이를 허용하지 않는 경우), 대체 큐를 생성할 것을 권장합니다.
다른 콘텐츠 생성 기술에 대한 정보는 :before 및 :after 의사 요소 섹션을 참조하십시오. 'cue-before' 소리와 'pause-before' 간격은 ':before' 의사 요소의 콘텐츠 이전에 삽입됩니다. 마찬가지로, 'pause-after' 간격과 'cue-after' 소리는 ':after' 의사 요소의 콘텐츠 이후에 삽입됩니다.
이름: | play-during |
---|---|
값: | <uri> [ mix || repeat ]? | auto | none | inherit |
초기값: | auto |
적용 대상: | 모든 요소 |
상속됨: | 아니요 |
백분율: | N/A |
미디어: | aural |
계산값: | 절대 URI, 나머지는 명시된 대로 |
'cue-before' 및 'cue-after' 속성과 유사하게, 이 속성은 요소의 콘텐츠가 말해지는 동안 배경으로 재생될 소리를 지정합니다. 값의 의미는 다음과 같습니다:
blockquote.sad { play-during: url("violins.aiff") } blockquote Q { play-during: url("harp.wav") mix } span.quiet { play-during: none }
공간 오디오는 청각 프레젠테이션을 위한 중요한 스타일 속성입니다. 이는 현실에서처럼 여러 목소리를 자연스럽게 구별하는 방법을 제공합니다 (사람들은 일반적으로 방 안의 같은 위치에 서 있지 않습니다). 스테레오 스피커는 가로 사운드 스테이지를 생성합니다. 바이노럴 헤드폰이나 점점 더 인기를 끌고 있는 5-스피커 홈 시어터 설정은 풀 서라운드 사운드를 생성할 수 있으며, 다중 스피커 설정은 진정한 3차원 사운드 스테이지를 생성할 수 있습니다. VRML 2.0에서도 공간 오디오가 포함되어 있어 시간이 지나면서 소비자 가격의 공간 오디오 하드웨어가 더 널리 보급될 가능성이 있습니다.
이름: | azimuth |
---|---|
값: | <angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit |
초기값: | center |
적용 대상: | 모든 요소 |
상속됨: | 예 |
백분율: | N/A |
미디어: | aural |
계산값: | 정규화된 각도 |
값의 의미는 다음과 같습니다:
이 속성은 동일한 신호를 다른 채널에 다른 볼륨으로 혼합하여 구현될 가능성이 가장 높습니다. 또한, 사운드 스테이지의 환상을 제공하기 위해 위상 이동, 디지털 지연, 기타 기술을 사용할 수도 있습니다. 이 효과를 달성하기 위해 사용된 정확한 방법과 사용된 스피커 수는 사용자 에이전트에 따라 다르며, 이 속성은 단순히 원하는 최종 결과를 식별합니다.
h1 { azimuth: 30deg } td.a { azimuth: far-right } /* 60deg */ #12 { azimuth: behind far-right } /* 120deg */ p.comment { azimuth: behind } /* 180deg */
spatial-azimuth가 지정되고 출력 장치가 청취 위치 뒤에서 소리를 생성할 수 없는 경우, 사용자 에이전트는 후방 반구 값을 전방 반구 값으로 변환해야 합니다. 한 가지 방법은 다음과 같습니다:
이름: | elevation |
---|---|
값: | <angle> | below | level | above | higher | lower | inherit |
초기값: | level |
적용 대상: | 모든 요소 |
상속됨: | 예 |
백분율: | N/A |
미디어: | aural |
계산값: | 정규화된 각도 |
이 속성의 값 의미는 다음과 같습니다:
이 효과를 달성하기 위해 사용된 정확한 방법과 사용된 스피커 수는 정의되지 않습니다. 이 속성은 단순히 원하는 최종 결과를 식별합니다.
h1 { elevation: above } tr.a { elevation: 60deg } tr.b { elevation: 30deg } tr.c { elevation: level }
이름: | speech-rate |
---|---|
값: | <number> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit |
초기값: | medium |
적용 대상: | 모든 요소 |
상속 여부: | 예 |
백분율: | N/A |
미디어: | aural |
계산된 값: | number |
이 속성은 말하기 속도를 지정합니다. 절대 키워드와 상대 키워드 값 모두 허용됩니다 (예: 'font-size'). 값의 의미는 다음과 같습니다:
이름: | voice-family |
---|---|
값: | [[<specific-voice> | <generic-voice> ],]* [<specific-voice> | <generic-voice> ] | inherit |
초기값: | 사용자 에이전트에 따라 다름 |
적용 대상: | 모든 요소 |
상속 여부: | 예 |
백분율: | N/A |
미디어: | aural |
계산된 값: | 지정된 대로 |
값은 음성 패밀리 이름의 쉼표로 구분된 우선순위 목록입니다 (예: 'font-family'). 값의 의미는 다음과 같습니다:
h1 { voice-family: announcer, male } p.part.romeo { voice-family: romeo, male } p.part.juliet { voice-family: juliet, female }
특정 음성의 이름은 인용부호로 묶을 수 있으며, 이름이 식별자 구문 규칙을 따르지 않는 경우 반드시 인용부호로 묶어야 합니다. 또한, 두 개 이상의 단어로 구성된 이름의 특정 음성은 인용부호로 묶는 것을 권장합니다. 인용부호를 생략하면 음성 패밀리 이름 전후의 공백 문자는 무시되고, 음성 패밀리 이름 내의 공백 문자 시퀀스는 단일 공백으로 변환됩니다.
이름: | pitch |
---|---|
값: | <frequency> | x-low | low | medium | high | x-high | inherit |
초기값: | medium |
적용 대상: | 모든 요소 |
상속 여부: | 예 |
백분율: | N/A |
미디어: | aural |
계산된 값: | frequency |
말하는 목소리의 평균 피치(주파수)를 지정합니다. 목소리의 평균 피치는 voice family에 따라 다릅니다. 예를 들어, 표준 남성 목소리의 평균 피치는 약 120Hz이며, 여성 목소리는 약 210Hz입니다.
값의 의미는 다음과 같습니다:
이름: | pitch-range |
---|---|
값: | <number> | inherit |
초기값: | 50 |
적용 대상: | 모든 요소 |
상속 여부: | 예 |
백분율: | N/A |
미디어: | aural |
계산된 값: | 지정된 대로 |
평균 피치의 변화를 지정합니다. 인간 목소리의 피치는 기본 주파수에 의해 결정되며, 일반적으로 남성 목소리는 120Hz, 여성 목소리는 210Hz의 값을 가집니다. 인간 언어는 다양한 억양과 피치로 말해지며, 이러한 변화는 추가적인 의미와 강조를 전달합니다. 따라서, 매우 생동감 있는 목소리, 즉, 강한 억양이 있는 목소리는 높은 pitch range를 보입니다. 이 속성은 이러한 변화가 발생하는 범위, 즉 기본 주파수가 평균 피치에서 얼마나 벗어날 수 있는지를 지정합니다.
값의 의미는 다음과 같습니다:
이름: | stress |
---|---|
값: | <number> | inherit |
초기값: | 50 |
적용 대상: | 모든 요소 |
상속 여부: | 예 |
백분율: | N/A |
미디어: | aural |
계산된 값: | 지정된 대로 |
목소리의 억양 윤곽에서 "국부적인 피크"의 높이를 지정합니다. 예를 들어, 영어는 강세가 있는 언어이며, 문장의 다른 부분이 주강세, 부강세 또는 삼차 강세로 할당됩니다. 'stress' 값은 이러한 강세 마커에서 발생하는 억양의 양을 제어합니다. 이 속성은 'pitch-range' 속성과 함께 사용되며, 개발자가 고급 청각 디스플레이를 활용할 수 있도록 제공됩니다.
값의 의미는 다음과 같습니다:
이름: | richness |
---|---|
값: | <number> | inherit |
초기값: | 50 |
적용 대상: | 모든 요소 |
상속 여부: | 예 |
백분율: | N/A |
미디어: | aural |
계산된 값: | 지정된 대로 |
말하는 목소리의 풍부함 또는 밝기를 지정합니다. 풍부한 목소리는 큰 방에서도 잘 전달되며, 부드러운 목소리는 그렇지 않습니다. ("부드러운"이라는 용어는 파형을 그렸을 때의 모양을 나타냅니다.)
값의 의미는 다음과 같습니다:
추가 음성 속성인 'speak-header'는 아래에 설명되어 있습니다.
이름: | speak-punctuation |
---|---|
값: | code | none | inherit |
초기값: | none |
적용 대상: | 모든 요소 |
상속 여부: | 예 |
백분율: | N/A |
미디어: | aural |
계산된 값: | 지정된 대로 |
이 속성은 문장 부호가 어떻게 발음되는지를 지정합니다. 값의 의미는 다음과 같습니다:
이름: | speak-numeral |
---|---|
값: | digits | continuous | inherit |
초기값: | continuous |
적용 대상: | 모든 요소 |
상속 여부: | 예 |
백분율: | N/A |
미디어: | aural |
계산된 값: | 지정된 대로 |
이 속성은 숫자가 어떻게 발음되는지를 제어합니다. 값의 의미는 다음과 같습니다:
표가 음성 생성기에 의해 읽힐 때, 데이터 셀과 헤더 셀 간의 관계는 수평 및 수직 정렬과는 다른 방식으로 표현되어야 합니다. 일부 음성 브라우저는 사용자가 2차원 공간에서 이동할 수 있도록 하여 공간적으로 표현된 관계를 매핑할 기회를 제공할 수 있습니다. 그것이 불가능한 경우, 스타일 시트는 헤더가 읽히는 지점을 지정해야 합니다.
이름: | speak-header |
---|---|
값: | once | always | inherit |
초기값: | once |
적용 대상: | 테이블 헤더 정보를 가진 요소 |
상속 여부: | 예 |
백분율: | N/A |
미디어: | aural |
계산된 값: | 지정된 대로 |
이 속성은 테이블 헤더가 각 셀 전에 읽히는지, 아니면 이전 셀과 다른 헤더와 연관된 셀 앞에서만 읽히는지를 지정합니다. 값의 의미는 다음과 같습니다:
각 문서 언어는 작성자가 헤더를 지정할 수 있도록 하는 다양한 메커니즘을 가질 수 있습니다. 예를 들어, HTML 4 ([HTML4])에서는 "headers", "scope", "axis"라는 세 가지 속성을 사용하여 헤더 정보를 지정할 수 있으며, 이러한 속성이 지정되지 않은 경우 헤더 정보를 결정하기 위한 알고리즘을 제공합니다.
헤더 셀("San Jose" 및 "Seattle")이 데이터가 적용되는 열이나 행에 있지 않은 표의 이미지.
이 HTML 예제는 연속된 날짜 동안 두 위치(San Jose 및 Seattle)에서 식사, 호텔 및 교통비로 지출된 금액을 나타냅니다. 개념적으로, 표를 n차원 공간으로 생각할 수 있습니다. 이 공간의 헤더는 위치, 날짜, 카테고리 및 소계입니다. 일부 셀은 축을 따라 마크를 정의하고, 다른 셀은 이 공간 내의 지점에서 지출된 금액을 제공합니다. 이 표의 마크업은 다음과 같습니다:
<TABLE> <CAPTION>여행 경비 보고서</CAPTION> <TR> <TH></TH> <TH>식사</TH> <TH>호텔</TH> <TH>교통비</TH> <TH>소계</TH> </TR> <TR> <TH id="san-jose" axis="san-jose">San Jose</TH> </TR> <TR> <TH headers="san-jose">1997년 8월 25일</TH> <TD>37.74</TD> <TD>112.00</TD> <TD>45.00</TD> <TD></TD> </TR> ...
이 데이터를 이와 같은 방식으로 제공함으로써, 음성 지원 브라우저가 표를 풍부하게 탐색할 수 있도록 합니다. 예를 들어, 각 셀은 목록으로 읽히며, 각 데이터 셀 앞에서 적용 가능한 헤더를 반복합니다:
San Jose, 1997년 8월 25일, 식사: 37.74 San Jose, 1997년 8월 25일, 호텔: 112.00 San Jose, 1997년 8월 25일, 교통비: 45.00 ...
또한 브라우저는 헤더가 변경될 때만 읽을 수도 있습니다:
San Jose, 1997년 8월 25일, 식사: 37.74 호텔: 112.00 교통비: 45.00 1997년 8월 26일, 식사: 27.28 호텔: 112.00 ...
이 스타일 시트는 HTML 4의 가능한 렌더링을 설명합니다:
@media aural { h1, h2, h3, h4, h5, h6 { voice-family: paul, male; stress: 20; richness: 90 } h1 { pitch: x-low; pitch-range: 90 } h2 { pitch: x-low; pitch-range: 80 } h3 { pitch: low; pitch-range: 70 } h4 { pitch: medium; pitch-range: 60 } h5 { pitch: medium; pitch-range: 50 } h6 { pitch: medium; pitch-range: 40 } li, dt, dd { pitch: medium; richness: 60 } dt { stress: 80 } pre, code, tt { pitch: medium; pitch-range: 0; stress: 0; richness: 80 } em { pitch: medium; pitch-range: 60; stress: 60; richness: 50 } strong { pitch: medium; pitch-range: 60; stress: 90; richness: 90 } dfn { pitch: high; pitch-range: 60; stress: 60 } s, strike { richness: 0 } i { pitch: medium; pitch-range: 60; stress: 60; richness: 50 } b { pitch: medium; pitch-range: 60; stress: 90; richness: 90 } u { richness: 0 } a:link { voice-family: harry, male } a:visited { voice-family: betty, female } a:active { voice-family: betty, female; pitch-range: 80; pitch: x-high } }
참고로, Emacs 편집기의 음성 하위 시스템인 Emacspeak에서 구현된 속성 목록은 다음과 같습니다.
(음성 속성의 구현 상태에 대한 정보를 제공해 주신 T. V. Raman께 감사드립니다.)