Subscribed unsubscribe Subscribe Subscribe

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 整形モデルは、視覚ボックスモデルに類似した入れ子構造で発音と無音を表しています。ここではそれを、聴覚ボックスモデルと呼びます。

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

次の図式に、選択要素(図中の "" )に適用される, 視覚ボックスモデル / 聴覚ボックスモデル のプロパティの間の等価性を示す:

f:id:watilde:20131215170156p:plain

プロパティ一覧

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 さんです!