「両端揃え」と「均等割付」。

PC版へ 2014年09月10日

どうやら自分の中でも用語が混乱しているようなので、私見も含めてまとめておきます。『日本語の横書き文書』を整形するときの話です。

両端揃え』というのは、一般的にはこういう処理。

ryotan_01.png

言葉で説明すると、

【両端揃え】

…というのが一般的/標準的かと。

Word系のワープロソフトなどでは、一行の長さに達していない段落最終行も両端揃えにするオプションも用意されています。例えばLibreOfficeならば、

★段落上で右クリック → 表示されるメニューから "段落…" を選択
 → "配置" タブを選択 → "オプション" で「両端揃え」を選択
  → "最後の行" を「両端揃え」に。

…という手順で、下のような表現が可能です。

ryotan_02.png

ウェブページで「両端揃え」を実現しようとするならば、スタイルシートを使うことになります。

あいうえおかきくけこさしすせそたちつてとなにぬ。

<p style="width:100px;font-size:15px;">
あいうえおかきくけこさしすせそたちつてとなにぬ。
</p> <!-- 両端揃えなし -->

あいうえおかきくけこさしすせそたちつてとなにぬ。

<p style="width:100px;font-size:15px;text-align:justify;">
あいうえおかきくけこさしすせそたちつてとなにぬ。
</p> <!-- Firefox -->

あいうえおかきくけこさしすせそたちつてとなにぬ。

<p style="width:100px;font-size:15px;text-align:justify;text-justify:inter-ideograph;">
あいうえおかきくけこさしすせそたちつてとなにぬ。
</p> <!-- IE -->

ChromeやSafariなどのWebKit/Blink系ブラウザでは、両端揃えが上手くいかないと思います。2バイト文字への対応がまだきちんとできていないっぽい。これはブラウザのせいなので仕方ありません。

で、ワープロソフトで出来るような「最終行も両端揃え」という処理も、スタイルシートのみで実現する方法は無さそうです。

…と、ここまでが「両端揃え」の話。

さて、『均等割り付け』です。

【均等割付】

例えば、

kintou_01.png

というのがあったとして、"阪神タイガース" という文字列の領域幅を "福岡ソフトバンクホークス" という文字列幅に合わせて「均等割付」して見栄えを良くすると…

kintou_02.png

こうなる。これが均等割付。

で、"均等割付したい領域" をページ全体、"均等割付したい文字列" を段落に含まれる文字全体、と考えると、その場合は「段落最終行も含めた両端揃え」=「均等割付」ということになりますね。

さて、この均等割付処理をウェブページでどう実現するか…という話になると、現状、スタイルシートのみで簡単に行う方法は無いのではないかと。自力で「文字数を数えて、文字間隔を letter-spacing で微調整して合わせる」という手間をかけるしかないのかな。

世の中は広いので、もしかしたら「自動で文字間隔を調整して均等割付してくれるJavaScript」みたいなものがあるかもしれません。探してみるのも良いかも。

というわけで、以上。かなり長くなってしまいました。

関連記事

<<前の記事 | HOME | 次の記事>>

コメント

現在、コメント機能は停止しています。