第三回部会 - New!

概要:
HTML5/CSSで実現できるルビ、実現できないルビ
関連するW3C仕様:

ルビ

みなさんこんにちは。 今日きようは、ルビとは何か、またCSSでどのようなルビができるのか、についてべんきようします。

この発表は、2015年9月4日に行われた、CSS部の勉強会の内容を書き起したものです。 CSS Ruby Layout Module Level 1の2014年8月5日のWorking Draft版に沿って行わています。

ルビとは何か

ルビの説明をするときには、伝統的にこのサンプルを使うというならわしがありますので、ちゆうちよせずにこれを使うことにします。

とある科学のレールガン

ルビとは、簡単に言えば、ほんです。 「振り仮名」と言ってしまうと、かんに対してひらがなを付けることのみを指します。 ひらがな以外にカタカナを付けることを含んでもよいかもしれませんが、さらに英字などを付ける場合があったり、おやが漢字以外の場合もあったりします。 そうすると、「振り仮名」という用語は少し合わなくなってきます。 「ルビ」と言うほうがはんが広くなり、そういうケースも含むようになるので、使いやすい言葉かなと思います。

ルビを付ける対象を「おや」や「ruby baseルビ ベース」と言います。 上の例では、漢字で書かれている「科学」や「超電磁砲」ですね。

振り仮名のほうを「ルビ」や「ruby textルビ テキスト」と呼びます。 「かがく」や「レールガン」です。

余談コラム

Railgunレールガンというのは、ローレンツ力電磁誘導を利用して、物体を発射する機構デヴアイスのことです。 下の図にあるように、2本のレールとその間に置く導電体コンダクター電気回路サーキツトを形成し、レール付近で磁場マグネテイツク・フイールドを発生させます。 この磁場は、移動可能な導電体の後方に向くフオースとなりますから、導電体は前に押し出プロジエクトされます。 長いレールの中で大きな電流カレントを流し続ければ、この導電体は、弾丸のような速度になり、レールの末端から射出物プロジエクタイルとして放出されます。

レールガン

しばしば混同されるリニアモーターとの違いは、射出物の構造です。 リニアモーターでは電磁石で磁性体を引き付けたり反発させたりの制御を行いながら推進力を得るので、射出物自体にモーターのような電磁石と制御装置を搭載する必要があります。 それに対して、超電磁砲レールガンは、電流を流す材料自体を回路の一部として利用し、その周辺で起きる力を推進力にします。 射出物プロジエクタイルは金属片でもよいし、非金属の物体の底に金属箔フオイルを纏わせたものでも構いませんので、構造は単純です。 十分な電流と、長いレールを与えられれば、大砲のように使用できる装置ウエポンになります。 火薬式の射出装置に比べて、音速を超えるようウルトラ・ソニツクな圧倒的な初速ベロシテイーを得られるという特長があります。 欠点は、その大電流の用意が難しいことや、大電流のために射出失敗などで材料が溶着してしまうと、復旧に手間がかかることです。

詳細については、「レールガン」のキーワードでWeb検索をしてください。 「超電磁砲」で検索しググつても、本論コラムと関係のない記事しか出てこないようです。

ルビの特徴

位置

横書きでは親文字のうえにルビテキストを付けます。

紋章、横書き

縦書きでは親文字のみぎにルビテキストを付けます。

紋章、縦書き

サイズ

ルビテキストのサイズは、だいたい親文字の1/2くらいであることが多いようです。

例外もあります。 見出しなどで親文字自体がとても大きい場合は、ルビテキストには小さなサイズが選ばれることが多いです。 反対に、あまりに小さい文字サイズでは、ルビを振るかわりに、本文中で読み仮名を括弧の中に入れる、インラインでの表示もあります。 下は、インラインの表示例です。

とある科学のレールガン、インライン

小書き文字

