ウェブとルビ

概要

ウェブ組版の特徴
ルビの要件と事例
ウェブでルビ

DTP組版

紙の形が固定
紙のサイズが固定
コンテンツが固定
組版時にフォントを決める
組版時にフォントサイズを決める
……

→ 手動確認・調整で完全コントロール

ウェブ組版の場合

画面サイズが未定

デバイス多様性

画面の向きが未定

コントロール不可

使用可能フォントが未定
ネットワーク条件
ユーザ設定：
- フォント設定
- 文字サイズ設定
- ダークモード・セピア
- 行間設定
- 縦・横書き設定
- ルビ設定
ブラウザバージョン
リーダーモードの使用
スクリーンリーダーの使用

ウェブ組版のチャレンジ

デザインの実現は作成環境で行われていない。
表示環境に合わせる手動調整が出来ない。
ブラウザが作成者の代理でデザインを実現をする。
作成者の意図を詳しく表現する必要がある。

ウェブ組版の要件

HTMLで十分な構造に関する情報
CSSで十分な期待の組版に関する指示
エンジンで十分な組版機能

ちょこっとのデモ

段組組版

columns: 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

columns: 15em

改行管理

<h1>風の谷の<wbr>ナウシカ</h1>

word-break: normal

風の谷のナウシカ

word-break: keep-all

風の谷のナウシカ

概要

ウェブ組版の特徴
ルビの要件と事例
ウェブでルビ

ルビの種類

対字モノルビ

ルビの種類

対語グループルビ

ルビの種類

熟語ルビ

熟語の組版

モノルビ

熟語の組版

グループルビ

熟語の組版

熟語ルビ・中

熟語の組版

熟語ルビ・小

熟語の組版

熟語ルビ・大

熟語の改行

その他の要件

ルビのインライン化

ルビの音声合成

↓

きょうとし

検索可

アクセシビリティ

文字サイズ

アクセシビリティ

ディスレクシア

アクセシビリティ

ディスレクシア

複層ルビ

読む能力によるバリエーション

概要

ウェブ組版の特徴
ルビの要件と事例
ウェブでルビ

特に問題がないところ

仕様も実装もOK

モノルビの表示

<ruby>狼<rt>おおかみ</ruby>

グループルビの表示

<ruby>今日<rt>きょう</ruby>

ルビ文字の色・サイズ等変更

rt { color: red; font-size: 0.6em; }

特に問題がないところ

仕様も実装もOK

モノルビ・グループルビのインライン化

<ruby>今日<rp>（<rt>きょう<rp>）</ruby>

ruby, ruby * { display: inline; font-size: 1em; }

モノルビ・グループルビの検索可

解決しやすい問題

仕様はOK、実装は途中（一部のブラウザのみ）

rt { padding-bottom: 0.5em; }

rt { text-transform: full-size-kana; }

問題：熟語

マークアップへの要件：

親文字とルビ文字の関係
単語の区別
読み順を混ぜない

熟語問題、改行

親文字とルビ文字の関係を知っている場合
親文字とルビ文字の関係を知っらない場合

熟語問題、インライン化

読み順が守られている場合
読み順が混ざった場合

熟語問題、検索可

読み順が守られている場合
読み順が混ざった場合

仮名の省略

親文字とルビ文字の関係を知っらない場合: 改行不可
読み順が混ざった場合: 検索不可

熟語問題、組版スタイル

熟語ルビ（とその他のバリエーション）に必要情報：: 親文字とルビ文字の関係; 単語の区別

熟語問題：マークアップ

マークアップ	字の関係	単語の区別	読み順	仕様	実装
`<ruby>京都<rt>きょうと</ruby>`	×	○	○	○	○
`<ruby>京<rt>きょう</rt>都<rt>と</ruby>`	○	△	×	○	△
`<ruby><rb>京<rb>都<rt>きょう<rt>と</ruby>`	○	○	○	△	△

問題：音声合成

期待：: 京都市長きょうとしちょう　→　きょうとしちょう
<ruby>京都市長<rt>きょうとしちょう</ruby> <ruby><rb>京<rb>都<rb>市<rb>長<rt>きょう<rt>と<rt>し<rt>ちょう</ruby>: きょうとしちょうきょうとしちょう
<ruby>京<rt>きょう</rt>都<rt>と</rt>市<rt>し</rt>長<rt>ちょう</ruby>: きょうきょうととししちょうちょう
（強橋戸と士師町長？）（恐々父獅子蝶々？）

音声合成問題：原因

熟語ルビ問題と重なって、読み順が混ざる
マークアップで
発音を表すルビ（フリガナ）と
それ以外（義訓など）のルビを
区別する必要

結論

ウェブと電子書籍では、ルビの基礎になる技術はある程度出来ているが……

実装と標準化がまだ足りない

目的

デザインの多様性
× 環境に自動調整
×
アクセシビリティ
×
ユーザ設置

参照

日本語組版処理の要件: https://www.w3.org/TR/jlreq/
ルビの簡便な配置ルール: https://www.w3.org/TR/simple-ruby/ruby-rules-ja.pdf
CSSルビ仕様書: https://www.w3.org/TR/css-ruby/
（不足している）公式HTML仕様書: https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-ruby-element
ルビを拡張している非公式HTML仕様書（案）: https://html.rivoal.net/multipage/text-level-semantics.html#the-ruby-element