Soft Hyphen

The soft hyphen is a Unicode character at code point U+00AD (also known as ­ in HTML) that serves as a hyphenation hint -- it marks a potential break point where a word may be split across lines if needed, but only when the word actually needs to be broken. When no line break is required, the soft hyphen is completely invisible.

How Soft Hyphen Works

When a browser (or other layout engine) encounters a soft hyphen inside a word, it treats that position as a candidate for hyphenation. If the word fits on the current line without breaking, the soft hyphen is invisible and ignored. If line breaking is needed and the break happens at a soft hyphen position, a visible hyphen character appears at the end of the broken line.

<!-- The browser will hyphenate "anti-dis-establishment-arian-ism"
     only when necessary, and only at marked positions -->
<p>The word anti&shy;dis&shy;establish&shy;ment&shy;arian&shy;ism
   can be hyphenated at marked syllable boundaries.</p>

HTML Entity

<!-- Named entity -->
&shy;

<!-- Hex entity -->
&#x00AD;

<!-- Decimal entity -->
&#173;

Soft Hyphen vs CSS hyphens

The CSS hyphens property offers a language-aware automatic alternative that does not require manual markup:

/* Automatic hyphenation -- browser uses built-in dictionary */
p {
  hyphens: auto;
  -webkit-hyphens: auto;
  /* lang attribute required for hyphens: auto to work */
}

/* Manual -- only break at ­ positions */
p {
  hyphens: manual;
}

/* None -- disable all hyphenation */
p {
  hyphens: none;
}

Note that hyphens: auto requires the lang attribute to be set correctly on the element or an ancestor, and dictionary coverage varies by browser and language.

When to Use Soft Hyphens

Soft hyphens are most useful when:

1. Automatic hyphenation is unavailable -- hyphens: auto has limited support for specialized vocabularies (medical, legal, technical)
2. Specific syllable control is needed -- dictionaries may hyphenate differently from house style
3. Long compound words -- German compound words benefit greatly from soft-hyphen annotation
4. URLs and code in prose -- though ZWSP (U+200B) is often preferred for this

Programmatic Insertion

// Simple example: insert soft hyphen after every 8 characters
// (not linguistically correct -- use a real hyphenation library)
function insertSoftHyphens(word, interval = 8) {
  return word.split('').reduce((acc, char, i) => {
    return acc + char + (i > 0 && i % interval === 0 ? '\u00AD' : '');
  }, '');
}

// For production use, consider libraries like:
// - Hyphenopoly (full Knuth-Liang algorithm)
// - hypher (lightweight, pattern-based)

Rendering Quirks

Soft hyphen rendering has historically been inconsistent:

• Some older browsers rendered soft hyphens as visible characters unconditionally
• Copying text that contains soft hyphens may or may not include them in the clipboard, depending on the browser
• When copying a hyphenated word (broken across lines due to a soft hyphen), some browsers include the visible hyphen in the copied text, others do not
• Search engines generally ignore soft hyphens when indexing

// Strip soft hyphens for text processing
function removeSoftHyphens(str) {
  return str.replace(/\u00AD/g, '');
}

Soft hyphens remain the most semantically correct way to provide hyphenation hints in HTML when precise control over break points is needed.