About Page: `text-wrap: balance;`adds unintended new lines in Japaneese

[wildworks]

In the about page of WordPress 6.5, text-wrap:balance is applied to the h1/h2/h3/h4 elements.

​https://github.com/WordPress/wordpress-develop/blob/8c91078a6ae92560f3025ec34eab9b1169ec2e27/src/wp-admin/css/about.css#L408

This may work beautifully in Latin languages, but it adds unintended new lines, at least in Japanese.

For example, let's take the heading "Add and manage fonts across your site" as an example. In English, it is displayed as follows:

Add and manage
fonts across your site

On the other hand, in Japanese, it is displayed as follows:

サイト全体へのフォ
ントの追加と管理

The words are wrapped in the middle, but if you compare it to English, it is similar to how it would be displayed as shown below.

Add and man
age fonts across your site

At least in Japanese, I would expect no wrapping at all, that is, the text would be wrapped to fit the width of the container.

I would be happy if someone could test what effect text-wrap:balance has on other CJK languages.

[wildworks]

Actual and expected display

[wildworks]

For reference, the Rosetta site has added processing to initialize text-wrap in specific locales.

​https://github.com/WordPress/wporg-parent-2021/pull/123/files#diff-c3c57846a44629bd890d3e51a426da0a83d4ea803f8bc40c622405ec82144445R75-R77

[desrosj]

My apologies that this never received attention during the 6.5 minor release cycles, @wildworks.

I was thinking now that 6.5 is unsupported, we should probably close this out as wontfix. But I checked the 6.6 About page and it seems that text-wrap: balance is still in use.

Moving this to 6.6.2 to hopefully address in the next minor release.

[wildworks]

@desrosj Thanks for the reply.

I checked to see if this problem occurs in 6.6.1, and it does exist. I would suggest either deleting text-wrap: balance; altogether, or not applying this style depending on the locale.

[hellofromTonya]

Discussed in today's bugscrub:

A patch and testing of the patch are needed. Keywords updated.

But as @wildworks noted, the patch needs to consider how it will affect other locales? Does removing text-wrap: balance; affect other locales? Need to test to find out.

FYI: Tentatively planning 6.6.2 RC1 for the week of Aug 19th.

[ryelle]

Replying to hellofromTonya:

But as @wildworks noted, the patch needs to consider how it will affect other locales? Does removing text-wrap: balance; affect other locales? Need to test to find out.

This was ​reported on the WordPress.org site as well, and the solution there was to only remove it on ​ja.w.org using text-wrap: unset. I haven't heard from any other locale that this is a problem on their sites, but that doesn't mean they're not out there.

I think design requested balance, though I can't find that discussion now. I know there is similar usage in Gutenberg.

Personally, I think the "balance" wrapping feels extreme in English too, I prefer "pretty" (where supported, not Firefox), which just prevents orphans.

So all of that is to say that it can be removed on just Japanese, but to change it everywhere would need input from a designer.

[wildworks]

Thanks everyone for your feedback.

I haven't found an ideal approach, but I can think of three approaches:

1. Use text-wrap:pretty instead of text-wrap:balance. This approach will have a bigger impact because it will change the wrapping position of headings in all locales.
2. Override text-wrap in specific locales. This approach would require a selector like html[lang="ja"], and using a selector hardcoded for a specific locale in the core may not be ideal.
3. Add word-break: auto-phrase. This value is only valid when lang="ja" is specified, so it will not affect other locales. However, it is not supported by Firefox and Safari (​MDN link).

This is a sample PR to conditionally add text-wrap property in about page CSS based on locale.
https://core.trac.wordpress.org/ticket/60892

If a language-specific correction is preferable, that is possible with only CSS:

.about__container :is(h1, h2, h3, h4):lang(ja) {
	text-wrap: unset;
}

And *if* someone identifies another language that needs the same style (for example, Korean), the languages could be grouped inside another :is().

.about__container :is(h1, h2, h3, h4):is(:lang(ja), :lang(ko)) {
	text-wrap: unset;
}

The :is() selector is ​compatible with browsers that WordPress admin supports.

The :is selector is probably the simplest and best one, and it certainly works:

Thanks, @t-hamano for the review.
I have addressed the comments in the new commit.

Sure @t-hamano,
I probably missed ​comment the second comment by @sabernhardt.
Added changes according to the suggestion.

[ryelle]

Looks like this is also an issue in Korean (see ​related comments here) — and there @gonom9 suggests adding word-break: keep-all; to keep words together. This works for Korean because there are spaces between words, trying to add this to Japanese created overflow.

