4 ms·

Please do not use justified formatting for text unless you can hyphenate it. Otherwise you end up with large chunks of white space between the words, especially

Please do not use justified formatting for text unless you can hyphenate it. Otherwise you end up with large chunks of white space between the words, especially in narrower (then 6070 characters) columns. Browsers don’t hyphenate, so avoid justified text on the web.

dheera 6y ago
Real newspapers do justify text, and they do end up with large chunks of white space between words. I think OP was going for the newspaper look so that part is quite authentic even though I agree it may not be the best design choice for "normal" web pages. I know real newspapers do hyphenate, but the site would probably look a lot less like a newspaper without justified text.
rcar1046 6y ago
CSS word wrap
- steve_adams_86 6y ago
  Right, there’s also overflow-wrap though it’s intended more for preventing layout breakage in a language-agnostic way. Maybe it could be useful if you’re working with a language that isn’t supported by browsers.
steve_adams_86 6y ago
That’s not entirely true is it? Browsers can hyphenate (using the hyphen property in CSS) but it only supports certain languages, which need to be specified in the lang attribute of the html tag.
- oefrha 6y ago
  Support just isn't universal enough.[1] In particular, for Chromium-based, > Only supported on Android & Mac platforms (and only the "auto" value) for now. Even where the property is supported, the supported language matrix [2] tells a depressing story. [1] https://caniuse.com/#feat=css-hyphens https://caniuse.com/#feat=css-hyphens [2] https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#Browser_compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#Bro...
  - steve_adams_86 6y ago
    Wow, I should know better. That’s pretty awful support.
- userbinator 6y ago
  but it only supports certain languages Probably because hyphenation is itself a rabbit-hole of complexity; some languages may require a complete dictionary to determine where words can be hyphenated, and sometimes it could depend on what style guide you follow, etc.
dfabulich 6y ago
Browsers do hyphenate, and this page enables it, with the "hyphens: auto" CSS rule. https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens In Google Chrome, you'll see that it hyphenates "profes-sional" in the second story of the center column. It's still not enough, though, because it still leaves huge gaps in the justified text; it works best when you use width: 80ch. The page is currently using width: 600px, which is approximately 67ch. (If you don't see hyphenation in Safari, that's because the developer didn't enable -webkit-hyphens. If you don't see hyphenation in Firefox, that's because the page's <html> tag doesn't have a lang="en" attribute.)
- jfk13 6y ago
  And if you do see hyphenation in Chrome, that's a Chrome bug (https://bugs.chromium.org/p/chromium/issues/detail?id=676270 https://bugs.chromium.org/p/chromium/issues/detail?id=676270), because the spec says the browser must only do this if the content language is known.
- sergeykish 6y ago
  And if you don't see hyphenation in Chrome, probably you use Linux (or another unsupported platform). To feel how it should insert  var Hyphenopoly = { require: { "en-us": "Supercalifragilisticexpialidocious" }, setup: { selectors: { ".story": {} }, CORScredentials: "omit" } } script = document.createElement('script') script.src = 'https://unpkg.com/hyphenopoly@4.5.0/min/Hyphenopoly_Loader.js' document.body.append(script)

dheera 6y ago

Real newspapers do justify text, and they do end up with large chunks of white space between words. I think OP was going for the newspaper look so that part is quite authentic even though I agree it may not be the best design choice for "normal" web pages. I know real newspapers do hyphenate, but the site would probably look a lot less like a newspaper without justified text.

rcar1046 6y ago

CSS word wrap

steve_adams_86 6y ago
Right, there’s also overflow-wrap though it’s intended more for preventing layout breakage in a language-agnostic way. Maybe it could be useful if you’re working with a language that isn’t supported by browsers.

steve_adams_86 6y ago

That’s not entirely true is it? Browsers can hyphenate (using the hyphen property in CSS) but it only supports certain languages, which need to be specified in the lang attribute of the html tag.

oefrha 6y ago
Support just isn't universal enough.[1] In particular, for Chromium-based, > Only supported on Android & Mac platforms (and only the "auto" value) for now. Even where the property is supported, the supported language matrix [2] tells a depressing story. [1] https://caniuse.com/#feat=css-hyphens https://caniuse.com/#feat=css-hyphens [2] https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#Browser_compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#Bro...
- steve_adams_86 6y ago
  Wow, I should know better. That’s pretty awful support.
userbinator 6y ago
but it only supports certain languages Probably because hyphenation is itself a rabbit-hole of complexity; some languages may require a complete dictionary to determine where words can be hyphenated, and sometimes it could depend on what style guide you follow, etc.

dfabulich 6y ago

Browsers do hyphenate, and this page enables it, with the "hyphens: auto" CSS rule. https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens In Google Chrome, you'll see that it hyphenates "profes-sional" in the second story of the center column. It's still not enough, though, because it still leaves huge gaps in the justified text; it works best when you use width: 80ch. The page is currently using width: 600px, which is approximately 67ch. (If you don't see hyphenation in Safari, that's because the developer didn't enable -webkit-hyphens. If you don't see hyphenation in Firefox, that's because the page's <html> tag doesn't have a lang="en" attribute.)

jfk13 6y ago
And if you do see hyphenation in Chrome, that's a Chrome bug (https://bugs.chromium.org/p/chromium/issues/detail?id=676270 https://bugs.chromium.org/p/chromium/issues/detail?id=676270), because the spec says the browser must only do this if the content language is known.
sergeykish 6y ago
And if you don't see hyphenation in Chrome, probably you use Linux (or another unsupported platform). To feel how it should insert  var Hyphenopoly = { require: { "en-us": "Supercalifragilisticexpialidocious" }, setup: { selectors: { ".story": {} }, CORScredentials: "omit" } } script = document.createElement('script') script.src = 'https://unpkg.com/hyphenopoly@4.5.0/min/Hyphenopoly_Loader.js' document.body.append(script)