Hacker News Reader

Comment by SavantIdiot | Hacker News Reader

"HTML and CSS 2 do not have any provision for automatic hyphenation and current Web browsers support, even for manual hyphenation, is poor.

So don’t justify text on the web."

I've been waiting for this to be fixed since 1997. I suspect it is a very difficult problem to get right. My Kindle accidentally hyphenates things like "Walde-r" and "Lannister-s" (yes, I'm reading GoT again).

View on HN

There is the `hyphens` CSS property [1]. Apparently, all big browsers implement it at least for english. It's a pity though, that this is not possible for other languages (at least for Chrome). It should be as simple as provide a basic dictionary with hyphenation data...

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

Cool, it seems that Firefox and Safari support quite some languages on both Desktop and Mobile, but Chrome is English only :/

I think it’s already possible to get some of the way there on the web today (having fine-grained control and avoiding Walde-r’s). Check out Hypher (https://github.com/bramstein/hypher). If you’re using Gatsby and Markdown, I wrote a small plugin to be able to use it there:

https://www.gatsbyjs.com/plugins/gatsby-remark-hypher/

and

https://github.com/siawyoung/remark-hypher

(An example of how it looks like: https://siawyoung.com)

Incidentally, by the same author, the state of hyphenation on the web: http://clagnut.com/blog/2395

It's from 2019, but nothing much has changed since. My biggest gripe is that browsers should prevent hyphenation when a word starts with an uppercase letter, which doesn’t seem too hard?

The only bulletproof (but more complicated) solution is to process text beforehand and insert soft hyphens () where appropriate.

Reply on news.ycombinator.com