Improved rendering of justified text

For a while I’ve been using justified text to give blockquotes on the site a distinct visual language, I like it, even though algorithmically justified text on the web is far from perfect, with certain viewport widths yielding ugly rivers in a text block.

Last night I came across a post from Tyler Sticka — Justified Text: Better Than Expected? — that introduced me to a couple of CSS properties that improve rendering,

blockquote {
  hyphens: auto;
  hyphenate-limit-chars: 7;
}

Here’s what I use for blockquotes now,

blockquote {
  padding: 0 1em 0 2em;
  margin: 1.4em 0;
  position: relative;
  color: var(--blockquote-foreground);
}

blockquote p {
  text-align: justify;
  hyphens: auto;
  hyphenate-limit-chars: 7;
  margin: 1em 0 0 0;
}
blockquote p + p {
  text-indent: 2em;
  margin: 0;
}