ウェブとルビ

概要がいよう

  1. イントロダクション
  2. バリエションの事例じれい
  3. ウェブ技術ぎじゅつで実現じつげん
  4. 音声合成おんせいごうせい
  5. これから

2012年ねんロンドンオリンピック開会式かいかいしき

ティム・バーナーズ=リーより:

“This is for everyone”

ウェブはあらゆる人ひとのため

ルビも「for everyone」に重要じゅうよう

ルビの必要性ひつようせい

漢字かんじを習いならい終えておえていない人ひと:

台湾たいわんも同様どうよう

他ほかの場合ばあいもある

概要がいよう

  1. イントロダクション
  2. バリエションの事例じれい
  3. ウェブ技術ぎじゅつで実現じつげん
  4. 音声合成おんせいごうせい
  5. これから

熟語じゅくごの組版くみはん

読むよむ能力のうりょくによるバリエーション

複層ふくそうルビ

アクセシビリティ

ディスレクシア

概要がいよう

  1. イントロダクション
  2. バリエションの事例じれい
  3. ウェブ技術ぎじゅつで実現じつげん
  4. 音声合成おんせいごうせい
  5. これから

内容ないようとスタイルの分離ぶんり

HTML
<ruby>
  今日<rt>きょう
</ruby>
CSS
rt { font-size: 50% }
ruby {
  ruby-align: space-between;
  ruby-merge: auto;
  ruby-position: over;
}

ルビレイアウト

レイアウトバリエーションの実現じつげんは
W3Cの「CSS Ruby Annotation Layout」で定義ていぎ

注意ちゅうい:実装じっそう未完成みかんせい

基礎きそに問題もんだい

公式こうしきのHTML仕様しようによるデータモデルは単純たんじゅんすぎる。

すべての要件ようけんを同時に満たすみたすことはできない。

マークアップ 字じの関係かんけい 単語たんごの区別くべつ 読み順よみじゅん
<ruby>京都<rt>きょうと</ruby> × ○ ○ 公式こうしき
<ruby>京<rt>きょう</rt>都<rt>と</ruby> ○ △ ×
<ruby><rb>京<rb>都<rt>きょう<rt>と</ruby> ○ ○ ○ 提出中ていしゅつちゅう

問題もんだいの事例じれい

改行かいぎょう

親文字おやもじとルビ文字もじの関係かんけいを知ってしっている場合ばあい
親文字おやもじとルビ文字もじの関係かんけいを知らないしらない場合ばあい

問題もんだいの事例じれい

インライン化か

読み順よみじゅんが守られてまもられている場合ばあい
読み順よみじゅんが混ざったまざった場合ばあい

問題もんだいの事例じれい

検索可けんさくか

読み順よみじゅんが守られてまもられている場合ばあい
読み順よみじゅんが混ざったまざった場合ばあい

解決中かいけつちゅう

マークアップ 改行かいぎょう グループ表示ひょうじ モノ表示ひょうじ 熟語表示じゅくごひょうじ 検索けんさく インライン化か 仮名かなの省略しょうりゃく
<ruby>京都<rt>きょうと</ruby> × ○ × × ○ ○ × 公式こうしき
<ruby>京<rt>きょう</rt>都<rt>と</ruby> ○ △ ○ △ × × ○
<ruby><rb>京<rb>都<rt>きょう<rt>と</ruby> ○ ○ ○ ○ ○ ○ ○ 提出中ていしゅつちゅう

W3Cでの新仕様書しんしようしょ:HTML-WGの「HTML Ruby Markup Extensions」

CfC: https://github.com/w3c/htmlwg/issues/26

概要がいよう

  1. イントロダクション
  2. バリエションの事例じれい
  3. ウェブ技術ぎじゅつで実現じつげん
  4. 音声合成おんせいごうせい
  5. これから

音声おんせい合成ごうせい

二重読みにじゅうよみ問題もんだい

京都市長きょうとしちょう
理想りそう
🔊 きょうとしちょう
二重読みにじゅうよみ+混ぜ読みまぜよみ
<ruby>京<rt>きょう</rt>都<rt>と</rt>市<rt>し</rt>長<rt>ちょう</ruby>
🔊 きょうきょうみやことししちょうちょう
二重読みにじゅうよみ
<ruby>京都市長<rt>きょうとしちょう</ruby>
<ruby><rb>京<rb>都<rb>市<rb>長<rt>きょうと<rt>し<rt>ちょう</ruby>
🔊 きょうとしちょうきょうとしちょう

音声おんせい合成ごうせい

ルビ文字もじだけ読めばよめば?

🔊 あめがすき 🔊

↓

飴あめが好すき

‼️ 雨あめが好すき ‼️

音声おんせい合成ごうせい

親文字おやもじだけ読めばよめば?

🔊 終の戦 🔊

↓

終おわりの戦いくさ

‼️ 終ついの戦いくさ ‼️

音声おんせい合成ごうせい

全てすべての情報じょうほうが必要ひつよう

親文字おやもじもルビ文字もじも利用りようし、
辞書じしょやデータベースで検索けんさくし、
一つひとつの発音はつおんにする

音声おんせい合成ごうせい

二重にじゅう読みよみが正しいただしい場合ばあい

計算機コンピューター

↓

🔊 けいさんき こんぴゅうたあ 🔊

音声おんせい合成ごうせい

未解決みかいけつ

場合ばあいによって

→作成者さくせいしゃの指示しじが必要ひつよう
マークアップが未定みてい

概要がいよう

  1. イントロダクション
  2. バリエションの事例じれい
  3. ウェブ技術ぎじゅつで実現じつげん
  4. 音声合成おんせいごうせい
  5. これから

残りのこりの課題かだい

構造こうぞう(HTML) 表示ひょうじ(CSS) 音声合成おんせいごうせい
研究けんきゅう 問題分析もんだいぶんせき ◎ ◎ ○
解決策かいけつさくの識別しきべつ ◎ ◎ ×
標準化ひょうじゅんか 仕様書作成しようしょさくせい ◎ ×
テストと仕上げしあげ × △ ×
実装じっそう Firefox ◎ ○ △
Kindle ○ △ △
他ほか(Chrome、Safari、iBooks…) △ △ △

ウェブとルビ

このプレゼンは省略版しょうりゃくばん、元版げんばんはオンラインでご覧らんください。