英文を両端ぞろえにする

ホームページの文章を見栄えよくする方法として、両端ぞろえという方法があります。
文章の右側が、改行位置でそろっていると、見栄えがよくなります。

ですが今回、次のようなことがありました。
英文を両端ぞろえにしたい。

日本語は一文字単位で余白調整されるのに対し、英文は単語単位で余白調整されます。
結果から言うと「text-align: justify;」指定だけでそれなりにそろいましたが、より正確なやり方があることがわかりました。

備忘録として記録します。

実際にやってみたものがこちら

通常のままでやると、途中で強制改行になります。
両端ぞろえを指定すると、単語と単語の間が広くなりました。

両端ぞろえのやり方

（１）今回のソース

今回のサンプルソースは以下の通りです。

<!doctype html><html><head><metacharset="shift_jis"><title></title><styletype="text/css">h3
{
	text-align: center;
}


.box 
{
	padding: 20px;
	width: 300px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #CCC;
}

.justified
{
	text-align: justify;
	text-justify : inter-world;
}
</style></head><body><h3></h3><divclass="box"><p>This is a test sentence to make English sentences double-justified.</p></div><h3></h3><divclass="box justified"><p>This is a test sentence to make English sentences double-justified.</p></div></body></html>Code language:HTML, XML(xml)

（２）英文を両端ぞろえ指定にしている部分

.justified
{
	text-align: justify;
	text-justify : inter-world;
}Code language:CSS(css)

基本はtext-align: justify;

日本語の場合もそうですが、justify指定をしないとそもそも両端ぞろえになりません。
では「text-justify : inter-world;」この記述は何でしょうか?

text-justify : inter-world;は単語間余白調整

「text-justify : inter-world;」指定は、単語間の余白を調整するというものです。
英文の場合は、複数文字で一つの単語となるため、単語単位で余白調整しないと非常に読みづらくなるためです。

text-align: justify;のオプション的な指定です。
ちなみに「text-justify : inter-world;」指定をしなくても、単語間の間がそれなりに広がりました。
もしかしたらブラウザごとに自動調整が働くのかもしれません。

半角英文の両端ぞろえは見た目で考える

半角英文の両端ぞろえは、場合によっては不自然な余白ができます。
その場合、単語の途中での改行を許可する方法もあります。

ですが、半角英文の場合は何もしないほうが見やすかったりもします。
デザイン性を重視するのであれば、両端ぞろえ＋単語途中改行をするのもありだと思います。

今回のレポートは以上です。
読んでいただいてありがとうございました。

ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。
ホームページのご提案もさせていただいております

備忘録,CSSCSS,両端ぞろえ,英文

Posted by OBATA