印刷のしようせつなどを読んでいると、「ゃ」「っ」などの小書き文字が来るべきところで、大きな「や」「つ」で書かれているのをよく見かけます。 これは日本語のルビに特徴的な、き文字を使わないというスタイルです。 日本語の母国語話者なら、小書き文字かどうかを予想しながら読むことは、それほど難しくありませんね。 あまり見掛けない単語でも、うまく予想して、読むことができます。 たとえば、びよういんよういんは自然に区別できたりしますし、はつ廿日はつかも大丈夫でしょう。 このスタイルの背景には、小さすぎると見えない、という読者側の理由もあるしょうし、昔の活字の時代の組版環境では綺麗に印刷するのが難しかった、という印刷側の問題もあったのではないか、と予想できます。 ただでさえ小さな、ルビ用の金属活字と比べて、それより一回りも違う小書き文字の活字は、製作したり印刷機にセットしたりが難しそうだ、というのは容易に想像がつきます。

ただし、難読地名のように小書き文字かどうかのヒントが得られないものや、読者に任せてしまうと誤読の恐れが高くなる場合には、小書き文字も使うことがあるようです。 また、どうしょでは、小書き文字をせっきょくてきに使います。 これは、児童書の基本の文字サイズが大きいからではなく、読みを正確に伝えたい意図があるからだそうです。 たしかに、子供は、漢字の読みのパターンを学習する過程にあるので、まだ大文字・小文字の解読を任せられる段階にはないわけですね。

最近では、もちろん従来のスタイルも多くありますが、印刷機の性能が向上したからでしょうか、小書き文字を使うスタイルも珍しくないようです。

余談:世界のルビ事情

世界には様々な文字があります。 日本人が「外国の文字」として、一番最初に思い浮かべるのは、英字ですね。

Abcde-en

英字の例です。 英語という言語は、基本的に英字で書かれますが、文字にルビを振ったり、アクセント記号を振ったり、ということはしません。

似たような文字セットを持つフランス語はどうでしょうか。

Abcde-en

フランス語には、このように、いくつかのアクセント記号があります。 元々は、例えば「c」と「ç」は記号なしでどちらも「c」で代表されていたところ、発音の違いを区別しないと困るケースが出てきたのでしょう。 カ行で発音するほうは記号なし、サ行で発音する場合に「s」の尻尾を付けて区別しよう、ということで「ç」の字が発明されました。 これはルビとは少し違いますね。 特定の字に特定の方法で付ける記号なので、日本語で例えると、濁点のようなものでしょうか。

お馴染みのアラビア文字では、どうでしょう。

s-sh-ar

サ行の音を表す「س」という字と、それに3つの点を付けたような「ش」があります。 これらは別の字で、文字コード上も違いますが、由来は同じだろうということが想像できます。 点付きの「ش」は、シャの音を表します。 これも初期には文字にあと付けし、のちにそれぞれ独立した文字として人々に認識されるようになったのでしょう。 フランス語のセディーユのようなものと考えてよいですね。

s-sa-su-ar

アラビア文字には、それとは別に、このような記号を付けることがあります。 これらは母音記号です。 アラビア語は、文脈を見ると母音が予想できるので、母音表記は不要、という特徴を持っています。 そのため、通常はこのような母音記号は省略されるのですが、児童書や聖典クルアーンなどでは印されます。 特に聖典では、赤字で付されることがあり、あとから注釈のために付けるものとして運用されていることがわかります。 まるで日本語の振り仮名のようですね。 日本語の振り仮名も、元々は不要で、読みを示したいときにオプショナルで付けるものです。

漢字の例をいくつか見てみましょう。 中華人民共和国中国では、ローマ字による発音記号である「併音ピンイン」を漢字に振り、子供や学習者に正確な音声を教えます。

hanzi

学習用ですので、日本語のルビよりも大きな文字で行われることが多くあります。 また、すぐ上に付されるだけでなく、単語リストの隣に置いたり、漢字のみの行の脇にピンインのみの行を付けたりと、教科書の都合で様々なレイアウトが行われるようです。 ちなみに、漢字は1950年代に制定された簡体字が使われています。 上の例は「漢字」ですが、日本語の字形よりもだいぶ省略されていますね。

