[css-text] Enable finer control over text-justify

[scottkellum]

css-text#text-justify-property

Currently there is little control over justification settings in CSS. This often results in egregious rivers when text is justified. While there is some control with the text-justify property, it lacks necessary control to adequately fine tune justification.

Design programs like Adobe InDesign allow for nuanced control of 3 characteristics: word spacing, letter spacing, and font stretch. The current keywords only allow for word spacing and letter spacing to be turned on or off, with no support for font stretch.

Proposal

Allow a series of numbers to be passed into text-justify to choose what text characteristics are altered by the justification algorithm. text-justify: 1 0 0 would be the same as inter-word and text-justify: 0 1 0 would be the same as inter-character. You could change this setting to text-justify: 1 1 0 to evenly distribute the extra space to both word spacing and letter spacing, or text-justify: 1 1 1 to include font-stretch as well. Additionally, proportions could be changed by adjusting the values. text-justify: 2 1 0 would mean twice as much of the extra space would be distributed to word spacing as letter spacing.

Related resources:

• TypeNetwork’s justification using variable font width
• TypeEd’s guide to hyphenation and justification

[fantasai]

There are a lot of different ways of weighting and prioritizing justification opportunities. I don't think we're at a stage yet where we can offer the level of fine-tuned control you get in dedicated desktop publishing software, particularly if we're considering all the world's writing systems and all the desirable justification algorithms. So currently we only have text-justify as a coarse-grained tool for switching fundamental modes of justification.

That still leaves a lot of room for implementations to improve their auto justification implementation, though.

[scottkellum]

@fantasai Thanks! I was hoping this would be a compromise proposal between the complexities of paragraph shaping in programs like InDesign and what we have on the web.

The current algorithm as I understand it looks at the remaining space left on a line and divides that evenly between the words or characters depending on if inter-word or inter-character is chosen.

This proposal is around that same algorithm that identifies remaining space on a line, but directs what proportion of that remaining space goes between words or between characters, or to font stretch (details in next paragraph).

The third value for font-stretch is the more complicated one as knowing how much font-stretch to apply is not straightforward. As such this part can probably be removed from the initial implementation and added at a later time. If this part of the proposal were implemented, I would expect that if the font were already stretched to its limit then the remainder of the space would be allocated between words in characters at the ratio of the other two numbers, so if you had text-justify: 0 0 1 and font-stretch wasn’t available, the remainder of the space would be placed equally between both the words and characters.

[litherum]

I don't think having the author supplying numbers is the right solution to avoiding rivers. Different browsers and operating systems will use different fonts, or different metrics from the same fonts, or different line breaking opportunities. So if you tune the numbers to look good in one browser on one OS, that might make it look actively awful on another browser on another OS.

If what you want is to tell the browser to avoid rivers, then the CSS should just say “avoid rivers” and not “use these three magic numbers which I have tuned on my development machine”

But that's what text-wrap: pretty is supposed to do. When I proposed text-wrap: pretty to the standardization group, I assumed it would work similarly to the Knuth & Plass algorithm, which does try to reduce rivers. The property is supposed to recognize that justification is enabled, and react accordingly to pick different line breaks.

[scottkellum]

There are 3 things we need to control here to make justified text look great.

1. Hyphenation control book design software usually lets you dial in how liberal it gets with hyphenation, better spacing vs fewer hyphens.
2. Whitespace control where a designer can allocate how excess space per line is allocated (between words, letters, or stretching character forms)
3. Text wrapping allocating what words fall on various lines

This issue addresses item 2 in this list. While text-wrap: balance is very exciting for designers, I’m skeptical text-wrap: pretty is going to solve the issues of whitespace, unless I am mistaken (please point out if I am!), text-wrap doesn’t change if extra space is placed between words or between letters.

For context, here is the equivalent to what I am proposing here in InDesign. These aren’t considered “magic numbers” but carefully define how whitespace behaves in text. I think InDesign’s implementation is both complicated from an authoring standpoint and likely less performant from an implementation standpoint so I tried to create a more simplified version with just one value for word spacing, one value for letter spacing, and one value for glyph scaling, as opposed to 3 values for each.

I am not married to the proposal above, but I would love to solve the issue of whitespace shaping in justified text blocks.