text-align: justify;」の使用は避けた方が良いですか?
質問
を使用しない理由はありますか?
text-align: justify;
?
可読性を下げたり、問題を起こしたりしませんか?
どのように解決するのですか?
まず、これは純粋にデザインに関連した問題と解決策です。グリッドのデザインは、正当化テキストが必要であるかどうかを指定します。私は、justify align だけではユーザビリティに大きな影響を与えないと思います。テキストを判読できなくするような悪いタイポグラフィがユーザビリティを低下させるのです。とはいえ、しっかりとしたコントラストと、バランスの良いスペーシングのタイポグラフィを心がけましょう。フォントサイズも重要です。
このサイト は、オンラインでテキストを正当化することに成功した試みです。CSSでは、InDesignほど文字や単語の間のスペースを制御できないため、テキストの正当化を行い、単語間のスペースが行間のスペースを上回ったときに発生する空白の「川」を行に流さないようにすることは、かなり難しくなっています。テキストの正当化を難しくするもの:長い単語、十分な単語を保持できない行の幅、テキストと背景色の間のコントラストが高すぎると、川がより広く、より明白に見えます。
タイポグラフィの理想は、目を凝らすと一様にベタ塗りになるような、均一なテキストブロックであることです。したがって、テキストを約 10px に保ち、白地に 60% のグレーで、20 語程度に収まる行がある場合、justify align は醜く見えることはないはずです。しかし、これはユーザビリティを向上させるものではないことに留意してください。小さくて比較的軽いテキストは、多くの人、特に年配の読者を困らせます。
注意すべきは
­
(ソフトハイフン) を使って superawesome のような長い面倒な単語を正しく区切ることで、適切なタイプセット (例: InDesign) を模倣することができます。これを行うのに役立つものがたくさんあります。テキストを隠したり、操作したり、表示したりするロジックは、クライアント側で行うことをお勧めします。
この
.
Edit : 以下、他の方の言及の通りです。 cssハイフン は、実現不可能であることを除けば、現在可能です(Chromeでは不可)。さらに css4 ではさらに多くの制御が可能で .
関連
-
[CSSチュートリアル]CSSで簡単!高周波な異形ボタンを実現する方法
-
[css3]css3は、3つの方法のサンプルコードのテキストの点滅効果を達成するために
-
[css3]グレーモードやブラックモードを実現するCSS3フィルター(フィルター)サンプルコード(Webページ用
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] チェックボックスとそのラベルをクロスブラウザーで一貫して揃える方法
-
[解決済み] コンテナの幅に応じたフォントの拡大縮小
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] CSS Flexboxで、"justify-items "と "justify-self "プロパティはなぜないのですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】シングルセレクトの折りたたみメニュー機能を実現するCSS
-
[CSSチュートリアル】Chromeのタブバーを実装するためのCSSのコツ
-
[CSSチュートリアル]cssの位置固定コードで左右2重の位置決め
-
[CSSチュートリアル】CSSの新機能には、ページの再描画や並び替えの問題をコントロールする機能が含まれています。
-
[css3]CSS3のダイヤモンドパズルは、divの背景画像を回転させない機能だけを実現するために
-
[CSSチュートリアル】cssフレックスレイアウト ロング自動改行サンプルコード
-
[css3] scss変数の値を実行時に変更するcss3 var()の使用方法を説明します。
-
[css3]スクロールバー美化効果を実現するcss3サンプルコード
-
フロントエンドの落とし穴 リソースはスタイルシートとして解釈されるが、MIMEタイプはtext/htmlで転送される。"<URL>". css スタイルの失敗
-
[解決済み] 長い単語でdivが壊れないようにするには?