4 ms·

"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 te

"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).

kuished 5y ago
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 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/ https://www.gatsbyjs.com/plugins/gatsby-remark-hypher/ and https://github.com/siawyoung/remark-hypher https://github.com/siawyoung/remark-hypher (An example of how it looks like: https://siawyoung.com https://siawyoung.com)
john-doe 5y ago
Incidentally, by the same author, the state of hyphenation on the web: http://clagnut.com/blog/2395 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.
red_trumpet 5y ago
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 https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
- Semaphor 5y ago
  Cool, it seems that Firefox and Safari support quite some languages on both Desktop and Mobile, but Chrome is English only :/

kuished 5y ago

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 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/ https://www.gatsbyjs.com/plugins/gatsby-remark-hypher/ and https://github.com/siawyoung/remark-hypher https://github.com/siawyoung/remark-hypher (An example of how it looks like: https://siawyoung.com https://siawyoung.com)

john-doe 5y ago

Incidentally, by the same author, the state of hyphenation on the web: http://clagnut.com/blog/2395 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.

red_trumpet 5y ago

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 https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

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