bopomofo-intercharacter

一方こちらは、中華民国台湾でよく使われる、漢字の音声表記です。 カタカナのようにも見えるこの記号は、「注音符號」と呼ばれていて、1900年ころに考案されたものです。 文字セットの4字の音を代表して「ㄅㄆㄇㄈボポモフォ」とも呼ばれます。 漢字の筆画の一部を切り出して、音だけを表すように記号化されたということで、カタカナの由来にそっくりです。

ちなみに、注音符號は縦書きのときは各字の右に縦で付され、日本語のルビと同じです。 なんと横書きのときも各字の右に縦で付されることがあるというのです。

こうすると、インラインで表記でき、行間を大きくあけずに済むという利点があるのかと想像します。 横書きで上に付される場合もありますので、目的に応じて使い分けられているのでしょう。

マークアップ方法

HTML5

それでは、マークアップの方法について、説明します。

構造としては、まず、ルビを振る対象範囲を<ruby>タグで囲います。 そして、<ruby>と</ruby>の間に、親文字とルビ文字を定義します。

1
2
3
4
5
6
7
8
9
10
11
12
<p>
    とある
    <ruby>
        <rb>科学</rb>
        <rt>かがく</rt>
    </ruby><ruby>
        <rb>超電磁砲</rb>
        <rt>レールガン</rt>
    </ruby>
</p>

親文字は、<rb>タグの中に入れます(ruby baseの略でrbです)。

ルビ文字は、<rt>タグの中に入れます(ruby textの略でrtです)。

これは面倒なので、下のような省略形もHTML5で定義されています。 これがルビの最小のマークアップということになります。

1
2
3
4
5
6
7
8
9
10
<p>
    とある
    <ruby>
        科学<rt>かがく
    </ruby><ruby>
        超電磁砲<rt>レールガン
    </ruby>
</p>

余談

HTML5が出る前にも、実はルビはW3Cで定義れていました。 2001年くらいから、W3Cにありました。 XHTMLの仕様にルビがあったのです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ruby>
    <rbc>
        <rb>10</rb>
        <rb>31</rb>
        <rb>2002</rb>
    </rb>
    <rtc>
        <rt>Month</rt>
        <rt>Day</rt>
        <rt>Year</rt>
    </rtc>
    <rtc>
        <rt rbspan="3">
            Expiration Date
        </rt>
    </rtc>
</ruby>

上がその例ですが、XHTMLでは閉じタグは省略できないので、HTML5の仕様よりも厳密になっています。 多機能でしたが、マークアップの分量が多く、手軽に記述するのには向いていないという問題を抱えていました。 結果的に、あまり普及しないまま、HTML5の記法のほうが日の目を見ることになりました。

余談:どうしてこうじゃないのか
1
<span ruby="かがく">科学</span>

この記法のほうが良いんではないか、という提案を見かけます。 少なからず上がってくる定番の提案です。 一見、このほうが読みやすいですね。 実際、どうなんでしょうか。

しかし、欠点がいくつかあり、HTML5では採用されていません。 例えば、この記法では、上下にルビを振ることができません。 ルビ自体にスタイルを指定することもできません。 また、「科学」に対して「Science」と振る場合(科学Science)に、言語も指定したくなる場合が出てきます。 しかし、プロパティによる記法では、lang=enのように言語Languageを指定することはできません。 lang=enと書いてしまうと、タグのプロパティではなく、タグで囲った文字のほうの言語を指定することになってしまうからです。 言語指定は一例ですが、このように、プロパティに指定するタイプのマークアップ方式では、ルビに対する書式指定Formatが不足してしまいます。

