CSS hyphenate-limit-chars Enhance Typography with Precise Hyphenation

Syntax

The hyphenate-limit-chars property in CSS allows you to control text hyphenation with specific values. Here’s a simple breakdown:

/* Numeric values */
hyphenate-limit-chars: 10 4 4;
hyphenate-limit-chars: 10 4;
hyphenate-limit-chars: 10;

/* Keyword values */
hyphenate-limit-chars: auto auto auto;
hyphenate-limit-chars: auto auto;
hyphenate-limit-chars: auto;

/* Mix of numeric and keyword values */
hyphenate-limit-chars: 10 auto 4;
hyphenate-limit-chars: 10 auto;
hyphenate-limit-chars: auto 3;

/* Global values */
hyphenate-limit-chars: inherit;
hyphenate-limit-chars: initial;
hyphenate-limit-chars: revert;
hyphenate-limit-chars: revert-layer;
hyphenate-limit-chars: unset;

Explanation

• Numeric Values:

  • 10 4 4: Minimum word length is 10, 4 characters before and after the hyphen.
  • 10 4: Minimum word length is 10, 4 characters before the hyphen, and same after.
  • 10: Minimum word length is 10, others are auto.

• Keyword Values:

  • auto: User agent chooses appropriate values. Defaults to 5 characters for word length, 2 before and after.

• Mixed Values:

  • You can mix numeric and auto values for partial control.

• Global Values:

  • inherit: Inherits value from parent.
  • initial: Sets to default value.
  • revert: Reverts to user agent’s default.
  • revert-layer: Reverts to parent layer’s value.
  • unset: Resets to natural value.

Values

• <number> <number> <number>: Specifies word length, characters before, and after the hyphen.
• <number> <number>: Specifies word length and characters before the hyphen (same after).
• <number>: Specifies word length, others are auto.
• auto: User agent chooses values.
• Mix: Combine numeric and auto.
• Global Values: inherit, initial, revert, revert-layer, unset.

Formal Syntax

The formal syntax for hyphenate-limit-chars is:

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

Example

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

.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;
}

This will demonstrate different hyphenation rules applied to the text.

Browser Compatibility

The hyphenate-limit-chars property is supported by some browsers but not all. Here’s a quick overview:

Supported Browsers

• Google Chrome: Supports from version 13.
• Microsoft Edge: Supports from version 79.
• Opera: Supports from version 44.0.

Not Supported

• Mozilla Firefox: No support.
• Safari: No support.

For the latest compatibility info, check the MDN Web Docs Browser Compatibility Data.

Alternatives and Fallbacks

If you need to support browsers that don’t support hyphenate-limit-chars, consider these alternatives:

• CSS hyphens Property: Basic hyphenation control.
• JavaScript Libraries: Libraries can handle text hyphenation.
• Manual Hyphenation: Manually insert hyphens using the soft hyphen character (­).

Best Practices

1. Test Across Browsers: Ensure consistent text presentation.
2. Use Feature Queries: Apply hyphenate-limit-chars only in supporting browsers.
3. Provide Fallbacks: Maintain a consistent user experience.

See Also

For more info, check out:

• hyphens Property: Learn more about the basic hyphens property.
• CSS Text Module: Dive deeper into CSS text formatting.

By understanding and using hyphenate-limit-chars, you can create more polished and readable websites. Happy coding!