I think the solution in ​PR 7209 is best for Japanese, plus a separate CSS rule for Korean adding word-break: keep-all;.

[wildworks]

This ticket was originally intended for Japanese only, but there might be other languages ​​to consider besides Korean, as mentioned by @ryelle.

For example, Chinese and Thai are languages ​​that don't typically use spaces between words. These languages ​​also wrap title text on the About page, but I don't have the knowledge to judge whether text with text-wrap:balance applied is easy to read or not in these languages.

If this ticket needs to take all languages ​​into account, it seems unrealistic to test each language individually and apply the appropriate text-wrap to each one. As mentioned in this comment, how about applying text-wrap: pretty; to all languages?

[wildworks]

Appearance differences depending on text-wrap value in Chinese

[wildworks]

Appearance differences depending on text-wrap value in Thai

[ryelle]

Replying to wildworks:

This ticket was originally intended for Japanese only

That's a fair point— in that case, the PR as it is could ship and fix the ticket.

If this ticket needs to take all languages into account, it seems unrealistic to test each language individually and apply the appropriate text-wrap to each one.

Maybe we can do the inverse here, and add balance for :lang(en)? If I understand the selector correctly, that should catch all English locales.

As mentioned in this comment, how about applying text-wrap: pretty; to all languages?

Again, this doesn't work in Firefox or Safari yet, but if we don't want to go case by case, that would work.

[wildworks]

add balance for :lang(en)? If I understand the selector correctly, that should catch all English locales.

This should be correct. Furthermore, what about adding text-wrap:pretty for languages ​​other than English? text-wrap:pretty should have no effect on CJK languages.

.about__container :is(h1, h2, h3, h4) {
	text-wrap: pretty;
}

.about__container :is(h1, h2, h3, h4):lang(en) {
	text-wrap: balance;
}

Hii @ryelle @t-hamano waiting for your final review. Addressed all suggested changes. 😃

@AKSHAT2802 Thanks for the update.

We are discussing in the core ticket what would be a more ideal approach.

Please see https://core.trac.wordpress.org/ticket/60892.

[ryelle]

Replying to wildworks:

This should be correct. Furthermore, what about adding text-wrap:pretty for languages ​​other than English? text-wrap:pretty should have no effect on CJK languages.

Sounds good to me— there will be people who are on browsers that don't have pretty support in languages where balance would still work (for example a Spanish user in Firefox), but that's better than the current situation where balance for everyone makes it hard to read.

[wildworks]

@ryelle Thanks for the reply.

So the code proposed in this comment (https://core.trac.wordpress.org/ticket/60892#comment:18) seems like the most logical approach for now.

Should we update the PR that @akshat2802 submitted? Or would it be better to create a new patch?

[wildworks]

This patch applies text-wrap:pretty to heading elements, and text-wrap:balance to heading elements in English locale only.

[wildworks]

I created a patch (patch.diff) based on this comment.

Even if the heading wrapping is unnatural in Japanese, we have no problem reading it. Therefore, I don't think this ticket is a big problem, but I would be happy if it was included in the 6.6 minor release.

[ryelle]

In 58976:

Help/About: Fix text wrapping on non-English locales.

In [57715], headings on the About pages were given text-wrap: balance. This rule causes unexpected breaks in non-latin langauges, e.g., Japanese, Korean. This fix sets the text-wrap to pretty for browsers that support it, and uses balance for English-only.

Props akshat2802, wildworks, ryelle, sabernhardt, hellofromTonya.
Fixes #60892.

[ryelle]

Reopening for a second committer to backport [58976], pinging @hellofromTonya since you mentioned doing that. and thanks for your help with the process!

[hellofromTonya]

Thanks for ping and committing it to trunk. Yes, I'll take care of reviewing and backporting to 6.6 branch.

[hellofromTonya]

[58976] LGTM.

I'm in the process of backporting it to the 6.6 branch.

[hellofromTonya]

In 58979:

Help/About: Fix text wrapping on non-English locales.

In [57715], headings on the About pages were given text-wrap: balance. This rule causes unexpected breaks in non-latin langauges, e.g., Japanese, Korean. This fix sets the text-wrap to pretty for browsers that support it, and uses balance for English-only.

Reviewed by hellofromTonya.
Merges [58976] to the 6.6 branch.

Props akshat2802, wildworks, ryelle, sabernhardt, hellofromTonya.
Fixes #60892.

Committed with a few tweaks via https://core.trac.wordpress.org/changeset/58976. Thanks everyone for your contributions 🌟