一方、HTML5/CSSで提案されているマークアップ方式では、タグの中にルビ文字を記載しますので、普通のタグのように書式指定を与えることができます。 こちらのほうが優れているとの判断から、HTML5/CSSでは、本文で示したような<rb>タグ、<rt>タグによる記法が採用されました。

ルビの種類

熟語ルビとモノルビ

こちらをご覧ください。

jukugo-mono

ルビの話で定番で上がってくる、熟語ルビとモノルビの例です。 熟語ルビとモノルビで、どこが違うかわかるでしょうか。

「鬼門」と「方角」はどちらも一緒です。 「凝視」を凝視すると、モノルビのほうで、漢字の間が少し空いています。 これは、凝視しすぎて穴があいたのではなく、モノルビの仕様なのです。 親文字とルビ文字が綺麗に1対1で対応しているのが、モノルビです。

モノルビは、下のように漢字1字ずつをrubyタグで囲って、ルビを振ります。

1
2
3
4
<ruby><rt>ぎよう</ruby>
<ruby><rt></ruby>
する

熟語ルビでは、漢字全体に対してルビ文字をグループ化して配置されているように見えます。 まず、熟語をrubyタグで囲います。 その中では、rbタグでまず親文字を1文字ずつ並べます。 次に、rtタグで、各親文字に対応するルビ文字を順に入れていきます。

1
2
3
4
5
6
<ruby>
    <rb><rb><rt>ぎよう<rt></ruby>
する

モノルビでは、各漢字について、振り仮名が3字以上になってしまうと、漢字の間があいてしまい、それがかっこ悪さにつながります。 日本語は、あまり字間のスペースを好まない言語です。 漢字2字に対して、振り仮名4字以内ならば、漢字の上に収まるように配置するとかっこよく見えますね。 漢字と漢字の間にスペースをあまり置きたくない場合は、適宜ルビ文字をグループ化してくれる熟語ルビというスタイルが好まれます。

グループと言えば、グループルビというのもありまして、「如月きさらぎ」や「超電磁砲レールガン」のように分割できない単語に使います。 このように熟語を分けずに記載します。

1
2
3
4
5
6
<ruby>
    <rb>凝視
    <rt>ぎようし
</ruby>
する

こうなります。

jukugo

group

熟語ルビのほうは、親文字1つに対してどのルビが振られるかのマークアップを行います。 グループルビは、親文字全体に対するルビを指定します。 表示上は、熟語ルビもグループルビも違いがないように見えますね。 はい、どこも違いがないのです。 この例では、どちらも親文字全体に対して、指定されたルビが振られていますので、データ上だけの違い、ということになります。

さて、改行が絡んでくると、違いが出てきます。 下の図を見てください。

jukugo-linebreak

改行が絡んできたとき、熟語ルビはどのように表示されると、かっこいいでしょうか。

じゆくの間に改行が入るときに、すべてのルビが行末に取り残されるのは、かっこ悪いですね。 また、ルビの文字数の半分を適当に割り振って「じゅ・くご」のように分かれるのも、見栄えがよくありません。 熟語に振られたルビは、漢字の対応をきちんと見て、「じゅく・ご」に分かれるのが美しいです。 熟語ルビは手間がかかりますが、漢字の間のスペースをできるだけ避け、日本人が読んで美しいと思える表現です。

グループルビのほうは、改行があるとき、どうなるでしょうか。

group-linebreak

左は、好ましくない例です。 「ルガン」て何でしょう。 グループルビとして指定された単語は、中で改行をしてしまうと、おかしなところで区切れてしまいます。 「如月きさらぎ」なども、「きさ・らぎ」で区切ったり、「き・さらぎ」で区切ったり、といったことは相応しくありません。 右のように、グループに指定した単位で、改行を入れます。

おさらいとして、3種類のルビを一覧にします。

ruby-summary

