Styles: Better balance for headings in Japanese, Korean

[ryelle]

See #150, #123. We've established that text-wrap: balance doesn't work well for Japanese, but words can still be cut off at the end of a line, and the headings are not visually balanced. Balance alone doesn't work well for Korean either, as it also defaults to cutting off words.

Here's an example of the problem— the red is around a single word split between the lines.

This proposes an alternate fix to #123, where we don't need to set and override a theme.json variable but instead intelligently apply the balanced wrapping by taking advantage of an early CSS property for phrase detection in Japanese. This allows the browser to process the text and break at words.

This also adds the keep-all fix for Korean, which keeps words together and just uses spaces for line wrapping.

With both of those properties, text-wrap: balance works similarly to how it does in English, balancing headings without breaking words.

cc-ing some previously involved people — @taggon @mkismy @t-hamano

Screenshots

In the below screenshots, we have the "before" state where balance was disabled. The "After" is in Chrome, where phrase detection (word-wrap: auto-phrase) exists so we can balance text, and the last column is Firefox, where we don't have phrase detection, so balance is still disabled.

Before	After (Chrome, or Safari with feature flag)	After (Firefox)

This last example ^ seems a little awkward, I think the line splitter doesn't know how to handle the version number, and "メンテナンスリリース" is not parsed as two words by the phrase detection algorithm (because it's a loan word?)

There are no browser concerns with word-wrap: keep-all, so this looks the same across all. On small screens, keep-all is removed to prevent overflow on large text.

Before	After

How to test the changes in this Pull Request:

1. Apply the PR to the parent theme
2. Start up the main theme environment with Japanese or Korean
3. View the homepage, other pages
4. Headings should be balanced, but not break up words. On Korean you can see the spaces in inspect element. For Japanese it's easier to check if you speak the language… I relied a lot on my college Japanese class + google translate 😅

[t-hamano]

Thanks for the PR!

This may be a personal feeling, but it is very common for Japanese to wrap in the middle of a word on the web, so over-optimization might actually make the text harder to read.

In other words, applying both word-break: auto-phrase and text-wrap: balance seems redundant to me. word-break: auto-phrase alone seems sufficient.

An example of an about page. Note the wrapping of the three headings:

• WordPress はすべての人のために設計されています。
• WordPress はオープンソースのソフトウェアです。
• WordPress は歓迎的でインクルーシブです。

Default	word-break: auto-phrase only	word-break: auto-phrase and text-wrap: balance

This last example ^ seems a little awkward, I think the line splitter doesn't know how to handle the version number, and "メンテナンスリリース" is not parsed as two words by the phrase detection algorithm (because it's a loan word?)

I don't know the cause, but I think this is acceptable.

This also adds the "keep-all" fix for Korean, which keeps words together and just uses spaces for line wrapping.
There are no browser concerns with "word-wrap: keep-all", so this looks the same across all. On small screens, "keep-all" is removed to prevent overflow on large text.

I'm not familiar with Korean, but can we use overflow-wrap: anywhere?

