英文を両端ぞろえにする
ホームページの文章を見栄えよくする方法として、両端ぞろえという方法があります。
文章の右側が、改行位置でそろっていると、見栄えがよくなります。
ですが今回、次のようなことがありました。
英文を両端ぞろえにしたい。
日本語は一文字単位で余白調整されるのに対し、英文は単語単位で余白調整されます。
結果から言うと「text-align: justify;」指定だけでそれなりにそろいましたが、より正確なやり方があることがわかりました。
忘備録として記録します。
実際にやってみたものがこちら
通常のままでやると、途中で強制改行になります。
両端ぞろえを指定すると、単語と単語の間が広くなりました。
両端ぞろえのやり方
（１）今回のソース
今回のサンプルソースは以下の通りです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!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:1pxsolid#CCC; } .justified { text-align:justify; text-justify:inter-world; } </style> </head> <body> <h3>通常の場合</h3> <div class="box"> <p>Thisisatest sentence tomake English sentences double-justified.</p> </div> <h3>両端ぞろえの場合</h3> <div class="box justified"> <p>Thisisatest sentence tomake English sentences double-justified.</p> </div> </body> </html> |
（２）英文を両端ぞろえ指定にしている部分
1 2 3 4 5 | .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;」指定をしなくても、単語間の間がそれなりに広がりました。
もしかしたらブラウザごとに自動調整が働くのかもしれません。
半角英文の両端ぞろえは見た目で考える
半角英文の両端ぞろえは、場合によっては不自然な余白ができます。
その場合、単語の途中での改行を許可する方法もあります。
ですが、半角英文の場合は何もしないほうが見やすかったりもします。
デザイン性を重視するのであれば、両端ぞろえ＋単語途中改行をするのもありだと思います。
ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。
関連記事
