Justify text in paragraphs

[pietroalbini]

This PR changes the styling of the blog to justify the text, which improves the look of the website and (at least for me) legibility.

Before	After

[rust-highfive]

r? @alexcrichton

(rust_highfive has picked a reviewer for you, use r? to override)

[Mark-Simulacrum]

r? @steveklabnik perhaps? I don't mind either way.

[steveklabnik]

I... am really not sure. This isn't the worst thing to do, but in my understanding, isn't considered best practice either. But I'm not 100% sure.

[XAMPPRocky]

Justified text in web design has generally not been done, because in practice you need more than text-align: justify to have the justified text look appealing. The main issue you run into, is that CSS breaks lines at the word level so if you have a really long word that doesn't fit on the end of the line, you will get large "rivers" between your text. I've screenshotted an example of text that doesn't format correctly because experimentation is too long.

[pietroalbini]

Hmm, let me look a bit more into it.

[XAMPPRocky]

There is a few workarounds for this though. There's the word-break which with break-all will make the example look like the following.

The problem with word-break however is it will break anywhere in the word, so you can have confusing breaks like the following

Ex
perimentation

There is one correct css property which is hyphens it has the auto value, that uses a dictionary in order to determine where to break a word. The main problem with this property though is it has a weird compatibility table. It's fully supported on mobile, however on desktop chrome hyphens doesn't work if you're on Windows. On top of that not every browser has the same level of support for every language. Only Firefox really has near 100% support.

[pietroalbini]

@XAMPPRocky's analysis is right, and we should indeed add hyphens if we want to justify the text.

Another option to do that, which I implemented in the last commit I pushed, is to use hyphens: manual: that rule is widely supported across browsers, and it puts the burden of deciding where to break words to the website. That ensures a consistent experience across all browsers.

[XAMPPRocky]

@pietroalbini Would it be possible to have a GitHub Pages setup with the change? I think people would be able to form a better opinion if they can read one or two articles with justified text.

[XAMPPRocky]

My main concern about this change is that it might be temporary. We've discussed recently about making the blog multilingual, and once we do that we have to change this code so that it can generate hyphened versions for each translation or remove it.

[pietroalbini]

My main concern about this change is that it might be temporary. We've discussed recently about making the blog multilingual, and once we do that we have to change this code so that it can generate hyphened versions for each translation or remove it.

We can definitely do that by generating the appropriate dictionaries.

[XAMPPRocky]

We can definitely do that by generating the appropriate dictionaries.

My main problem with that approach is that that we have to store the dictionaries in tree, and I don't really want to maintain them. If it generated/downloaded the latest ones at build time that would resolve a lot of my concern. I don't know what the correct solution for that is though, as I also know we want to keep low build times on CI.

[pietroalbini]

Would it be possible to have a GitHub Pages setup with the change? I think people would be able to form a better opinion if they can read one or two articles with justified text.

Deployed it in https://blog-rlo-justify-demo.netlify.com/.

[pietroalbini]

My main problem with that approach is that that we have to store the dictionaries in tree, and I don't really want to maintain them. If it generated/downloaded the latest ones at build time that would resolve a lot of my concern. I don't know what the correct solution for that is though, as I also know we want to keep low build times on CI.

Well, we can definitely do that. The dictionaries could be then cached locally and on CI (thanks to CI's own cache). I'd prefer to avoid spending time implementing that until we have a consensus on whether we want the change or not.

[scottmcm]

Thanks for the demo, @pietroalbini!

Unfortunately the first paragraph I looked at ended up with more hyphens than I'd personally wish to see (though I can see why the layout engine would have picked them):

[pietroalbini]

Just to compare, this is the same paragraph with the current layout:

Personally I prefer to have a consistent text width, with a few more hyphens, but I'd love to hear what other people prefer.

[XAMPPRocky]

To follow up on this, my disposition is to close this for now. When I initially checked this out there were a few spots with pretty bad rivers, but were pretty fixable, and it did feel nice to read. I think my main concern as I thought on it more, is that it might look out of place compared to the content on the rest of the website which will still be left aligned. I think is something we should revisit when/if we make larger changes to website and ask if we want to have content be left aligned or justified.

[pietroalbini]

I think my main concern as I thought on it more, is that it might look out of place compared to the content on the rest of the website which will still be left aligned. I think is something we should revisit when/if we make larger changes to website and ask if we want to have content be left aligned or justified.

I'm not sure if this is a problem in practice: the content of the blog is not the same kind of the content on the website, and I think it's fine to have different text alignmnent based on what's best for each medium.

[XAMPPRocky]

There was one more concern I wanted to bring up which, but forgot until @pietroalbini reminded me was how formatting can break when using inline code and on mobile devices. I've pasted screenshots below of some examples that I found when looking at it on a iPhone XS.

Example 1

Example 2

[gszy]

FWIW

@supports (hyphens: auto) {
    p /* or whatever */ {
        hyphens: auto;
        text-align: justify;
    }
}

See https://developer.mozilla.org/en-US/docs/Web/CSS/@supports.

Obviously it doesn’t fix the issue with inline code samples.

[XAMPPRocky]

There is actually a solution to my concern now that I believe is implemented on all the platforms we support which is line-break. With line-break: anywhere the code samples can break at any point which makes them much more readable. I think we probably want to add this to all inline code elements regardless.

Screens from WWDC session where they talked about it in Safari.

line-break: auto

line-break: anywhere

[pietroalbini]

Rebased this and added @XAMPPRocky's suggestions. The live version is @ https://blog-rlo-justify-demo.netlify.app/

[XAMPPRocky]

Hmm, line-break: anywhere doesn't seem to be working for some reason. I tried figuring out why and couldn't find anything.

If you want a good example page of the bug the 1.42 has a lot of code blocks. https://blog-rlo-justify-demo.netlify.app/2020/03/12/rust-1.42

[rylev]

@pietroalbini what's the status of this? Do you have any interest in trying to get this landed?

[rylev]

Closing this since it's been a while and there's not been movement on it. We can always reopen when there's time to work on it.