CSS 秘密の花園: Hyphenation_html/css_WEB-ITnose

『CSS Secrets』は @Lea Verou による最新の本で、CSS に関する小さな秘密がいくつか説明されています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

デザイナーはテキストの配置が大好きです。テキストの配置は、素晴らしい雑誌や本のデザインのいたるところで見られます。ただし、Web では、熟練したデザイナーであっても位置合わせが使用されることはほとんどありません。これは CSS1 から text-align: justify があったからでしょうか？

上の図に示すように、理由は非常に明白です。 ！文字の間隔を揃えるために調整することでできる「空白」に注目してください。これはテキストの見栄えを悪くするだけでなく、読みやすさにも影響します。タイポグラフィでは、位置合わせは常にハイフンと密接に関係しています。ハイフンを使用すると単語を音節に分割できるため、調整に必要な空白がほとんどなくなり、テキストがより自然に見えます。

最近まで、テキストをハイフネーションする方法が Web 上に登場していましたが、それらは常に問題そのものよりも悪い解決策でした。一般的な方法には、サーバー側、JavaScript、オンライン ジェネレーターでコードを記述することや、どの単語を分割する必要があるかをブラウザーが認識できるように、テキストに手動でハイフン ( ­ ) を追加するという多大な忍耐を費やすこともあります。多くの場合、このオーバーヘッドは価値がないため、デザイナーは代わりにテキストを配置する別の方法を見つけることにします。

解決策

CSS3 では、新しいプロパティ hyphens が追加されます。 3 つの値 ( none 、マニュアル、および自動) を受け入れます。その初期値は、既存の動作と一致するように、マニュアルです。ソフトハイフンを使用して手動でハイフネーションを行うことができます。明らかに、ハイフン: なしはこの動作を無効にします。しかし、最初の 2 つはさておき、本当の魔法は次の非常に単純な CSS 行で実現されます:

hyphens: auto;

必要なのはこれだけです。下の画像で効果を確認できます。もちろん、これを機能させるには、HTML の lang 属性を介して言語を宣言する必要がありますが、これは HTML を記述するたびに宣言する必要があります。

ハイフンの効果を適用します: 自動

ハイフネーションをより細かく制御したい場合 (短い紹介テキストなど)、ソフト コネクタ ( ­ ) ブラウザがそれを理解できるようにします。ハイフン属性は最初にそれらを表示し、次に分割する必要があるその他のものを探します。

TRIVIA ワード ラップの仕組み

コンピューター サイエンスの多くのことと同様、ワード ラップは非常にシンプルで簡単に思えますが、実際はそうではありません。これを実現するためのアルゴリズムは数多くありますが、最も一般的なものは、貪欲アルゴリズムと knuth-Pass アルゴリズムです。貪欲なアルゴリズムは、一度に 1 行を分析し、最初の不適合な単語/音節が見つかるまで、その行にできるだけ多くの単語 (またはハイフネーションを使用している場合は音節) を埋め込み、その時点で次の行に移動します。

開発したエンジニアの名前にちなんで名付けられた knuth-Plass アルゴリズムは、はるかに複雑です。テキスト全体を考慮して機能するため、より美しい効果が得られますが、計算プロセスも非常に遅くなります。

ほとんどのデスクトップ テキスト処理アプリケーションは、knuth-Plas アルゴリズムを使用します。ただし、現在ブラウザでは Greedy が使用されており、パフォーマンス上の理由から、位置合わせの結果はそれほど美しくありません。

CSS のハイフネーションの劣化は非常にエレガントです。ハイフン属性がサポートされていない場合は、以下のようなテキスト配置効果が得られます。読んでいてきれいで楽しいものではありませんが、テキストが見えるのはかなりクールです。

FUTURE はハイフネーションを制御します

デザインのバックグラウンドを持つ人であれば、他に設定がないため、ハイフネーションのアイデアが気に入らないかもしれません。言葉の区切り方をコントロールします。

しかし、将来的には、CSS4 で次のようないくつかの関連プロパティが計画されており、ハイフネーションをよりきめ細かく制御できるようになるということを聞いてうれしいかもしれません:

• hyphenate-limit -lines
• hyphenate-limit-chars
• hyphenate-limit-zone
• hyphenate-limit-last
• ハイフネーション文字