ホームページの文章を見栄えよくする方法として、両端ぞろえという方法があります。
文章の右側が、改行位置でそろっていると、見栄えがよくなります。
ですが今回、次のようなことがありました。
英文を両端ぞろえにしたい。
日本語は一文字単位で余白調整されるのに対し、英文は単語単位で余白調整されます。
結果から言うと「text-align: justify;」指定だけでそれなりにそろいましたが、より正確なやり方があることがわかりました。
忘備録として記録します。
実際にやってみたものがこちら
通常のままでやると、途中で強制改行になります。
両端ぞろえを指定すると、単語と単語の間が広くなりました。
両端ぞろえのやり方
（１）今回のソース
今回のサンプルソースは以下の通りです。
<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>英文両端ぞろえ</title>
<style type="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>
<div class="box">
<p>This is a test sentence to make English sentences double-justified.</p>
</div>
<h3>両端ぞろえの場合</h3>
<div class="box justified">
<p>This is a test sentence to make English sentences double-justified.</p>
</div>
</body>
</html>（２）英文を両端ぞろえ指定にしている部分
.justified
{
text-align: justify;
text-justify : inter-world;
}基本はtext-align: justify;
日本語の場合もそうですが、justify指定をしないとそもそも両端ぞろえになりません。
では「text-justify : inter-world;」この記述は何でしょうか?
text-justify : inter-world;は単語間余白調整
「text-justify : inter-world;」指定は、単語間の余白を調整するというものです。
英文の場合は、複数文字で一つの単語となるため、単語単位で余白調整しないと非常に読みづらくなるためです。
text-align: justify;のオプション的な指定です。
ちなみに「text-justify : inter-world;」指定をしなくても、単語間の間がそれなりに広がりました。
もしかしたらブラウザごとに自動調整が働くのかもしれません。
半角英文の両端ぞろえは見た目で考える
半角英文の両端ぞろえは、場合によっては不自然な余白ができます。
その場合、単語の途中での改行を許可する方法もあります。
ですが、半角英文の場合は何もしないほうが見やすかったりもします。
デザイン性を重視するのであれば、両端ぞろえ＋単語途中改行をするのもありだと思います。