[css-text] Consider removing `distribute` value for `text-justify` from the spec #7322

nt1m · 2022-05-27T05:27:41Z

Currently there is this note in this section:

For legacy reasons, UAs must also support the alternate keyword distribute which must compute to inter-character, thus having the exact same meaning and behavior.

Looking at browser support for text-justify:

Chrome only supports the property behind the experimental web features flag
IE (which used to support this value) is now retired
Safari has never shipped text-justify

...which leaves Firefox being the only browser supporting the CSS property.

I suggest that we remove this note from the spec, since there is no clear win in web compatibility in supporting this.

The text was updated successfully, but these errors were encountered:

nt1m · 2022-05-27T05:28:23Z

cc @emilio @dbaron Wdyt?

nt1m · 2022-05-27T05:29:45Z

cc @karlcow @miketaylr too

fantasai · 2022-05-31T04:14:34Z

Note that justification doesn't break pages in the way that, say, a layout bug would, so the compat impact of not having this value is going to be less than breaking/dropping any kind of layout behavior. But it's also very cheap to implement, being just an alias.

This value was in a CR-level spec in the past and supported by the most dominant browser of the time, so I'm hesitant to drop it if there's not either a compelling reason or substantial proof that it's not used by some long tail of existing CJK content. https://www.w3.org/TR/2003/CR-css3-text-20030514/#justification-prop

fantasai · 2022-05-31T04:15:07Z

CC @kojiishi

karlcow · 2022-05-31T05:43:03Z

Following the discussion in #6156

in Firefox, @emilio one year ago made an alias for Same behavior or alias for text-justify: inter-character and text-justify: distribute. This has shipped in Firefox 89.
From a webcompat point of view, we never had a report on webcompat.com about text-justify: distribute lacking in a web page.

nt1m · 2022-05-31T07:36:32Z

Note that justification doesn't break pages in the way that, say, a layout bug would, so the compat impact of not having this value is going to be less than breaking/dropping any kind of layout behavior. But it's also very cheap to implement, being just an alias.

