- From: Myles C. Maxfield via GitHub <sysbot+gh@w3.org>
- Date: Tue, 06 Jun 2023 09:40:43 +0000
- To: public-css-archive@w3.org
litherum has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-text-4] Avoiding line breaks in the middle of Japanese words == Historically, in web browsers, line breaks are allowed between most Japanese characters. This is fine, but it can be somewhat easier to read if there weren't line breaks in the middle of Japanese words. Here's an [example](https://www.apple.com/jp/apple-tv-4k/):  We've been [working](https://developer.apple.com/documentation/corefoundation/cfstringtokenizer?changes=lates_1&language=objc) on some new line breaking behavior with the intent on keeping words together:  We've found that this makes it a little bit easier to read. (One interesting side-effect is that, because there are significantly fewer line breaking opportunities throughout the text, the right edge, which used to be flush, now becomes ragged.) We've enabled this behavior on our upcoming operating systems for UI text and some text content, and it's been working pretty well. However, there is a performance cost to this dictionary-based approach, so we can't simply just turn it on for all content. We were hoping for the working group's advice about the best way to hook this new behavior up to the web. There are a few possible options, we think: 1. (The null hypothesis) Don't hook it up; do nothing. Continue to having Japanese line breaking worse on the web than it is in native content. 2. Hook it up to [`text-rendering: optimizeLegibility`](https://svgwg.org/svg2-draft/painting.html#TextRenderingProperty). There isn't really a spec for `optimizeLegibility`, but it isn't really a very good fit - this isn't really about text rendering. 3. Hook it up to [`text-wrap: pretty`](https://drafts.csswg.org/css-text-4/#valdef-text-wrap-pretty). This also isn't really a perfect fit, as that value is supposed to be about multiline text breaking. OTOH, any multi-line text algorithm would probably try to keep Japanese words together, so maybe this could be seen as a first baby step toward the full multi-line algorithm. 4. Hook it up to [`word-break: keep-all`](https://drafts.csswg.org/css-text-4/#valdef-word-break-keep-all). This is probably the closest fit we have already existing in CSS, as `keep-all` is meant to keep Korean words together. However, the spec is fairly prescriptive about exactly which characters have line breaking opportunities between them, and is currently incompatible with a dictionary-based approach. 6. Add a new value, possibly to [`word-break`](https://drafts.csswg.org/css-text-4/#word-break-property), or possibly to [`line-break`](https://drafts.csswg.org/css-text-4/#propdef-line-break), to explicitly turn on this kind of line breaking. This is probably the safest approach. 7. Use some kind of heuristic to apply it to what we detect to be headlines or UI text. I don't think this is a good idea, because any heuristic would probably need a new CSS property anyway to disable the heuristic, and if we're going to add new API surface to the web, we might as well just add a new value that specifically turns this behavior on and off. 8. Hook it up for all text, unconditionally. This isn't really an option, because of performance; I'm only including it here for completeness. Here are some more screenshots to see the differences where I hardcoded the new behavior to be enabled (click for full quality). Please note that these line breakers are a work in progress; we are aware of some problems, and are still improving them. Before / After <img width="200" src="https://github.com/w3c/csswg-drafts/assets/918903/7edc9828-0a70-4188-8f9f-ad0e873c5771"><img width="200" src="https://github.com/w3c/csswg-drafts/assets/918903/6a325d7a-26c9-44d2-a907-bcc823356a24"> Before / After <img width="200" src="https://github.com/w3c/csswg-drafts/assets/918903/81df15d7-f563-4cb0-ad60-49ab9a0805b5"><img width="200" src="https://github.com/w3c/csswg-drafts/assets/918903/0e81bc76-bb32-4bc8-9d3d-4e06fc79b801"> Before / After <img width="200" src="https://github.com/w3c/csswg-drafts/assets/918903/c335e8da-faf7-40d0-8268-3d1951c90585"><img width="200" src="https://github.com/w3c/csswg-drafts/assets/918903/4128c377-274b-477a-bed7-c2d9d915302f"> Before / After <img width="200" src="https://github.com/w3c/csswg-drafts/assets/918903/41c9e64f-3486-4821-9666-a0c9aaf87913"><img width="200" src="https://github.com/w3c/csswg-drafts/assets/918903/7a2dc016-429e-4679-a96d-9ad4fd9d8d9e"> Before / After <img width="200" src="https://github.com/w3c/csswg-drafts/assets/918903/10881425-fa92-4df2-aa2c-29cedd304a53"><img width="200" src="https://github.com/w3c/csswg-drafts/assets/918903/a710b607-e8f2-4881-9024-4a75b783b83e"> Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8920 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 6 June 2023 09:40:45 UTC