For example, if your URL was displayed as meyer-web.com, surely this isn’t ideal and could even be seen as a major issue for some?

Might be a case for avoiding hyphens on links.

I strongly disagree with Kevin Hamilton’s suggestion of turning hyphenation off for large displays. It seems he’s implying that hyphens are less readable when the line length is long, however the real problem is that the meassure (characters per line) is to high. Instead of adding a quick fix and removing the hyphens when the lines are too long, fix the actual problem instead and prevwnt the lines growing too long. Traditionally 50-70ish has been considered a good meassure, there’s no reason the web shouldn’t conform to the same.

When it comes to hyphenation and languages it is true that each language qould need their own dictionary/ruleset. Each language has different typographic and ortographic rules which, among others, define how and when words can be broken to a new line.

Hyphenating is part of having “editorial etiquette” if you will.

The principle of using hyphenation is so that the text being read is legible in the container is being displayed in. Words ‘break’ and that’s part of their nature and hyphens are the physical evidence of that nature.

Hyphenating needs to happen whenever the words require it, regardless if the words are in someone’s quote, or a product description, etc.

So, yes, hyphenating someone’s quote should be editorially correct, but mostly, polite.

Heck, even the author should thank you if you did a good job hyphenating his/her quote :)

I would rather choose manually which elements to apply hyphenations on and make it smaller in scope for the dictionaries to operate on. I also think there is value in specifying universal opt-outs but it will be significantly smaller set of selectors

Hyphens should only be used when the developer is sure there is going to be content and nothing else. Typically that would be a paragraph element, list element or similar.

Now, I don’t disagree that having e.g code blocks display words with hyphens when none exist might look silly (‘back-ground’, uh). Otoh, if the code element is inline, as in this sentence, and the word contains a hyphen, it will split anyway (e.g. linear-gradient) if it happens to be at the end of the line; hyphen being a line-break opportunity in most browsers.

BTW, Eric, you may want to disable hyphenation in form controls (textarea, input[type=text]).

Some sites don’t have the content spread in one column across the page, so it may still require hyphenation within the multiple columns. I’m thinking of a design like Pintrest here.

Just my two cents :-)


@media (min-width: 1500px) {
body { hyphens: none; }
}


I feel that at certain line lengths, the tracking time for my eye to get from the end of the line back to the beginning of the next to complete a word feels disruptive. Of course, this might just be because I’m not used to hyphens on the web or because I am thinking about it too consciously.

But if you try it and you agree, then I think on your site a min-width somewhere between 1200px to 1500px seems like a reasonable cutoff to disable hyphenation.

But if I’ve learned anything from coding over the years, that won’t be the case ;-)

I assume this works hand-in-hand with word-break, or does it work independently?

So, if I have

-ms-word-break: break-all;
-epub-word-break: break-all;
word-break: break-all;
word-break: break-word; /*old webkit */

in my CSS, does hyphens:auto replace it, or add to it?