グループルビと熟語ルビの違いを忘れそうですが、大まかに言えば、違いが出るのは、2字の熟語の間に改行が入るかどうかです。 改行がないときは、グループルビと熟語ルビは、同じ表示になります。 また、モノルビと熟語ルビの違いは、「じゅく・ご」のようにルビの文字に偏りがある場合です。 偏りがあって、漢字の間にスペースを空けずに済む方法がある場合には、熟語ルビではスペースが空かないように調整されます。

HTML5/CSSでできるルビ

HTML5/CSSの仕様にあり、表現に使えるルビというものがあります。 また、仕様になく、表現方法が定義されていない表現というものもあります。

ここでは、使えるものについて、紹介します。

rpタグ

さて、このタグは何に使うでしょうか。 用法を説明する前に、まずはrpを使わない例を示します。

1
2
私は<ruby>日本語<rt>にほんご</ruby>を話します。
とても面白い<ruby><rt>はな</ruby>しです。

このようなコンテンツを用意したとき、対応ブラウザではこのように表示されます。

rp-none

ここで、突然のおでましを願います。

pho-strip-tags

掲示板システムなどに投稿するときに、よく投稿文にHTMLタグが使用できないとされている場合がありますね。 PHPではstrip_tagsという関数が用意されています。 この関数は、テキストからすべてのHTMLタグとPHPタグを取り除くという機能になっています。 この関数に通したときに、上のサンプルの文は、このようになってしまいます。

rp-none-strip

上の文のほうは、なにかおかしな表示ということがわかるので、「にほんご」がルビから漏れ出してきたと気付く人がいるかもしれません。 下の文は、「話はなしです」となっていて、何も話すことがなくなったのか、と思ってしまいますね。 意図しない文に取られてしまうと、きっと困ることが起きますので、それは何とか防ぎたいですね。

というわけで、rpタグの出番です。 rpはruby parenthesisの略で、ルビに入れる括弧のためのタグです。 下のように、rpタグで括弧などの文字を囲って、文に入れておきます。

1
とても面白い<ruby><rb></rb><rp>(</rp><rt>はな</rt><rp>)</rp></ruby>しです。

閉じタグは省略できますので、短く書くとこうなります。

1
とても面白い<ruby><rb><rp>(<rt>はな<rp>)</ruby>しです。

ルビ対応ブラウザの場合、rpタグの中は表示されません。 rtのルビ文字だけが、ルビとして表示されます。

ルビに対応していないブラウザの場合、対応していないタグは命令としては無視され、中の文字は表示されます。 これにより、「とても面白い話(はな)しです。」と括弧付きで表示されるわけです。 非対応ブラウザのときは、これが読みやすい表示ですね。 strip_tagsのように、タグを消してしまうフィルタを通したときも、同様です。 タグを消して、中の文字だけが残りますので、同じく「とても面白い話(はな)しです。」になります。

auto-hiding

というルビはどうでしょうか。

auto-hiding-off

ひらがなの「り」の部分に、ルビを付けるのは余計な気がしますね。 確かにその通りで、たまたま親文字がひらがななどのようにルビと同じになる場合、そこにはルビを振りません。

では、必要な部分だけマークアップを分ければよいでしょうか。

auto-hiding-on

このほうが、読みやすいですね。 通常の表示結果としてはこれでよいのですが、下のBのように、非対応ブラウザの場合に括弧で囲われるところが分割されてしまいます。

rp-split

こうなると読みづらいですね。 理想を求めると、対応ブラウザでは「ふ」「がな」のルビが見え、非対応の場合にはAのように「(ふりがな)」のように全体に括弧が付くと読みやすくなります。

この表示を制御するのが、auto-hidingの機能です。 仕様では、このようになっています。

If a ruby annotation has the exact same text content as its base, it is hidden. Hiding a ruby annotation does not affect annotation pairing or the block-axis positioning of boxes in other levels. However the hidden annotation is not visible, and it has no impact on layout other than to separate adjacent sequences of ruby annotation boxes within its level, as if they belonged to separate segments and the hidden annotation’s base were not a ruby base but an intervening inline.

