css - 「text-align: justify;」の使用を避けるべきですか?

Question

の使用を避ける理由はありますtext-align: justify;か?

可読性が低下したり、問題が発生したりしますか?

score 61 · Accepted Answer

まず、これは純粋に設計関連の問題と解決策です。テキストの両端揃えが必要かどうかは、グリッドのデザインによって決まります。justify align だけではユーザビリティに大きな影響はないと思います。テキストを読みにくくする不適切なタイポグラフィは、ユーザビリティを低下させます。とはいえ、文字のコントラストがしっかりしていて、間隔のバランスが取れていることを確認してください。フォントサイズも重要です。

このサイトは、テキストをオンラインで正当化する試みとして成功しています。CSS では InDesign とほぼ同じように文字と単語の間のスペースを制御できないため、テキストを正当化し、空白の「川」が行に流れないようにすることははるかに困難です。行間のスペースを超えています。テキストの正当化を困難にするもの: 長い単語、十分な単語を保持できない行幅、テキストと背景色のコントラストが強すぎる。それらは川をより広く、よりはっきりと見せます。

タイポグラフィの理想は、テキストブロックを均一にすることです。目を細めると、テキストブロックは均一なソリッドシェードになります。したがって、テキストを約 10 ピクセル、白の背景に 60% のグレーに保ち、約 20 語に収まる行がある場合、整列配置は見苦しくありません。ただし、これによってユーザビリティが向上するわけではないことに注意してください。小さくて比較的軽いテキストは、多くの人、特に年配の読者を悩ませます。

(ソフトハイフネーション) superawesome のような長い厄介な単語を正しく区切ることで、適切なタイプセット (InDesign など) を模倣できることに注意してください。これを行うのに役立つものがたくさんあります。テキストを非表示、操作、および表示するためのロジックは、おそらくthisを使用してクライアント側で行うことをお勧めします。

編集：他の人が以下に言及しているように、CSSハイフンは現在可能ですが、実行不可能です（Chromeではありません）。さらに、css4 はより多くの制御を提供します。

score 24 · Accepted Answer

text-align: justify は、現時点ではブラウザーで使用しないでください。それらは内部の詳細を処理するのが苦手で、出力には多くの川が含まれてしまい、ハイフネーション(ソフトハイフン以外) はサポートされていません。

上記のメモは 4.5 年前に書かれたものです。物事はゆっくりと変化しています... http://caniuse.com/#feat=css-hyphens

編集： ハイフネーターは、この回答のコメントで注目されました。text-align justify を使用する価値があるようです。それを使用しているサイトをチェックしてください。このスクリプトを使用する前に、javascript を使用して text-align justify を適用し、javascript を使用していないユーザーが巻き込まれないようにすることをお勧めします。

編集 2: CSS は、プロパティ [ browser support ]でハイフネーションを許可するようになりました。PPK はスタイルシートに追加するように言っていますが、Eric Meyer はモバイル用に追加するだけだと言っています。hyphens

編集 3: SASS を使用した、現在利用可能なものの概要。

score 12 · Accepted Answer

正当化の配置に関して他の人が提起した問題は、狭い列でより一般的です。フォントのサイズやその他のパラメータに対して列の幅が十分にある場合は、テキストを両端揃えしても問題ありません。平均して 1 行あたり最低 12 ～ 15 語が必要だとしましょう。より良いです。

score 5 · Accepted Answer

テキストを正当化しないという説得力のある理由は考えられません。ある時点で、コンテンツの量と幅は、テキストを正当化することをほぼ要求します。もちろん、特定の単語の組み合わせで構成されるコンテンツでは問題が発生しますが、川や単語間のスペースが異常に大きい場合は、まったく別の問題が発生します。読みやすさと明瞭さの1つです。

私が絶対に避けたいのは、本文の中央に配置することです。それ以上にアマチュアなウェブデザインの危険信号はないと思います。

score 5 · Accepted Answer

そうしない技術的な理由はありません。これは純粋に設計上の決定です。正当化されたテキストは読みにくいと感じる人が多いですが、状況にもよると思います。印刷物には問題なく動作しますが、一般的に Web ブラウザーは最終的なテキスト出力を十分に制御して、提供しているものが一部のユーザーの画面ではがらくたのように見えないことを保証しません。

あなたの最善の選択肢は、正当化を避けることです。

score 1 · Accepted Answer

Web デザインに関する質問と同様に、状況によって異なります。示唆されているように、両端揃えされたテキストは通常、狭い列では見栄えがよくありません。サイドバーは通常狭いため、サイドバーの一般的なルールとしては使用しないことをお勧めします。

多くの場合、推奨される 1 行あたり 10 語 (またはそれ以上の量) のボディコピーを使用すると、正当化されたテキストを使用することができ、非常に長いテキストを大量に使用しない限り、ほとんどの場合、適度に見栄えがよくなります。単語および/または文字列。

以前、このサイトを StackOverflow で宣伝したことがあると思いますが、Jon Tanはボディコピー (記事内) で正当化されたテキストを使用しており、99.99% の確率で見栄えがします。

score 1 · Accepted Answer

一般的に読みやすいので、左寄せ (text-align: left) を好みます。等間隔の単語も読みやすいと聞きます。justify を使用する文体上の理由がない限り、左、右、または中央に保ちます。特に本文の場合は、左を使用してください。(実際には、反対方向のテキスト (ヘブライ語など) には「forward」のようなものが必要です...)

score 1 · Accepted Answer

ハイフンなしでジャスティフィケーションを使用しないでください。以下は、PHP ベースのハイフネーションライブラリであり、このライブラリを WordPress プラグインに移植したものです: wp-Typography。

score 0 · Accepted Answer

（少なくとも）バージョン8までのInternetExplorerはtext-align: justify正しくレンダリングされないことに注意してください。代わりに、として解釈されtext-align: centerます。

詳細は次のとおりです。text-align：justify

IEが物事を中心に置き続けた理由を見つけるために私にいくつかの頭痛の種を引き起こしました。多分それは他の誰かの時間を節約します。

score 0 · Accepted Answer

えっと…いや…！

[真剣に] WordPress は justify を使用しており、読みやすさが低下するかどうかに関しては、かなり強力なステートメントだと思います...

score 0 · Accepted Answer

印刷物ではまったく問題ないと思いますが、ほとんどの Web ブラウザーでは、間隔とハイフネーションの細かい制御ができないため、扱いにくいものです。ページ/コラム (少なくとも雑誌の場合) を微調整できるため、タイポグラファーは、場合によっては、文字間隔やフォントの縮小をわずかに変更することさえできます。

score 0 · Accepted Answer

text-justify:newspaper を使用することもできます。text-justify css タグは、正当化するときにテキストを折り返す方法を制御するのに役立ちます

css - 「text-align: justify;」の使用を避けるべきですか?

13 に答える 13

Related

Reference