The spec (and relevant WPT) specifies it as a parse-time alias, which while not hard to implement, complicates the code unnecessarily, since WebKit does not have such a mechanism (you need to create a custom parsing method, and can't re-use the fast paths). Compute-time is fine though I don't see the benefit of supporting it. Fwiw, Chrome only implements it compute-time.

https://bugs.webkit.org/show_bug.cgi?id=229084 <rdar://82177456> Reviewed by Antti Koivisto. This is still disabled by default behind the cssTextJustifyEnabled setting. We don't keep support for the -webkit- prefix, since only Firefox ships text-justify (without the prefix) and it was never enabled in WebKit for macOS/iOS. distribute and inter-character are aliases, with distribute being the legacy one. The spec specifies it as parse-time, but we implement it compute-time (like Chrome). w3c/csswg-drafts#7322 is filed about potentially removing 'distribute' from the spec. * LayoutTests/fast/css3-text/css3-text-justify/getComputedStyle/getComputedStyle-text-justify-expected.txt: Removed. * LayoutTests/fast/css3-text/css3-text-justify/getComputedStyle/getComputedStyle-text-justify-inherited-expected.txt: Removed. * LayoutTests/fast/css3-text/css3-text-justify/getComputedStyle/getComputedStyle-text-justify-inherited.html: Removed. * LayoutTests/fast/css3-text/css3-text-justify/getComputedStyle/getComputedStyle-text-justify.html: Removed. Removed parsing tests redundant with WPT. * LayoutTests/fast/css3-text/css3-text-justify/text-justify-none.html: * LayoutTests/fast/text/text-combine-crash.html: * LayoutTests/TestExpectations: * LayoutTests/imported/w3c/resources/resource-files.json: * LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/all-prop-revert-layer-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/first-letter-allowed-properties-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-pseudo/first-line-allowed-properties-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-text/inheritance-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-text/parsing/text-justify-computed-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-text/parsing/text-justify-valid-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-text/letter-spacing/letter-spacing-bidi-003.xht: * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-001.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-002.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-003.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-004.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-005.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-006.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/distribute-alias.tentative-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/distribute-alias.tentative.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-and-trailing-spaces-001-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-and-trailing-spaces-001.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-and-trailing-spaces-002-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-and-trailing-spaces-002.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-and-trailing-spaces-003-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-and-trailing-spaces-003.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-and-trailing-spaces-004-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-and-trailing-spaces-004.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-and-trailing-spaces-005-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-and-trailing-spaces-005.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-and-trailing-spaces-006-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-and-trailing-spaces-006.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-distribute-001-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-distribute-001.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-inter-character-001-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-inter-character-001-ref.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-inter-character-001.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-inter-word-001-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-inter-word-001-ref.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-inter-word-001.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-interpolation-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-interpolation.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-none-001-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-none-001-ref.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/text-justify-none-001.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-text/text-justify/w3c-import.log: * LayoutTests/platform/gtk/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt: * LayoutTests/platform/mac-wk1/imported/w3c/web-platform-tests/css/css-cascade/all-prop-revert-layer-expected.txt: * LayoutTests/platform/wpe/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt: Import new WPT from 6aa9a39, remove prefixes automatically added by the importer, and rebaseline tests. * Source/WebCore/animation/CSSPropertyAnimation.cpp: (WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap): * Source/WebCore/css/CSSComputedStyleDeclaration.cpp: (WebCore::ComputedStyleExtractor::valueForPropertyInStyle): * Source/WebCore/css/CSSPrimitiveValueMappings.h: (WebCore::CSSPrimitiveValue::CSSPrimitiveValue): (WebCore::CSSPrimitiveValue::operator TextJustify const): * Source/WebCore/css/CSSProperties.json: * Source/WebCore/css/StyleProperties.cpp: * Source/WebCore/css/parser/CSSParserContext.cpp: (WebCore::CSSParserContext::isPropertyRuntimeDisabled const): * Source/WebCore/css/parser/CSSParserFastPaths.cpp: (WebCore::CSSParserFastPaths::isValidKeywordPropertyAndValue): (WebCore::CSSParserFastPaths::isKeywordPropertyID): * Source/WebCore/rendering/LegacyLineLayout.cpp: (WebCore::LegacyLineLayout::textAlignmentForLine const): * Source/WebCore/rendering/style/RenderStyleConstants.h: * Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js: Canonical link: https://commits.webkit.org/251144@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@295049 268f45cc-cd09-0410-ab3c-d52691b4dbfc

kojiishi · 2022-05-31T16:34:26Z

Edge has degraded this when it moved to Chromium. If Edge is fine, I think it's a good sign we can remove this safely. /cc @dlibby-

jfkthame · 2022-06-01T10:24:59Z

Given that (as @fantasai notes above),

This value was in a CR-level spec in the past and supported by the most dominant browser of the time

I think the bar for removing it should be fairly high; I'm not sure that relatively minor (AIUI) implementation convenience is a sufficient justification.

(Does anyone have stats for the number of pages where this value is present? A simple search for "text-justify: distribute" finds a number of CSS-related blog posts, tutorials, etc., that mention it, but whether anyone actually used it is another question...)

kojiishi · 2022-06-02T08:51:50Z

I agree the bar for removing backward compatibilities should be high, but when one browser successfully removed it, the fact should clear the high bar, right?

jfkthame · 2022-06-02T09:30:16Z

The fact that we didn't hear about it doesn't mean that no content was affected. The potential breakage would be relatively minor (cosmetic), rather than making sites unusable. And it would most likely be in non-European locales, where any murmurings from users who notice a change in how content is justified might not reach the ears of the (primarily English-speaking) CSSWG.

Can we find out how many pages in Google's index (for example) have this value in their styles?

Loirooriol · 2022-06-02T09:38:08Z

HTTPArchive could provide some data I guess? @LeaVerou

LeaVerou · 2022-06-02T13:08:36Z

HTTPArchive could provide some data I guess? @LeaVerou

That should be pretty easy!

LeaVerou · 2022-06-02T20:44:47Z

@Loirooriol here you go: https://docs.google.com/spreadsheets/d/1VoYVJ5HLN_-wogaFPKaJh46j0qbdm0MkM-oPmcVFEjY/edit#gid=0
(results produced by @rviscomi)

Loirooriol · 2022-06-02T21:46:23Z

Thanks! Then it seems strange to me to have a distribute value for compat, if distribute-all-lines is actually used twice as much but it's not in the spec.

jfkthame · 2022-06-02T22:43:04Z

Yeah, interesting. Another point to note, though, is that it appears distribute is used 6 times as often as its "preferred" equivalent inter-character. Which suggests that removing the compatibility alias would disrupt the great majority of the pages that are requesting this behavior.

karlcow · 2022-06-03T00:53:26Z

It would be interesting to find out which pages contains this property. Coming from a CSS framework? Really used on purpose or just here by default and doing nothing most of the time.

`text-justify: distribute-all-lines`

it seems to happen a lot in China for ie6-8 as a hack.

https://github.com/search?q=%22text-justify%3A+distribute%22&type=issues
https://github.com/search?l=CSS&q=distribute-all-lines&type=Code
https://github.com/search?l=SCSS&q=distribute-all-lines&type=Code

Example

 .test1 {
            text-align:justify;
            text-justify:distribute-all-lines;/*ie6-8*/
            text-align-last:justify;/* ie9*/
            -moz-text-align-last:justify;/*ff*/
            -webkit-text-align-last:justify;/*chrome 20+*/
        }

Another blog post, this time Japanese to also basically solve the issue in Internet Explorer.

@LeaVerou Thanks for the data. I wonder if HTTP archive is able to detect the language of the source and we could check the distribution of distribute-all-lines and distribute by locales.

This is also used by http://justifygrid.com
https://github.com/CrocoDillon/JustifyGrid/blob/bc9e051aca2e13532540238ba03214a8385906c3/Framework/justifygrid.css#L1-L5

which in return seems to have been in a lot of mixins for SASS.

`text-justify: distribute`

This stackoverflow seems to encourage to use of text-justify: distribute for solving an issue in Internet Explorer with images creating space. inside a text.

kojiishi · 2022-06-06T08:30:53Z

Yeah, interesting. Another point to note, though, is that it appears distribute is used 6 times as often as its "preferred" equivalent inter-character. Which suggests that removing the compatibility alias would disrupt the great majority of the pages that are requesting this behavior.

This is an interesting data, thanks @LeaVerou and @rviscomi, and thanks @karlcow for pointing out about the framework usages.

It looks like inter-ideograph is the winner for the compat, if we're doing this?

Value	pages	%
`inter-ideograph`	19,199	0.24%
`distribute-all-lines`	9,186	0.11%
`distribute`	4,446	0.05%
`inter-character`	717	0.01%
`inter-ideographic`	36	0.00%

I'm fine not to add the backward compat because the breakage is very minor and not supported by 3 out of 4 browsers for a long time, but if we want, I think a) adding more used values (inter-ideograph and distribute-all-lines) as well looks like desired, and b) as @nt1m pointed out, great if it's not a parse-time alias as neither WebKit nor Blink has such a mechanism. /cc @lilles

emilio · 2022-06-06T09:04:52Z

How do WebKit and Blink not have parse time aliases? It's a matter of turning a consumed value into another, right?

nt1m · 2022-06-06T09:07:13Z

How do WebKit and Blink not have parse time aliases? It's a matter of turning a consumed value into another, right?

WebKit does, it's just that you have to create a custom parsing function for the CSS property, you can't go through parsing fast paths (which just checks keywords), which is unfortunate.

rviscomi · 2022-06-06T13:56:40Z

@LeaVerou Thanks for the data. I wonder if HTTP archive is able to detect the language of the source and we could check the distribution of distribute-all-lines and distribute by locales.

@karlcow let me know if this is what you had in mind

lang code	distribute	distribute-all-lines
en	38%	48%
ja	22%	10%
NULL	20%	19%
pt	4%	1%
ru	3%	2%
fr	2%	4%
zh	2%	2%
es	2%	2%
de	1%	2%
pl	1%	1%
other	5%	9%

fantasai · 2022-06-07T21:13:26Z

inter-ideograph is not the same behavior as distribute/inter-character. It allows space between CJK, but not between alphabetic letters. https://www.w3.org/TR/2003/CR-css3-text-20030514/#text-justify This is now the default behavior (it's included in text-justify: auto in modern implementations) so there is no breakage if ignoring this value.

css-meeting-bot · 2022-06-08T16:55:58Z

The CSS Working Group just discussed [css-text] Consider removing distribute value for text-justify from the spec, and agreed to the following:

RESOLVED: Keep 'distribute' keyword alias

The full IRC log of that discussion

<fantasai> Topic: [css-text] Consider removing distribute value for text-justify from the spec
<fantasai> github: https://github.com//issues/7322
<emilio> fantasai: I don't know if we can resolve on this because discussion has expanded a little bit
<emilio> ... issue was a suggestion to remove this value, because Chrome / Safari don't support it, but Firefox does and IE did, and it was in CR in 2003
<emilio> ... so my preference is to not remove it unless it's harmful / complicated
<emilio> ... we got some data showing that it is used on some pages
<emilio> ... not a lot of them
<emilio> ... there's an assertion that there's no compat bugs reported, but pages using this in CJK, which are less likely to complain about it
<emilio> ... this doesn't cause a fundamental degradation of the page, justification isn't just what's exactly desired
<emilio> ... the main difference is whether you distribute in between letters in english / greek / , but not in CJK (??)
<emilio> ... it's something that was standard and implemented by the most widely used engine at the time
<emilio> ... so I'd lean against removing it
<emilio> ... because people should expect it to continue to work
<astearns> +1 to not removing for now
<fantasai> emilio: The only thing I'd say is that we changed how this alias worked in the past
<fantasai> emilio: now it's a parse-time alias of inter-character
<fantasai> emilio: I don't think it matters substantially
<fantasai> emilio: given it's a compat alias
<fantasai> emilio: I'd rather not remove it, it's cheap to support
<fantasai> emilio: as long as you support inter-character
<fantasai> emilio: so don't see a strong reason to remove, since aliases are extremely cheap to support
<fantasai> fantasai: The only complaint here was that parse-time aliases are inconvenient in some engines
<fantasai> fantasai: we could allow either type of alias (parse-time or compute-time), I don't think it matters
<fantasai> Rossen_: Any objections to keeping 'distribute' keyword?
<fantasai> RESOLVED: Keep 'distribute' keyword alias

Loirooriol · 2022-06-11T22:46:55Z

WebKit does, it's just that you have to create a custom parsing function for the CSS property, you can't go through parsing fast paths (which just checks keywords)

Kinda off-topic, but not sure if you are aware of CSSParserFastPaths::isPartialKeywordPropertyID. If you return true for CSSPropertyTextJustify, then you can keep the current fast path code, and then in CSSPropertyParser::parseSingleValue you only have to handle the alias.

For some engines this is easier; for some it's harder. Spec allows either, since it's a compat alias and it doesn't matter.

frivoal · 2022-12-28T03:11:45Z

Hi @nt1m
We resolved to keep the distribute value in the spec, but it can be implemented either by computing to inter-character (which Chrome) or by treating it as a parse-time alias (as Gecko does). Would appreciate if you can confirm this is acceptable to you.

nt1m · 2022-12-28T05:43:22Z

Should probably be fine to keep it.

frivoal · 2022-12-29T07:33:49Z

tested by web-platform-tests/wpt#37692

For some engines this is easier; for some it's harder. Spec allows either, since it's a compat alias and it doesn't matter.

nt1m mentioned this issue May 27, 2022

Add test for 'distribute' value in text-justify web-platform-tests/wpt#34222

Closed

Loirooriol added css-text-3 Current Work css-text-4 labels May 30, 2022

heycam added the Agenda+ label May 30, 2022

nt1m mentioned this issue May 31, 2022

Unprefix -webkit-text-justify and add inter-character value WebKit/WebKit#1176

Closed

css-meeting-bot removed the Agenda+ label Jun 8, 2022

mozilla-apprentice mentioned this issue Jun 8, 2022

[css-text] Consider removing distribute value for text-justify from the spec mozilla/wg-decisions#805

Closed

fantasai added a commit that referenced this issue Dec 28, 2022

[css-text-3] Allow distribute to be a legacy value alias #7322

a41d06b

For some engines this is easier; for some it's harder. Spec allows either, since it's a compat alias and it doesn't matter.

frivoal closed this as completed Dec 28, 2022

fantasai added a commit that referenced this issue Dec 28, 2022

[css-text-4] Allow distribute to be a legacy value alias #7322

d3ed39e

For some engines this is easier; for some it's harder. Spec allows either, since it's a compat alias and it doesn't matter.

frivoal added Closed Rejected as Wontfix by CSSWG Resolution Commenter Response Pending and removed Commenter Response Pending labels Dec 28, 2022

frivoal added the Needs Testcase (WPT) label Dec 28, 2022

fantasai added Commenter Satisfied Commenter has indicated satisfaction with the resolution / edits. and removed Commenter Response Pending labels Dec 28, 2022

frivoal added Tested Memory aid - issue has WPT tests and removed Needs Testcase (WPT) labels Dec 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-text] Consider removing `distribute` value for `text-justify` from the spec #7322