(ルビテキストが親文字と同じ場合、隠される。 ルビを隠すことで、ルビの対応関係や、他のレベルのボックス位置には、影響しない。 しかし、隠されたルビ文字は不可視で、レイアウト上に与える影響は、それが同レベルの隣接のルビを分断するというのみであり、 その結果としてルビは分断された要素にそれぞれ付けられているかのように見え、また、 間の親文字はルビを持たないインライン要素であるかのように振る舞う。)

マークアップ例です。

1
2
3
4
<ruby>
  <rb></rb><rb></rb><rb></rb><rb></rb>
  <rp>(</rp><rt></rt><rt></rt><rt></rt><rt></rt><rp>)</rp>
<ruby>

rpも使う場合は、括弧を1箇所に寄せたいので、まずrbで親文字だけをすべて並べます。 そのあと、rpで括弧を書き、rtタグで必要な数だけルビ文字を記載します。 最初のrtは、最初のrbに対応します。

2015年9月の頭ごろに、Firefox Nightly版で対応がされたようです。 この仕様に従うと、ルビを隠すのは自動でやってくれます。 とても便利な機能ですね。

auto-hiding-firefox

ルビ位置の指定

ルビを表示する位置は、基本的には横書きのときは親文字の上、縦書きでは親文字の右です。 CSSでこの位置を指定することもできます。

1
2
3
.under {
  ruby-position: under;
}

このように使います。

1
2
3
<ruby class="under">
編集者<rt>Editor
</ruby>

こうなります。

editor

両側ルビ

ルビは、両側に振ることもできます。 rtcタグを使って、複数のルビグループを作ります。 それぞれのグループを、基本の位置または指定位置に表示します。 マークアップ例です。

1
2
3
4
5
<ruby>
  東南
  <rtc>とうなん</rtc>
  <rtc class="under">たつみ</rtc>
</ruby>

に付けることもできます。Firefox Nightlyで見ると、こうなります。

both-side-firefox

さて、親文字とルビ文字の数が違うケースでは、どうなるのでしょうか。

1
2
3
4
5
<ruby>
  <rb><rb><rb><rtc><rt><rt>ほん<rt></rtc>
  <rtc class="under"><rt>Japanese</rtc>
</ruby>

「に・ほん・ご」のところでは、親文字のrbの数と、ルビ文字のrtの数を合わせておきます。 rbタグは3つなので、ルビは3つのボックスとして入力しています。 「Japanese」のほうはというと、Jap-an-eseのように分かれたりしませんので、rbが3つのところに対して、rtは1つとなっています。 Japaneseは、下の図で、1つ目のrbタグである「日」の下に表示されるのでしょうか。

Japanese

実は、仕様に書いてあります。

If there are not enough ruby annotations in a ruby annotation container, the last one is paired with (spans across) any excess ruby bases.

(ルビ文字が足りない場合、最後の1つのルビ文字を、残りの親文字すべてに対応づける。)

これによって、残った親文字にまたがるものと見なしてくれます。 XHTML Rubyでは、残った親文字に割り当てるためにはrbspan=“3"のようにいくつまたぐのかを指定をする必要があり、ちょっと不便でした。 HTML5のルビの仕様では、いくつ足りないのかを自分で数える必要がないので、親切な作りになっています。

Japaneseの例では、親文字3つのうち、すでに1字目で次のルビが無くなるので、Japaneseは「日本語」に対して中央に配置されるようになります。 これも、Firefox Nightlyで表示すると、このようになります。

Japanese-firefox

配置指定

ルビが短い場合

ルビ文字のサイズは、標準的には親文字の半分です。 なので親文字1字に対して、ルビ文字2字のとき、領域がちょうどになります。

ルビが親文字より短い場合、どうなるでしょうか。

ruby-align

それぞれ、start、center、space-around、space-betweenという仕様に対応しています。

