I haven't been posting anything lately. Although I begann writing on another topic, I didn't have the time to finish it yet. So I will just publish this small post in between. This post deals with an enhanced css-only hyphen solution, based on a solution, which was posted on css-tricks.com.
Lately when developing any website-frontends I often ran into the problem that words don't fit the screen width on mobile devices, due to the fact, that there are very long words existing in the german language. I remembered, that some years ago there was a javascript-base solution for hyphenating words. However at that time I thought - and still think - that this is kinda overkill and would have beend pleased if there was a css-only solution.
Now digging back into the topic, I encountered a nice post published at css-tricks.com: hyphens.
I used the code-snippet (assuming it was working) in two of my projects. Just until now, when client complained about a cut word in IE where it wasn't really necessary. In fact it was the the year 2014 which had been cut in 2|014. But why? So begann testing around with the snippet and different properties. Since the client is using IE (yeah, I know we are in 2016 and not 2007 anymore...) I had to fix it also in IE to make them feel satisfied.
This is what css-tricks.com suggests:
.hyphenate {
-ms-word-break: break-all;
word-break: break-all;
// Non standard for webkit
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
Great - however browsers which support the word-break-property and the hyphens-property (or versions with vendor prefixes), would rather use the word-break-property instead of the hyphens-property, which leads to broken words without displaying any hyphens even though the browser would be capable of doing so.
So I modified the snippet to use CSS' @supports-query which looks like this:
.hyphenate {
word-break: break-all;
word-break: break-word;
}
@supports (
(hyphens: auto) or
(-webkit-hyphens: auto) or
(-moz-hyphens: auto)
) {
.hyphenate {
word-break: normal;
word-break: normal;
hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
}
}
First we set the word-break-properties, but when the browser supports the hyphens-property (or vendor prefixed versions) we reset the word-break-property and use hyphens instead.
And now the Final Boss comes into play: Internet Explorer... Even Internet Explorer 11 doesn't support the @supports-query, but understands the -ms--prefix for word-break and hyphens. If we put it into the correct order it will override the non prefixed versions of both properties, like so:
.hyphenate {
word-break: break-all;
word-break: break-word;
-ms-word-break: normal;
-ms-hyphens: auto;
}
@supports (
(hyphens: auto) or
(-webkit-hyphens: auto) or
(-moz-hyphens: auto)
) {
.hyphenate {
word-break: normal;
word-break: normal;
hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
}
}