.selector {
	&:lang(ko) {
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
}

cc @miminari and @nukaga who were involved in creating the Japanese version design file

[ryelle]

In other words, applying both word-break: auto-phrase and text-wrap: balance seems redundant to me.

They do two different things— text-wrap: balance is for design, so that headings (in any language) have roughly equal length when on multiple lines. word-break: auto-phrase is to keep the words together as best as possible, regardless of balance or not. The intention here is to use the balanced look that design requested across all locales, while avoiding the broken words issue.

An example of an about page. Note the wrapping of the three headings:

Ah, that's really strange because those don't look like headings. It looks awkward on English too. Since the About page has special styling, we should probably just remove the balanced wrapping on these 3 entirely.

[nukaga]

Hello.

I noticed that when this CSS is applied, it sometimes feels unnatural in Japanese. This might be because, in Japanese typography, it is generally acceptable for body text to break within words, but for headings, breaking within words is usually avoided.

Would it be possible to ensure that this CSS applies only to headings and does not affect body text? I believe this would make the text feel more natural in Japanese.

[ryelle]

Would it be possible to ensure that this CSS applies only to headings and does not affect body text? I believe this would make the text feel more natural in Japanese.

It should only apply to headings currently. There may be places where headings don't look like headings (the About page mentioned by @t-hamano), and I will fix that by removing the balanced wrap there.

[nukaga]

Thank you very much. I appreciate your attention to the use of language in both Japanese and Korean.
And I think this improvement is good.
If you encounter any strange issues after applying this, I would be happy to consult with you again.

[t-hamano]

Regarding the Japanese locale, I think it's ready to ship. Regarding the Korean locale, do we try the below approach?

I'm not familiar with Korean, but can we use overflow-wrap: anywhere?

.selector {
	&:lang(ko) {
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
}

[miminari]

Thank you for this discussion. I believe the widows and orphans issue mainly affects Latin-based languages, not Japanese. So, please avoid using this CSS property for Japanese body text.

Also, I’m a bit skeptical about implementing this in a CMS—it seems like overkill at this point. Whether it improves readability or makes it harder to read, even for headlines, would likely depend on a case-by-case basis in Japanese.

Since our languages follow different systems, I think this is an area where we need to handle the translation manually. The only thing we can do is enable or disable the inserted <br> for small-width media, right?

[ryelle]

Thank you for this discussion. I believe the widows and orphans issue mainly affects Latin-based languages, not Japanese. So, please avoid using this CSS property for Japanese body text.

This only applies to headings. I had wondered about body text, but I've gotten plenty of feedback to not use this there 🙂

Also, I’m a bit skeptical about implementing this in a CMS—it seems like overkill at this point. Whether it improves readability or makes it harder to read, even for headlines, would likely depend on a case-by-case basis in Japanese.

You can add zero-width spaces in the text to indicate where the browser should wrap. So you can still break where you want to in translated headings.

Also, just to be clear, this is for the WordPress.org site, not WordPress core.

Regarding the Korean locale, do we try the below approach?

I'm not familiar with Korean, but can we use overflow-wrap: anywhere?

It's a good suggestion, I hadn't tried it. But it still tries to keep other words on one line, so I think it looks strange. I would like to hear from a native Korean speaker, though.

overflow-wrap: anywhere	Mobile breakpoint

[taggon]

The overflow-wrap: anywhere; style does not work for Korean. It wraps the headline at awkward positions, making it look weird.

Ideally, the headline should look like this:

[miminari]

@ryelle Thank you for reply.

You can add zero-width spaces in the text to indicate where the browser should wrap. So you can still break where you want to in translated headings.

Also, just to be clear, this is for the WordPress.org site, not WordPress core.

I know those. So please don't add these CSS for Japanese.
At this time, I do not believe it is possible to try to control this kind of style in Japanese, even in headlines.
We have so different language system.
Let's wait a little longer for CSS to evolve.

[torounit]

@ryelle I think it is a good improvement regarding the Japanese locale.

[ryelle]

Ideally, the headline should look like this:

@taggon I know there are only two words there, but it does need to wrap onto a third line somehow. It's already breaking out of the container in your screenshot. The end of the heading container is about where the arrow is. You can see how this wouldn't work at a smaller screen size (the red outline is the element container):

[t-hamano]

I would like to explain a bit more specifically.

In Japanese, there are no spaces between words. Therefore, we split words in our heads depending on the context and the context before and after, and try to understand the meaning of the sentence.

word-break: auto-phrase is certainly useful, but it is not perfect. As far as I know, there is no way to split words flexibly and accurately with current web technology.

Let's take an example in English. Imagine the string Wearenowhere. This string is expected to be We are nowhere from the context. However, what if it is wrapped by CSS as follows? We may imagine a different meaning, We are now here:

Wearenow
here

This means that if automatic line breaks are introduced, something like this could happen in Japanese. I am concerned that such problems could also occur in Korean.

Given these concerns, I would like to know the background and reasons why this PR was submitted in the first place.

[ryelle]

There are two parts to this and they relate to each other. Note that both of these apply to headings only (and only apply when they wrap to multiple lines).

1. Use auto-phrase to break at whole-words. This uses machine learning in the browser to identify where line breaks could occur. You can test the algorithm itself here: https://google.github.io/budoux/. This could be useful regardless of point 2, even if you’re used to reading broken words.
2. Use balance to wrap headings so that they look nicer, visually. It’s true that Japanese doesn’t have the same orphan issue that English does, but it doesn’t look good when one character falls to the next line. It’s not about readability— orphans in English are also perfectly readable.

When we tried to implement balance across the site before, there was feedback that it caused unexpected breaks. This PR is an attempt at bringing balance back, while keeping word-phrases together. This brings that design/visual improvement in while keeping the Japanese readable.

However, if you’ve tried it and the auto-phrase algorithm is wrong too often, then I’m fine to remove it and just ship the Korean fix. In my testing, it inserted line breaks after particles usually, so I assumed it was breaking at logical word-breaks.

Here’s another example of a page with many long headings— do these break at appropriate places?

Long screenshot of FAQ page

I am concerned that such problems could also occur in Korean.

Korean doesn’t use auto-phrase, the change here updates the wrapping to respect the spaces in text. So we shouldn't see the same issue.

[t-hamano]

Okay, let's use this approach for Japanese locale for now. If we find any problems, we'll consider a different approach.