デフォルトは、space-aroundです。 こうすると、ルビ文字の間だけでなく、ルビの先頭と末尾にもスペースが入ります。 先頭と末尾は、ルビ文字の間に入れるスペースの半分を、それぞれ入れます。

なぜspace-aroundがデフォルトとして選ばれたのでしょうか。 それは、下のような例を見るとわかります。

left-daemon

centerにすると、「左手悪魔」に「ギャラリーフェイク」というルビが付いているようにも読めてしまいます。 これでは誤読の恐れが発生することになります。 space-aroundのほうは、ルビが最初の親文字にかかっていて、ここから読むんだということがわかりますね。

実際にどちらを選ぶかは、センスの問題で、その都度判断したり、現場のスタイルに従うのが良いのかなと思います。 読み間違えをしやすいかどうかで、centerとspace-aroundを使いわけたりするとよいですね。

centerにするには、下のようにマークアップします。 こうすると、ルビ文字の間のスペースがなくなり、親文字に対して中央に寄せられるようになります。

1
2
3
ruby {
  ruby-align: center;
}

ルビが長い場合

ルビが長いことも、よくありますね。 「しょう」「きゅう」のように3文字の読みの漢字が連続する場合や、ひらがなやカタカナの長い単語を振るときに、特に発生します。 極端な例として、カタカナで振るものを見てみましょう。

space-around-golden

この例のうち、綺麗なのはどれでしょうか。 これもセンスによるとは思いますが、デフォルトはspace-aroundになっています。 プロパティ値としては、短い場合と同じですね。 短い場合には、ルビ文字の前後にスペースを入れていましたが、長い場合には、このように、親文字の前後にスペースを入れるようになります。

ほかの値も短い場合と共通で、長いか短いかの環境によって描画してくれます。

HTML5/CSSでできないルビ

ここからは、出版業界では行なわれているが、HTML5/CSSでは残念ながら仕様外で、ブラウザ表示ができないルビについてお話しします。

ルビ文字の圧縮

出版物によっては、漢字1字に3文字のルビを付けたりすることがあるようです。 その際に、少しだけルビ文字の幅を圧縮します。

CSS仕様でどのように定義されているかというと…実は、定義されていないのです。 W3Cのメーリングリストで、ルビの文字サイズの話は時折出るようですが、圧縮の仕様はちょっと見かけません。

行頭・行末調整

ルビ文字の圧縮が指定できないという話をしましたが、行頭・行末調整もまた、CSSにプロパティが用意されていません。 下の例をご覧ください。

line-start-o

出版物では、このように、行頭の漢字は行頭ぴったりに配置しつつ、文字のルビはそれを超えて余白からはみ出ないように、行頭を起点に配置されることが多いですね。

現在のCSS仕様に従って行頭に長いルビを表示すると、下のように、親文字の前後にスペースを入れるため親文字が行頭に揃わなくなります。

line-start-x

startプロパティを使えば、この表現ができそうに思えますが、残念ながらうまくいきません。 長い文章ではどこで折り返しが発生するかはユーザー環境で描画してみないとわかりませんので、文頭に来る漢字を狙って事前にstartを指定することはできませんね。 文中では、space-aroundやcenterのような中央に配置する指定のほうが綺麗なことが多いので、全部のルビをstart指定というわけにもいきません。 また、行末に来たら、startでは効果がありません。

仕様でプロパティが用意されていない、と書きました。 これは、ブラウザでの実装が禁止されていたり、仕様にまったく触れられてない、というわけではありません。 仕様を見てみましょう。

5.2 Line-edge Alignment When a ruby annotation box that is longer than its ruby base is at the start or end edge of a line, the user agent may force the side of the ruby annotation that touches the edge of the line to align to the corresponding edge of the base. This type of alignment is described by [JLREQ].

(ルビアノテーションボックスが親文字より大きく、行頭または行末にあるとき、 ユーザーエージェントはルビの開始位置を行の枠に接触するように制御してもよい。 この揃え方は、JLREQで説明されている。)