[css-text] Consider removing `distribute` value for `text-justify` from the spec #7322

nt1m commented May 27, 2022 •

edited

nt1m commented May 27, 2022

nt1m commented May 27, 2022

fantasai commented May 31, 2022

fantasai commented May 31, 2022

karlcow commented May 31, 2022

nt1m commented May 31, 2022

kojiishi commented May 31, 2022

jfkthame commented Jun 1, 2022

kojiishi commented Jun 2, 2022

jfkthame commented Jun 2, 2022

Loirooriol commented Jun 2, 2022

LeaVerou commented Jun 2, 2022

LeaVerou commented Jun 2, 2022

Loirooriol commented Jun 2, 2022

jfkthame commented Jun 2, 2022

karlcow commented Jun 3, 2022 •

edited

kojiishi commented Jun 6, 2022 •

edited

emilio commented Jun 6, 2022

nt1m commented Jun 6, 2022

rviscomi commented Jun 6, 2022

fantasai commented Jun 7, 2022 •

edited

css-meeting-bot commented Jun 8, 2022

Loirooriol commented Jun 11, 2022

frivoal commented Dec 28, 2022

nt1m commented Dec 28, 2022 •

edited

frivoal commented Dec 29, 2022

[css-text] Consider removing distribute value for text-justify from the spec #7322

