hyphenate-limit-chars

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

hyphenate-limit-chars は CSS のプロパティで、単語のハイフネーションを許可する単語の最小の長さ、およびハイフンの前後の最小文字数を指定します。

このプロパティを使用すると、テキストのハイフネーションを細かく制御することができます。この制御機能により、不自然なハイフネーションを回避し、言語ごとに適切なハイフネーションを設定することが可能になり、結果としてより優れた字組みが実現します。

構文

css
/* 数値 */
hyphenate-limit-chars: 10 4 4;
hyphenate-limit-chars: 10 4;
hyphenate-limit-chars: 10;

/* キーワード値 */
hyphenate-limit-chars: auto auto auto;
hyphenate-limit-chars: auto auto;
hyphenate-limit-chars: auto;

/* 数値とキーワード値の混合 */
hyphenate-limit-chars: 10 auto 4;
hyphenate-limit-chars: 10 auto;
hyphenate-limit-chars: auto 3;

/* グローバル値 */
hyphenate-limit-chars: inherit;
hyphenate-limit-chars: initial;
hyphenate-limit-chars: revert;
hyphenate-limit-chars: revert-layer;
hyphenate-limit-chars: unset;

hyphenate-limit-chars プロパティは、下記で説明するように、数値または auto である可能性がある 1～3 個の値を取ります。

値

<number> <number> <number>

最初の値は、単語をハイフンで分割する前の単語の最小文字数です。 2 つ目の値は、ハイフン前の最小文字数です。 3 つ目の値は、ハイフン後の最小文字数です。

<number> <number>

最初の値は、単語をハイフンで分割する前の単語の最小文字数です。 2 つ目の値は、ハイフンの前の最小文字数です。ハイフンの後の最小文字数は、 2 つ目の値と同じ数値に設定します。

<number>

値は、単語をハイフンでつなぐ前に単語の最小文字数です。ハイフンの前後の文字数の最小値は auto に設定します。

いずれかの値に auto を設定すると、ユーザーエージェントが現在のレイアウトに適切な値を選択します。ユーザーエージェントがより良い値を計算できない場合は、次の既定値が使用されます。

  • ハイフネーションを許可する最小文字数: 5
  • ハイフンの前の最小文字数: 2
  • ハイフンの後の最小文字数: 2

指定された制約を満たすには単語が短すぎる場合、ハイフネーションは行われないことに注意してください。例えば、値が hyphenate-limit-chars: auto 3 4 の場合、 7 文字未満の単語はハイフネーションされません。ハイフンの前には 3 文字、後ろには 4 文字を持つことは不可能だからです。

公式定義

初期値auto
適用対象すべての要素
継承あり
計算値指定通り
アニメーションの種類計算値の型による

形式文法

hyphenate-limit-chars = 
  [ auto | <integer> ]{1,3}

例

ハイフネーションの限界値を設定

例えば、同じテキストを含む 4 つのボックスがあるとします。比較のため、最初のボックスにはブラウザーで適用される既定のハイフネーションが表示されています。次の 3 つのボックスでは、異なる hyphenate-limit-chars 値を使用してブラウザーの既定の動作が制約された結果を示しています。

HTML

html
<div class="container">
  <p id="ex1">juxtaposition and acknowledgement</p>
  <p id="ex2">juxtaposition and acknowledgement</p>
  <p id="ex3">juxtaposition and acknowledgement</p>
  <p id="ex4">juxtaposition and acknowledgement</p>
</div>

CSS

css
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

p {
  margin: 1rem;
  width: 120px;
  border: 2px dashed #999;
  font-size: 1.5rem;
  hyphens: auto;
}

#ex2 {
  hyphenate-limit-chars: 14;
}

#ex3 {
  hyphenate-limit-chars: 5 9 2;
}

#ex4 {
  hyphenate-limit-chars: 5 2 7;
}

結果

最初のボックスでは、 hyphenate-limit-chars を設定しないことで、ブラウザーの既定のアルゴリズムを適用できるようにしています。 既定では、ブラウザーはより良い値を探し出さない限り、 5 2 2 という値を使用します。

2 つ目のボックスでは、hyphenate-limit-chars: 14 を設定することで、単語が少なくとも 14 文字の長さになるまで、ブラウザーによる単語のハイフネーションを防止します。その結果、 "juxtaposition" は 13 文字しかないため、 2 つ目のボックスではハイフネーションされません。

3 つ目のボックスでは、ハイフンの前に少なくとも 9 文字が含まれるようにブラウザーを制約します。 hyphenate-limit-chars: 5 9 2 を設定します。 これにより、最初のボックスに表示されているように、 "acknowledgement" が "acknowledge-ment" ではなく、 "acknowl-edgement" とハイフンで結合されるようになります。

ハイフンの前に正確に 9 文字が入るとは限らないことに注意してください。 hyphenate-limit-chars で指定された制約が満たされている限り、ブラウザーは最適だと考える場所で単語を分割することがあります。 例えば、この場合、ブラウザーは "acknowled-gement" よりも読みにくい "acknowledge-ment" を選択します。

4 番目のボックスでは、ハイフンの後に少なくとも 7 文字が含まれるようにブラウザーを設定するには、 hyphenate-limit-chars: 5 2 7 と設定します。これにより、 "juxtaposition" が既定では "juxtaposi-tion" とハイフネーションされるのに対し、 "juxta-position" とハイフネーションされるという効果が得られます。

仕様書

Specification
CSS Text Module Level 4
# propdef-hyphenate-limit-chars

ブラウザーの互換性

BCD tables only load in the browser

関連情報