CSSの声を聞く

CSS Property Advent Calendar 2013 の15日目です！

今回は、
現在 Technical Report 段階の CSS-Speech Module を紹介します！

CSS-Speech Moduleってなに？

CSS （ Cascading Style Sheets ）は、（ HTML や XML などの）マークアップ文書から， スクリーン, 紙, 発話（ speech ）, 等々 の媒体への具現化（ rendering ）を記述するための言語である。 Speech モジュールは、作者が，発話合成を通して, 加えて 随意で音声指示も利用して，文書の音声化（ rendering ）を宣言的に制御できるようにするための、聴覚 CSS プロパティを定義する。 この標準は Voice Browser Activity との協同の下，開発された。

扱いとしては、media="print"とかと同列で、今だと
JavaScriptでaudio elementを利用して音声案内をしてるようなのを、CSSに任せることができるようになるというものです。
また、CSS2.1でTRになっていたAural style sheetsの作り直しという位置づけみたいです。

例

では、例を見てみましょう

h1, h2, h3, h4, h5, h6 {
  voice-family: paul;        /* 特定のボイス名 */
  voice-stress: moderate;    /* 強調するときの度合い */
  cue-before: url(../audio/ping.wav); /* 音声指示 */
  voice-volume: medium 6dB;  /* 聴感音量＋出力音量の補正量 */
}
p.heidi {
  voice-family: female;      /* 女性ボイス */
  voice-balance: left;       /* 左チャンネル */
  voice-pitch: high;         /* 高めの音高 */
  voice-volume: -6dB;        /* 出力音量の補正量 */
}
p.peter {
  voice-family: male;        /* 男性ボイス */
  voice-balance: right;      /* 右チャンネル */
  voice-rate: fast;          /* 速い発話 */
}
span.special {
  voice-volume: soft;        /* 控えめな聴感音量 */
  pause-after: strong;       /* 強いポーズ */
}

<h1>Paul です。見出しの読み上げを担当します。</h1>
<p class="heidi">こんにちは、私は Heidi よ。</p>
<p class="peter">
  <span class="special">聴こえますか？</span>
  僕は Peter 。
</p>

これは、見出し文を自称ぽーるさんのボイスで、normalよりも強いmoderate強調を使って右チャンネルから発声させており
各見出しは自称へいでぃさんのボイスで、高めの女性ボイスを使って左チャンネルから発声させているというもの。
specialクラスが付与されてるspan要素では、テキストの音量が控えめになっており、発声後に強いポーズが導入されることによって韻律境界が作成されています。

音の整形モデル

聴覚媒体のためのCSS 整形モデルは、視覚ボックスモデルに類似した入れ子構造で発音と無音を表しています。ここではそれを、聴覚ボックスモデルと呼びます。

聴覚 “キャンバス” は、［ 合成発話と音声指示 ］が共存し得るような，［ ２チャンネル（ステレオ）空間, および時間軸 ］の次元 【 聴覚次元 】 からなる。 選択要素 【 “CSS 選択子により選択されている要素” — 論の対象にされているプロパティが適用される要素 — この仕様を通して，この意味で用いられる 】 は、（内側から外側にかけて）［ rest, cue, pause ］プロパティで囲まれる。 これらは それぞれ，聴覚において［ padding, border, margin ］プロパティに等価なものと捉えられる。 疑似要素［ ::before, ::after ］ [CSS21] が利用された際には，それらは要素の内容と rest の狭間に挿入される。

次の図式に、選択要素（図中の "" ）に適用される， 視覚ボックスモデル ／ 聴覚ボックスモデル のプロパティの間の等価性を示す：

プロパティ一覧

Property Advent Calenderなので、最後にプロパティ一覧を載せておきます

プロパティ	値	初期値	継承
cue	<'cue-before'> <‘cue-after’>?	N/A	no
cue-after	<'uri'> <'decibel'>? / none	none	no
cue-before	<'uri'> <'decibel'>? / none	none	no
pause	<‘pause-before’> <‘pause-after’>?	N/A	no
pause-after	<'time'> / none / x-weak / weak / medium / strong / x-strong	none	no
pause-before	<'time'> /none / x-weak / weak / medium / strong / x-strong	none	no
rest	<'rest-before'> <'rest-after'>?	N/A	no
rest-after	<'time'> / none / x-weak / weak / medium / strong / x-strong	none	no
rest-before	<'time'> / none / x-weak / weak / medium / strong / x-strong	none	no
speak	auto / none / normal	auto	yes
speak-as	normal / spell-out // digits // [ literal-punctuation // no-punctuation ]	normal	yes
voice-balance	<'number'> / left / center / right / leftwards / rightwards	center	yes
voice-duration	auto / <'time'>	auto	no
voice-family	[[<'name'> / <'generic-voice'>],]* [<'name'> / <'generic-voice'>] / preserve	implementation-dependent	yes
voice-pitch	<'frequency'> && absolute / [[x-low / low / medium / high / x-high] // [<'frequency'> / <'semitones'> / <'percentage'>]]	medium	yes
voice-range	<'frequency'> && absolute / [[x-low / low / medium / high / x-high] // [<'frequency'> / <'semitones'> / <'percentage'>]]	medium	yes
voice-rate	[normal / x-slow / slow / medium / fast / x-fast] // <'percentage'>	normal	yes
voice-stress	normal / strong / moderate / none / reduced	normal	yes
voice-volume	silent / [[x-soft / soft / medium / loud / x-loud] // <'decibel'>]	medium	yes

まだまだ使えるようにならないcss-speechですが
とっても色んな可能性を秘めているので
もっともっと推し進めていきたいですねヽ(´ー｀)ノ
日本語対応の話が出た際には発言していくようにしたいところ！

明日は ksk1015 さんです！