[css-text] Consider removing distribute value for text-justify from the spec #7322

Comments

nt1m commented May 27, 2022 • edited

nt1m commented May 27, 2022

nt1m commented May 27, 2022

fantasai commented May 31, 2022

fantasai commented May 31, 2022

karlcow commented May 31, 2022

nt1m commented May 31, 2022

kojiishi commented May 31, 2022

jfkthame commented Jun 1, 2022

kojiishi commented Jun 2, 2022

jfkthame commented Jun 2, 2022

Loirooriol commented Jun 2, 2022

LeaVerou commented Jun 2, 2022

LeaVerou commented Jun 2, 2022

Loirooriol commented Jun 2, 2022

jfkthame commented Jun 2, 2022

karlcow commented Jun 3, 2022 • edited

text-justify: distribute-all-lines

text-justify: distribute

kojiishi commented Jun 6, 2022 • edited

emilio commented Jun 6, 2022

nt1m commented Jun 6, 2022

rviscomi commented Jun 6, 2022

fantasai commented Jun 7, 2022 • edited

css-meeting-bot commented Jun 8, 2022

Loirooriol commented Jun 11, 2022

frivoal commented Dec 28, 2022

nt1m commented Dec 28, 2022 • edited

frivoal commented Dec 29, 2022

[css-text] Consider removing `distribute` value for `text-justify` from the spec #7322

[css-text] Consider removing `distribute` value for `text-justify` from the spec #7322

nt1m commented May 27, 2022 •

edited

karlcow commented Jun 3, 2022 •

edited

`text-justify: distribute-all-lines`

`text-justify: distribute`

kojiishi commented Jun 6, 2022 •

edited

fantasai commented Jun 7, 2022 •

edited

nt1m commented Dec 28, 2022 •

edited