[css-text][text-spacing] Visual regressions of line-start at portals and news sites

@fantasai

The current initial value of the text-spacing-trim property is space-first. This was chosen because the ideal value trim-auto turned out to break novel sites at #2462.

From dogfooding a prototype, the space-first turned out to regresss portal sites and news sites. The regressions were found at MSN Japan and Google News, occuring multiple times a day. Some consider this a minor visual regression, while others consider a critically blocking regression.

To summairze a long Japanese discussion at JLTF:

Most think trim-auto is the ideal value for body text and headlines. Note, iOS 17/macOS Sonoma applies this style by default to their native controls.
trim-auto still breaks documents using a style used by some novels, as reported at [css-text-4] Propose 'text-spacing: space-first' (trim-start-except-first-line) as a normal behavior #2462, while space-first doesn't.
For other sites, trim-auto is ideal. space-first is a) less ideal for body text, b) quite strange for headlines, and c) critically regresses headline lists seen in portal top pages, news sites, blog sites, etc. (note the criticalness is controversial, some people consider it's minor in all cases, while others think critically blocking.)

From the feedback so far to the CSS prorotype, Android, and iOS, I think users/authors are particular about:

Line start >>>> autospace >> adjuscent > line end

At this point, I can't find options other than defining a new value that doesn't trim line-start at all, and make it initial.

/cc @fantasai @frivoal @nt1m @vitorroriz @Clqsin45 @MurakamiShinyu @himorin @kidayasuo

@kojiishi

@kojiishi Thanks for reporting this. Real world experience here is very useful.

At this point, I can't find options other than defining a new value that doesn't trim line-start at all, and make it initial.

I am not sure I follow, as you also said that most people though that trim-auto was the ideal value. Is it because not trimming at all gives results that are more consistent than space-first, even if they're not great?

Maybe we do need a new value, but I wonder how much of this problem we can address using UA stylesheets, for example by setting text-spacing: trim-auto on h1, h2… and maybe also on dt, dd, li… even if the initial value remains space-first?

@frivoal

@frivoal's idea of augmenting the UA stylesheet to have fine-tuned defaults balancing compat and ideal rendering taken in account seems reasonable to me. Might be hard, but worth experimenting.

@frivoal

@frivoal

Is it because not trimming at all gives results that are more consistent than space-first, even if they're not great?

Yes, it's acceptable, though not great. It doesn't change the visual of line-start from without the feature implemented, so no improvements on line-start, but it doesn't regress. In these examples screenshot of space-first (1, 2), a) trimming both open parenthesis at line 1 and line 2 is ideal, b) not triming both is acceptable, and c) trimming only one of them is quite bad, especially for headlines. It's the desired behavior for some styles of novel body text though, and hence space-first is defined so.

Maybe we do need a new value, but I wonder how much of this problem we can address using UA stylesheets, for example by setting text-spacing: trim-auto on h1, h2… and maybe also on dt, dd, li… even if the initial value remains space-first?

Good idea. This is not easy though, as the problem is about web-compat of existing sites, and they use <div> quite often.

If we were to make trim-auto as the default, Aozorabunko for example uses <div> and <br>.
If we were to make space-first as the default, MSN Japan, Google News Japan for examples use <div>.

I mean, adding UA stylesheet can't help improving the initial value due to web-compat, but adding trim-auto to h1, h2, li, etc. is a great idea.

@kojiishi

Thank you @kojiishi for summarizing the discussion on the JLReq TF mailing list.

I agree with @nt1m that @frivoal’s idea is worth pursuing as it can apply the ideal trim-auto on headings and lists while maintaining compatibility.

The criticalness of regressions for existing content by changing the initial behavior vary by who you ask, this table shows the "worst - best" personal opinion range for each case from the Japanese discussion:

	`trim-auto`	`space-first`	No trimming at line-start
e-Books (incl. sites)	Critical - Better	Matches one of common publishers' styles	Fine (No changes)
Headline lists (portals, news, etc.)	Ideal	Critical - Better	Fine (No changes)
Headings	Fine - Ideal	Regress - Better	Fine - Ideal (No changes)
Lists	Fine - Ideal	Critical - Better	Fine - Ideal (No changes)
Body without first-line indent (common on the web)	Ideal	Regress - Better	Fine (No changes)
Body with space-indented (common in novels)	Ideal	Ideal	Fine (No changes)
Body with `text-indent`ed (rare)	Ideal	Regress - Better	Fine (No changes)

The "no trimming" option was more favored decades ago, but I think the trend is gradually moving towards trim-auto.

Kobayashi-sensei said he will give more thoughts on each use cases, so this is preliminary.

Thanks for summarizing the criticalness on each case. I'd like to add my opinion.

I think the "Headline lists" with space-first will be "Regress or Okay" rather than "Critical" and it won't be a show-stopper for us. (As I wrote in the Japanese ML, I feel space-first is better than "No trimming at line-start" in this case, but I understand some people may feel this is a regression.)

Also the "Body with text-indented" with space-first will be "Okay" rather than "Regress". See the example below:

<style>
p { margin: 0; text-indent: 1em; }
</style>
<p>「あいうえお」かきくけこさしすせそ「たちつてとなにぬねの」はひふへほまみむめもやゆよ。</p>

The result of "No trimming at line-start" will be:

　「あいうえお」かきくけこさしすせそ
「たちつてとなにぬねの」はひふへほま
みむめもやゆよ。

And the result of "space-first" will be:

　「あいうえお」かきくけこさしすせそ
｢たちつてとなにぬねの」はひふへほま
みむめもやゆよ。

I feel the result of "space-first" is much better than "No trimming at line-start".

And I think there are more cases where trim-auto will be "Critical" or "Regress". Some web pages with elaborate visual design may use positioning properties for span with fullwidth opening brackets (e.g. <span style="position: …">「</span>) to adjust the spacing or to achieve a hanging opening punctuation effect or some special effect. In such cases, the layout will be broken if trim-auto becomes the default.

@kojiishi

Thank you @kojiishi for the summary.

(update: I will take back the following part, as this is the style EBPAJ EPUB 3 File Creation Guide recommends)
One comment. I am not sure if the “Novel” row can be generalized as a novel in general. The text data mentioned in #2462 is created in a specific way to workaround missing functionalities in CSS. To achieve half-width space before the opening bracket in the full-width indentation style, it inserts a full-width space except when the first character of the paragraph is an opening bracket. The first row is representing text data prepared in this specific way.

Related to my previous comment, is there a way to achieve the “one full-width” indentation style? The text-indent property in the Text Module Level 4 does not seem to support it but it might be just my misunderstanding.

I feel the result of "space-first" is much better than "No trimming at line-start".

I personally don't agree, the table in #9511 (comment) is to pick up all voices, so updated. It was "the worst case list" but now updated to "the worst - best range list". I hope this looks better.

One comment. I am not sure if the “Novel” row can be generalized as a novel in general.

How about e-Books? Or if you have suggestion, that helps. I agree the style sometimes happens in non-novels or non-e-Books sites, but IIUC it's considered "critical" for e-Books sites, no?

@kojiishi

@kojiishi

I personally don't agree, the table in #9511 (comment) is to pick up all voices, so updated. It was "the worst case list" but now updated to "the worst - best range list". I hope this looks better.

Thanks! Now this table looks very good and interesting. In my feeling, all "Ok"s in the space-first column will be "Better", as I commented before ("I feel space-first is better than "No trimming at line-start" in this case, but I understand some people may feel this is a regression.").

Done.

[text-autospace][text-spacing-trim] Update `text-spacing` shorthand

Bug 1876262 [wpt PR 44162] - [text-autospace][text-spacing-trim] Upda…

Adjust syntax of text-spacing[-trim] to match CSSWG resolution

Adjust behavior of existing tests to match CSS spec change

[text-autospace][text-spacing-trim] Update `text-spacing` shorthand

Bug 1871221 [wpt PR 43766] - Text spacing trim revamp, a=testonly

Bug 1876262 [wpt PR 44162] - [text-autospace][text-spacing-trim] Upda…

Navigation Menu

Repository navigation

[css-text][text-spacing] Visual regressions of line-start at portals and news sites #9511

59 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[css-text][text-spacing] Visual regressions of line-start at portals and news sites #9511

Description

Activity

frivoal commented on Oct 23, 2023

kidayasuo commented on Oct 23, 2023

kojiishi commented on Oct 23, 2023

nt1m commented on Oct 23, 2023

kojiishi commented on Oct 23, 2023

kojiishi commented on Oct 23, 2023

kidayasuo commented on Oct 23, 2023

kojiishi commented on Oct 23, 2023

MurakamiShinyu commented on Oct 23, 2023

kidayasuo commented on Oct 24, 2023

kidayasuo commented on Oct 24, 2023

kojiishi commented on Oct 24, 2023

kojiishi commented on Oct 24, 2023

MurakamiShinyu commented on Oct 24, 2023

kojiishi commented on Oct 24, 2023

59 remaining items

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions