日本語の均等割付 text-align: justify;

2005年11月26日(土) 17時38分 by level
B ?
Tags: Firefox

Firefox1.5リリース後に期待していること - WebStudio

日本語のサイトでもtext-align: justify;を使うサイトが増えて欲しい。自分で修正しておいてなんだが、この修正が一番のお気に入り。

ということなので、早速えむもじらにも導入して試してみました。(中野さんの策にはまったという感じがしなくもないですが、、、)

以下のスクリーンショットはこちらのページの冒頭部分を示すものですが、Firefox 1.5 の均等割付はなかなか良く出来ています。

Opera 8 はアルファベットには対応しているものの、日本語には効かないようです。それどころか、折り返し位置がおかしくなっています。禁則処理が悪さしているような気もします。

IE 6 は完璧に対応しています。ただし、text-align-スタイルシートリファレンスによると、IE の場合、text-justify : inter-ideograph; などと指定しないと justify が有効にならないようです。

Firefox 1.5 RC3 均等割付なしスクリーンショット
Firefox: 均等割付なし
Firefox 1.5 RC3 均等割付ありスクリーンショット
Firefox: 均等割付あり
Opera 8.5 均等割付ありスクリーンショット
Opera 8.5: 均等割付あり
IE6 均等割付ありスクリーンショット(要 text-justify)
IE 6: 均等割付あり

ところで、細かい話ですが、Opera の最初の行のリンクのアンダーラインが右にはみ出しているのが気になりますね。マウスオーバーするとこのはみ出しはなくなります。

IE 6: マウスオーバー
一方、IE ですが、最初のリンク部分にマウスオーバーすると justify の効果がなくなってしまいます。CSS で何とかできるのかもしれませんが、Firefox と Opera ではそのようなことはないので、とりえあず放置しておきます。

11/27更新

せっかくなので text-align:justify; の効果を確認するためのサンプルページを作ってみました。

コメント (8)

1 11/26 19:50 Gashu
(c1) [2005/11/26 19:50:59] by Gashu

ども。サンプルページのリンク先は、直前の Tb のグルーピングの記事ですね。
# 一瞬、見誤った...。


日本語を含むマルチバイト言語では、アルファベット以上に閲覧性 / 視認性がスタイル指定によって分かれるところです。

p {
text-align: justify
}

といった指定がひとつのテクニックとしてより広く使われると良いですね。 line-height と併せるなりして。

2 11/26 21:29 ありみかさとみ
(c2) [2005/11/26 21:29:09] by ありみかさとみ

IE がいちばん美しいですね。

3 11/26 22:32 中野雅之
(c3) [2005/11/26 22:32:24] by 中野雅之

> IE がいちばん美しいですね。

そうでもないですよ。IEは句読点やいわゆる全角記号をjustifiable文字として認識しないので、Firefox/Operaの2行目のような状態になったときにかなり変なレイアウトになります。

最も、Firefoxにもまだ問題は残っていて、justifiable文字の右側にextra spaceを追加するようになっているので、半角英数の直後にjustifiable文字が来るとextra spaceが入らないのでこれはこれでおかしいですが。( http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=4362 )

この辺の完成度はGecko 1.9で高めたいですけど、まあ実用上はGecko 1.8で問題無いと思います。ちなみに、いまだに letter-spacing/word-spacing/text-align:justify; はCSS3での仕様が不明確(流動的)でもめているために作業が進んでません。

4 11/26 22:41 level@管理人
(c4) [2005/11/26 22:41:32] by level@管理人

> # 一瞬、見誤った...。
書きながら紛らわしいかなとは思っていたのでしたが、、、
ということで、表現改めました。

> IE がいちばん美しいですね。
えむもじらをサンプルにしている関係上、機能不足なIEで同じ程度の
表示幅になるようにIEだけフォントサイズを小さくしているから
そうみえるだけでは?

厳密に比較するには、ピクセル単位でそろえたサンプルを用意しないと
いけないですね。

ところで、text-align: justify; は body,http に設定し、サイドメニューだけ
解除しているのですが、どこかまずい箇所ありますでしょうか?
最初 p に設定して、li や dd にも追加するのが面倒なのでそうしてみました。

5 11/26 23:11 くでん
(c5) [2005/11/26 23:11:45] by くでん

現実問題として、画像のような表示になるのでtext-align: justifyを使うと醜く(見にくいではないです)なるので使用するリスクは高いと思います。実際にtext-align: justifyをpに指定されているAnother 朝顔日記さんなどを見ていると特にそう思います。
http://maguroban.s41.xrea.com/image/05112601.png

6 11/27 00:12 level@管理人
(c6) [2005/11/27 00:12:19] by level@管理人

とりあえずコメント欄はURLが直書きされるケースが多いので左寄せにしました。
ソフトハイフンに対応してくれると、あとは長い単語にソフトハイフンを自動挿入なんて技も使えるかもしれないのですが。
Bug 9101 - Break lines at soft hyphens (­) and display hyphens if line broken
https://bugzilla.mozilla.org/show_bug.cgi?id=9101

7 11/27 07:58 中野雅之
(c7) [2005/11/27 07:58:26] by 中野雅之

> 現実問題として、画像のような表示になるのでtext-align: justifyを使うと醜く(見にくいではないです)なるので使用するリスクは高いと思います。

これは雑誌なんかでもたまにみかけますよね。こればっかりはどうしようもないです。これも原因は'/'という区切り文字で折り返さないという問題が根にありまが、結局長い英単語(あまりないですが)とは相性が良くないです。

> ソフトハイフンに対応してくれると、あとは長い単語にソフトハイフンを自動挿入なんて技も使えるかもしれないのですが。

ソフトハイフンは自分で挿入しないと駄目なので現実的な解にはならないと思います。むしろ、ASCIIの記号でも折り返しが発生するように修正中のbug-org 255990の方に期待大です。
https://bugzilla.mozilla.org/show_bug.cgi?id=255990

8 2/12 08:38 mich
(c8) [2006/02/12 08:38:31] by mich

ジャスティファイを設定する場合はなるべく調整の破綻(文字間が異常に開くなど)が起きにくくするのが望ましいのですが,そういう観点からすると,小書きの仮名(「ぁぃぅぇぉっゃゅょゎ」など;片仮名も)や音引き(ー)などは行頭禁則文字にしないでほしいです。
IEは行頭禁則文字にしてないですね。
印刷物の場合は,調整が破綻した行はオペレーターが手を入れたり,編集者が文字を加減しますが(最近はそういう丁寧な仕事をする人が少ないけど),ウェブはそうはいきません(釈迦に説法ですね)。
その印刷の世界でも,最近は小書きの仮名や音引き,繰返し記号は行頭禁則にしない傾向にあります。

トラックバック

トラックバックは検索対象外です。

この記事にリンクしているページ < >

  1. データがありません。