CSS hyphenate-character Property Explained

The CSS hyphenate-character property allows developers to define the specific character or string displayed at the end of a line when a word breaks due to hyphenation. By default, browsers use a standard hyphen, but this property provides fine-grained typographic control to customize that character for stylistic, branding, or linguistic purposes. This guide covers how hyphenate-character works, its syntax, requirements for implementation, and practical examples.

How hyphenate-character Works

When text wraps in a container with hyphenation enabled, the browser determines where long words should break. Traditionally, the browser appends a hyphen-minus (-) or a typographic hyphen (‐) to the fragment at the end of the line. The hyphenate-character property overrides this default glyph, enabling you to use any character, symbol, or string in its place.

Prerequisites for Using hyphenate-character

The hyphenate-character property only takes effect when hyphenation actually occurs. For hyphenation to trigger automatically, two conditions must be met:

1. A defined language: The HTML document or element must have a valid lang attribute (e.g., <html lang="en">) so the browser knows which hyphenation dictionary rules to apply.
2. Hyphens enabled: The hyphens property must be set to auto on the target element.

p {
  hyphens: auto;
  hyphenate-character: "=";
}

Syntax and Values

The hyphenate-character property accepts two main types of values:

• auto: The default value. The browser chooses an appropriate hyphenation character based on the content's language and typography settings.
• <string>: A custom string containing one or more characters. While it is typically a single character, multi-character strings are valid.

Common Examples

1. Custom Standard Characters

You can use standard keyboard symbols such as an equals sign, tilde, or slash:

.custom-break {
  hyphens: auto;
  hyphenate-character: "~";
}

2. Unicode and Typographic Characters

You can specify exact Unicode values using CSS escape sequences or direct characters:

/* Double oblique hyphen commonly used in historical or localized typography */
.historic-text {
  hyphens: auto;
  hyphenate-character: "\2E17";
}

/* Middle dot */
.dot-break {
  hyphens: auto;
  hyphenate-character: "\00B7";
}

Best Practices and Considerations

• Readability: Unusual hyphenation characters can confuse readers or disrupt reading flow. Reserve unconventional characters for decorative headings, experimental layouts, or specific historical text representations.
• Line Space Calculation: The browser includes the width of the chosen hyphenation character when calculating whether a broken word fragment fits on the line. Longer custom strings can cause words to break earlier.
• Fallback Behavior: If a browser does not support hyphenate-character, it will simply ignore the property and use the default hyphen, ensuring text remains readable across all environments.