Search code examples
cssmodernizrhyphenationbrowser-feature-detection

How to detect automatic hyphenation support?


I would like to use hyphenation polyfill (e. g. hypher.js or hyphenator.js) only when CSS hyphenation not available, i. e.:

if (!Modernizr.hyphenation) {
  $('p').hyphenate('en-us')
}

But there is no such detection available in Modernizr. Testing for hyphens: auto support is not reliable: both Chrome and Mobile Safari support it (with prefix), but only the latter does hyphenation.

Is it an undetectable feature?


Solution

  • The current version of Hyphenator.js is said to internally check for support to CSS hyphenation. It seems to run a hyphenation test using CSS and test for the result (basically, just whether a string was hyphenated or not). This looks somewhat contrived, but it is surely a better attempt than just testing whether a browser recognizes a property. Browsers that support CSS hyphenation do that for some languages only, and what matters is whether the language of your content is supported.