1. 9
  1. 3

    The advice to avoid justified alignment hurts. On the web, it’s probably right, but it still hurts.

    Justified text is easier to read, in print, where either manual typesetting or several good algorithms solve the “white river” problem. This is why books have been typeset this way for hundreds of years.

    Back when web browsers were primarily used for document delivery and not as an application runtime, I posted a request for enhancement in bugzilla, recommending that they use the TeX algorithm or another correct algorithm for laying out justified text. The report languished because of the concern that the recalculations needed would cause too much text reflow during incremental display. Eventually, a year or two ago, it was finally scrapped because it’s not compatible with the performance requirements of the web as an application platform.

    But TeX really does justification plenty fast for typesetting actual documents, and it would be fine on the web if we were still looking at documents here instead of playing video games or whatever we’re doing.

    1. 3

      There’s some work for more advanced hyphenation support in CSS, but browser support is nearly non-existent. Hell, Chrome still doesn’t support hyphenation on the desktop (but it does on mobile).

      See e.g.: https://drafts.csswg.org/css-text-4/#hyphenation and http://clagnut.com/blog/2395

      I don’t know how it compares to TeX. There was some discussion about it in a HN thread for the above article as well: https://news.ycombinator.com/item?id=19472922

      In the meanwhile, you can use a JavaScript solution, which is not ideal but works.

    2. 2

      Do not set your base font size in pixels. Doing so will overwrite the browser’s default font size. [..] Let’s say someone has an impaired vision and sets their browser’s default font size to something larger. Setting the base font size in our CSS to pixels will overwrite their browser default font size setting

      I’m not sure this is good advice. 16px may be a great default for one font, but a terrible one for another. I can set the default to 120%, but 120% of what? If the user already has a large default then they may end up with a gigantic font.

      In addition, the font size isn’t an isolated property: it’s set in proportion to the line height and text width. Setting font: 16px/120% MyFont may work great for some fonts, but if we use 100% and the user has a large default font size of 20px then the 120% is likely to be too small, and you probably also want to increase the page width a bit, too. The article already acknowledges this in the fourth point, but it seems to me that the first and fourth are in conflict with each other.

      As far as I know, most people who want larger fonts on their screen will either set a higher DPI in their OS, or a higher default zoom level (e.g 120%) in their browser, both will work well with setting a default font size in pixels.

      Lastly, people can still zoom your webpage if they need it; so they’re not stuck with your chosen font size (one of the great features of the web!)