ウェブとルビ
概要
- イントロダクション
- 動的と個性的なレイアウト
- バリエションの事例
- ウェブ技術で実現
- 音声合成
- これから
2012年ロンドンオリンピック開会式
ティム・バーナーズ＝リーより：
“This is for everyone”
ウェブはあらゆる人のため
- どんな端末を使っても
- どこにいても
- どんな言葉を話しても
- どんな障害があっても
- どんな年齢でも
- どんな教育レベルでも
ルビの必要性
漢字を習い終えていない人：
- 小中学生時の日本人全員
- 学習障害のある人
- 日本語が勉強中の外国人
台湾も同様
他の場合もある
余談：台湾でのルビ
縦書き：
横書き：
二重：
概要
- イントロダクション
- 動的と個性的なレイアウト
- バリエションの事例
- ウェブ技術で実現
- 音声合成
- これから
画面サイズが未定
デバイスの多様性
画面の向きが未定
その他環境の多様性
- フォントサイズ
- 環境の明るさ（ダークモード等）
- 音声合成の有無
- 辞書の有無
- ……
ユーザの多様性
- 教育レベル・年齢
- ディスレクシア
- 視覚障害
- 色覚異常
- 完全盲目
- 好み
- 環境による
- 文脈による：
学術試験、娯楽読書、緊急警報、医療診断…
概要
- イントロダクション
- 動的と個性的なレイアウト
- バリエションの事例
- ウェブ技術で実現
- 音声合成
- これから
熟語の組版
モノルビ
熟語の組版
グループルビ
熟語の組版
熟語ルビ・中
熟語の組版
熟語ルビ・小
熟語の組版
熟語ルビ・大
熟語の組版
インライン化
読む能力によるバリエーション
読む能力によるバリエーション
読む能力によるバリエーション
読む能力によるバリエーション
読む能力によるバリエーション
読む能力によるバリエーション
読む能力によるバリエーション
読む能力によるバリエーション
複層ルビ
複層ルビ
アクセシビリティ
ディスレクシア
他の必要機能
適切に改行
他の必要機能
検索可
電子出版電子出版
概要
- イントロダクション
- 動的と個性的なレイアウト
- バリエションの事例
- ウェブ技術で実現
- 音声合成
- これから
内容とスタイルの分離
- CSS
- 表示の指示：
- 自動組版
- 各バリエーションを実現
内容とスタイルの分離
- HTML
-
<ruby>
今日<rt>きょう
</ruby>
- CSS
-
rt { font-size: 50% }
ruby {
ruby-align: space-between;
ruby-merge: auto;
ruby-position: over;
}
デモのソースコード
<ruby>
<rb>電<rb>子<rb>出<rb>版
<rt class=s2>でん<rt class=s1>し<rt class=s1>しゅっ<rt class=s5>ぱん
</ruby>
学年別漢字配当表のマークアップを出版業界内で標準化？
基礎に問題
公式の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 Ruby Markup Extensions」
現状まとめ表
|
| 構造（HTML）
| 表示（CSS）
| 音声合成
|
| 研究
| 問題分析
| ◎
| ◎
| ○
|
| 解決策の識別
| ◎
| ◎
| ×
|
| 標準化
| 仕様書作成
| 
| ◎
| ×
|
| テストと仕上げ
| ×
| △
| ×
|
| 実装
| Firefox
| ◎
| ○
| △
|
| Kindle
| ○
| △
| △
|
他（Chrome、iBooks…）
| △
| △
| △
| |
概要
- イントロダクション
- 動的と個性的なレイアウト
- バリエションの事例
- ウェブ技術で実現
- 音声合成
- これから
音声合成
二重読み問題
京都市長
- 理想
- 🔊 きょうとしちょう
- 二重読み＋混ぜ読み
-
<ruby>京<rt>きょう</rt>都<rt>と</rt>市<rt>し</rt>長<rt>ちょう</ruby>
- 🔊 きょうきょうみやことししちょうちょう
- 二重読み
<ruby>京都市長<rt>きょうとしちょう</ruby>
<ruby><rb>京<rb>都<rb>市<rb>長<rt>きょう
- 🔊 きょうとしちょうきょうとしちょう
音声合成
ルビ文字だけ読めば？
🔊 あめがすき 🔊
↓
飴が好き
‼️ 雨が好き ‼️
音声合成
親文字だけ読めば？
🔊 終の戦 🔊
↓
終の戦
‼️ 終の戦 ‼️
音声合成
全ての情報が必要
親文字もルビ文字も利用し、
辞書やデータベースで検索し、
一つの発音にする
音声合成
二重読みが正しい場合
計算機
↓
🔊 けいさんき こんぴゅうたあ 🔊
音声合成
未解決
場合によって
- 親文字とルビ文字から一つにする
- 親文字もルビ文字も読み上げる
- 親文字だけを読み上げる
- ルビ文字だけを読み上げる
→作成者の指示が必要
マークアップが未定
概要
- イントロダクション
- 動的と個性的なレイアウト
- バリエションの事例
- ウェブ技術で実現
- 音声合成
- これから
これから
- 仕様書の標準化を仕上げる
- 音声合成問題の解決方法を検討し、仕様書の案を書く
- HTML拡張仕様+CSSルビモデルをブラウザーが実装するように刺激
- HTML拡張仕様+CSSルビモデルを利用する電子書籍作成グイドラインを検討し、開発
- ウェブ開発者へのルビ使用の振興
