CSS Text-Alignプロパティを使用してテキストを揃える
サイトの開発中に調整することを選択できるウェブサイトのタイポグラフィーのプロパティの1つは、サイトのテキストがどのように正当化されるかです。 デフォルトでは、ウェブサイトのテキストは左寄せされており、これはテキストが残っているサイトの数です。 他の唯一の選択肢は右揃えで、オンラインで読むことが本質的に不可能になるか、完全に正当化されたものとして知られているので、誰もウェブサイトで使用しません。
ジャスティフィケーション・テキストは、左右のいずれか一方（「左」と「右」の正当化が行うもの）とは対照的に、左辺と右辺の両方に整列するテキスト・ブロックです。 二重に正当化された効果は、各行が同じ長さであることを保証するために、各行のテキストの単語と文字スペースを調整することによって達成されます。 この効果を完全正当化といいます。 text-alignプロパティを使用して、CSSのテキストを正当化します。
正当化はどのように機能するのですか？
テキストブロックの右側に不均等なエッジがあることが多い理由は、テキストの各行の長さが同じでないためです。 いくつかの行はより多くの単語またはより長い単語を有し、他の行はより少ないまたはより短い単語を有する。 そのテキストブロックを正当化するには、すべての行を均等にして一貫性を持たせるために、余分なスペースをいくつかの行に追加する必要があります。
すべてのWebブラウザメーカーには、行内に余分なスペースを適用する独自のアルゴリズムがあります。 ブラウザは、単語の長さ、ハイフネーションなどの要素を調べて、スペースを配置する場所を決定します。
その結果、正当化されたテキストがブラウザ間で同一に見えない場合があります。 これは、サイトの訪問者があなたのサイトの行の長さがどのように見えるかを比較するために、あるブラウザから別のブラウザにジャンプすることはないため、問題ありません。 ただし、CSSを使用してテキストを正当化するには、主要なブラウザのサポートが有効であることは間違いありません。
テキストを正当化する方法
CSSでテキストを正当化するには、正当化するテキストセクションが必要です。
通常、複数の行にまたがるテキストコンテキストの大きなブロックには段落タグでマークアップされるので、これはテキストの段落に対して行われます。
正当化するテキストブロックがある場合は、スタイルをCSSのtext-alignスタイルプロパティで正当化するように設定するだけです。
text-align：正当化します。
このCSSルールを適切なセレクタに適用して、テキストブロックを意図したとおりにレンダリングする必要があります。
テキストを正当化するとき
多くの人々は、非常に一貫性のある、測定された外観を作成するために、設計の観点から正当化されたテキストの外観を気に入っていますが、ウェブページ上のテキストを完全に正当化するという欠点があります。
まず、正当化されたテキストは読みにくい場合があります。 これは、テキストを正当化すると、行のいくつかの単語の間に余分なスペースが追加されることがあるためです。 これらの矛盾するギャップは、テキストを読みにくくする可能性があります。 これは、Webページでは特に重要です。これは、ライティング、解像度、または他のハードウェアの品質のために既に読みにくい場合があります。 テキストに珍しいスペースを追加すると、悪い状況がさらに悪化する可能性があります。
読みやすさの問題に加えて、空白は、テキストの中央に空白の「川」を作成するために、互いに整列することがあります。
白いスペースのそれらの大きなギャップは本当に厄介な表示のために作ることができます。 さらに、極端に短い行では、1つの単語を含む行に文字の間に余分なスペースを入れてしまうことがあります。
だから、いつテキストの正当化を使うべきですか？ テキストを正当化するのに最適な時期は、行が長く、フォントサイズが小さい場合です（画面サイズに基づいて行の長さが変化する反応性の高いWebサイトでは保証することが難しい）。 行の長さやテキストのサイズには固くて速い数字はありませんので、あなたは最善の判断を下す必要があります。
テキストを整列するためのテキスト整列スタイルを適用した後、テキストに空白がないことを確認し、さまざまなサイズでテストしてください。
これを行う最も簡単な方法は、目を細くして見ることです。 川は、そうでなければ灰色のテキストブロックに白の斑点として目立っています。 川が見える場合は、見苦しい川を取り除くために、テキストブロックのテキストサイズや幅を変更する必要があります。
この記事で見られるように、左揃えのテキストと比較した後にのみ、正当性チェックを使用してください。 あなたは完全な正当化の一貫性のようにしますが、標準の左揃えテキストは通常より読みやすくなります。 最終的には、テキストを正当化する必要があります。これは、設計目的でテキストを正当化することを選択し、サイトが読みやすい状態であることを確認したためです。