というわけで、仕様では、制御のためのプロパティは提案していないものの、ブラウザは行頭・行末を調整してもよいという記述になっています。 ブラウザ開発者のほうで、様々な機能を実装する中でどのような優先順位で、こうしたちょっとした便利機能に時間を割けるか、が問題ですが、みんなでルビをたくさん使って、ルビ表現が充実してくれたらなと思います。

はみ出し

指定できないシリーズ第三弾です。 下の例をご欄ください。

overhang

このように、ルビの一部を前後のひらがななどにかけるのは、出版物ではよく見かけます。 JLReqを見てみましょう。

a. 前又は後ろにくる漢字等(cl-19)にルビ文字を掛けてはならない.

b. 前又は後ろにくる平仮名(cl-15),片仮名(cl-16),長音記号(cl-10)又は小書きの仮名(cl-11)に最大でルビ文字サイズの全角までルビ文字を掛けてもよい.

「漢字等にルビをかけない」とあります。 また、仮名、長音記号にはルビ文字サイズの全角まではみ出してよいともあります。 これに従うと、下記のようになります。

overhang-o

これは、美しい気がしますね。

ちょっと意地悪な例を出してみます。

overhang-touching

JLReqでは上の例を挙げて、「これは誤読される恐れもあり,望ましくない」としています。 そして、「前のルビ文字列と後ろの文字列との間をルビ文字サイズの全角くらい空けるのが望ましい.」と説明し、いくつか解決方法を掲載しています。 その一例が、こちらです。

overhang-touching

「趣」について、ルビ文字が全角分のスペースを空けて配置されるように、親文字の位置を調整しています。 残念ながら、現在のCSS仕様では、ルビ掛けの指定および、この間隔調整の指定がありませんので、ブラウザで実現する指針が示されていないということになります。 ブラウザで高度な組版を行うためには、このあたりの仕様およびブラウザ実装がどれだけ進むか、がポイントになってきそうです。

余談

このように見ると、JLreqは細かい記述がされている、という印象を受けるかもしれません。 暗黙のうちに行われている部分も多い組版の慣習を、ある程度切り出して文書化するという取り組みのひとつが、JLReqの編纂でした。 しかし、実際の組版の調整は、これよりも複雑です。 長きにわたり、様々な設備や目的のもと、組版では様々なレイアウトが行われています。 そのため、すべての組版ルールがJLReqにあるというわけではなく、ブラウザ実装やCSS仕様を考える場合には、適宜、他の文献や実例を見る必要があります。 W3Cのメーリングリストでも、JLReq以外の様々なルールや実例について、議論や情報交換が行われています。

小書き文字の変換

さて、これで本日最後のお題です。

lower-conversion

冒頭にも出ました、ルビでは小書き文字より大文字が好まれる、という話しにリンクしています。 「じゅくご」とマークアップされている場合に、小書き文字を避けて「じゆくご」と表示するようにすると、入力データは日本語の音声としての正確さを保ったまま、表示だけ変えることができるので、便利ですね。 これが現在のHTML5/CSSの枠組みでは、決められていません。 これをブラウザで行いたいと思ったら、表示したい通りに、自分で大文字でマークアップする必要があります。

せっかく読みを入力したり表示したりするのだから、曖昧性アンビギユイテイーをなくして迷わず読めるような表記にするというのは、良いことだと思います。

指定できないものシリーズの連続ですが、これで本稿は終わりです。 ちょっと未来への展望パースペクテイブが開けていないな、という印象を感じるかもしれませんが、W3Cの活動は、Webコンテンツに積極的に使われている表現や、その求めに応えるようにブラウザで実装されている、または実装されるべき表現をみんなで決めていこう、という取り組みです。 ルビの表現力のさらなる向上を求めるには、まずは現在利用できるルビの記法マークアツプを、たくさん使ってみることが大事です。 ひとりひとり、1ページ1ページが、環境の拡充につながりますので、みなさん是非ルビを使っていきましょう。