javascriptcsscss-hyphens

Is there any way to re-use CSS3 created word hyphenation?


I'm trying to split words into syllables on a website that helps kids learn to read. This turns out to be hard.

JavaScript Hyphenation libraries are large. Chrome browser can already auto-hyphenate using the hyphens: auto; CSS3 tag. I'd like to say to my line of text in the browser "Hi there! Please tell me all possible ways you would consider splitting these words, thanks!"

Which means I would need to somehow "read" the results of hyphenated words packed into very narrow divs. AFAIK you can't grab the text - hyphenation is only a display thing. Is there any way to figure out where the words were hyphenated?

https://jsfiddle.net/8v5xxuh1/


Solution

  • Short answer: no, there is no easy way to piggyback on the browser's hyphen generator.