Issue 141792 in chromium: "word-break:keep-all" not supported (for control of word-wrapping in CJK text)

[chro...@googlecode.com]

Status: Unconfirmed
Owner: ----
Labels: Area-Compat Type-Bug Pri-2

New issue 141792 by cschu...@mocap.com: "word-break:keep-all" not supported
(for control of word-wrapping in CJK text)
http://code.google.com/p/chromium/issues/detail?id=141792

Chrome Version : 21.0.1180.57
URL :http://www.mocap.com.cn/mocap-all-products.html
Safari 5:FAIL
Firefox 14:FAIL
Firefox 15:OK
IE 7/8/9:OK

What steps will reproduce the problem?
1. Apply "word-break: keep-all" to a fix-width element which contains CJK
(Chinese, Japanese, Korean) characters.



What is the expected result?
When "word-break:keep-all" is applied to an element, word-wrapping should
not occur between CJK characters, but only at spaces (including zero-width
spaces) and any other non-CJK characters (punctuation, wbr tags, br tags,
etc). This allows CJK text to line-break in a manner similar to western
text (wrapping occurs only on spaces & punctuation)

What happens instead?
word-wrapping occurs between any two CJK characters (normal behavior).


"word-break:keep-all" was a proprietary Microsoft setting that has existed
in IE since IE5, but which has recently made its way into CSS3 drafts.


CSS Text Level 3 - W3C Working Draft 12 April 2011
http://www.w3.org/TR/2011/WD-css3-text-20110412/#word-break

CSS Text Level 3 - W3C Working Draft 19 January 2012
http://www.w3.org/TR/css3-text/#word-break

CSS Text Level 3 - W3C Working Draft 9 August 2012
http://dev.w3.org/csswg/css3-text/#word-break


Support for "word-break:keep-all" will also be include in Firefox 15, due
to be release later in August 2012.

Chrome supports "word-break:normal" and "word-break:break-all", but
not "word-break:keep-all".

Without "word-break:keep-all", word-wrapping occurs between any two block
CJK characters. This setting allows you to control where breaks are allowed
to occur. The reason for wanting to do this is to prevent two characters
which make up phrase from being split up, for reasons of clarity, and for
aesthetic reasons -- A single character dangling below a complete line
looks "odd" (or so I'm told by my company's Chinese staff).

My original solution was to use "white-space:nowrap" and intersperse the
text with <wbr> tags. But this is an "ugly" solution, due to all thos
unsightly wbr the tags which have to added inline with the text. And, as
usual, this method works in every browser except one ... it fails in IE
(IE9 ignores wbr tags). This is particularly troublesome given IE's
dominance inside China.

I've attached an image showing Firefox15 correctly
supporting "word-break:keep-all", and the same section of text in chrome21
which ignores the property completely.




Attachments:
word-break_keep-all.png 119 KB

[chro...@googlecode.com]

Comment #2 on issue 141792 by christop...@gmail.com: "word-break:keep-all"

not supported (for control of word-wrapping in CJK text)
http://code.google.com/p/chromium/issues/detail?id=141792

This is pretty annoying. I just ran into the same issue. My fix was to
limit the height so overflow wouldn't show... it just loses its ellipse.
At least it looks great in IE!

[chro...@googlecode.com]

Comment #3 on issue 141792 by cschu...@mocap.com: "word-break:keep-all" not

supported (for control of word-wrapping in CJK text)
http://code.google.com/p/chromium/issues/detail?id=141792

See Webkit Bug#43917 "CSS3 'word-break: keep-all' is not supported"

https://bugs.webkit.org/show_bug.cgi?id=43917

[chro...@googlecode.com]

Updates:
Cc: js...@chromium.org esei...@chromium.org

Comment #8 on issue 141792 by js...@chromium.org: "word-break:keep-all" not

supported (for control of word-wrapping in CJK text)
http://code.google.com/p/chromium/issues/detail?id=141792

For word-break: keep-all, using a word-break iterator instead of line-break
iterator may do the job. I'll look into the possibility.

Because Chrome uses a version of ICU with a dictionary-based word breaking
(as mentioned in CSS3 spec), using word-break iterator will allow breaking
between words even when there's no inter-word space as in Chinese,
Japanese, Thai (and to a certain extent, Korean).

--
You received this message because this project is configured to send all
issue notifications to this address.
You may adjust your notification preferences at:
https://code.google.com/hosting/settings

[chro...@googlecode.com]

Comment #11 on issue 141792 by ko...@chromium.org: "word-break:keep-all"

not supported (for control of word-wrapping in CJK text)

https://code.google.com/p/chromium/issues/detail?id=141792

jshin, what the spec[1] says is not that complicated; just disable soft
wrap opportunities between "typographic letter units" (which is L*/N*
grapheme clusters).

If you want to break compound nouns in Korean, we probably need to spec
that in CSS by changing the meaning of break-all, or add another value.

[1]
http://mxr.mozilla.org/mozilla-central/source/layout/reftests/text/wordbreak-4a.html

[chro...@googlecode.com]

Comment #13 on issue 141792 by yunsik.j...@lge.com: "word-break:keep-all"

not supported (for control of word-wrapping in CJK text)

https://code.google.com/p/chromium/issues/detail?id=141792

I uploaded a patch for this: https://codereview.chromium.org/1094863007/

[chro...@googlecode.com]

Comment #14 on issue 141792 by js...@chromium.org: "word-break:keep-all"

not supported (for control of word-wrapping in CJK text)
https://code.google.com/p/chromium/issues/detail?id=141792

Thank, yunsik for the fix per spec.

@kojii:
I'm afraid the spec is too simplistic and it does not really meet the
requirement of 'real-life' usage for 'keep-all'. For Korean, it's more or
less OK (except for the compound-noun issues). When it comes to C/J, it
really does not help much, does it? We may discuss further in the css3 list.

[chro...@googlecode.com]

Comment #15 on issue 141792 by ko...@chromium.org: "word-break:keep-all"

not supported (for control of word-wrapping in CJK text)
https://code.google.com/p/chromium/issues/detail?id=141792

@jshin: good to hear that the spec works for Korean, since its primary use
case as I understand. I'm not aware of C/J use cases very much, look
forward to your feedback at www-style.

[chro...@googlecode.com]

Comment #17 on issue 141792 by
bugdro...@chromium.org: "word-break:keep-all" not supported (for control of
word-wrapping in CJK text)
https://code.google.com/p/chromium/issues/detail?id=141792#c17

The following revision refers to this bug:
http://src.chromium.org/viewvc/blink?view=rev&rev=194441

------------------------------------------------------------------
r194441 | yunsi...@lge.com | 2015-04-25T17:57:20.910887Z

Changed paths:
M
http://src.chromium.org/viewvc/blink/trunk/Source/core/layout/LayoutText.cpp?r1=194441&r2=194440&pathrev=194441
M
http://src.chromium.org/viewvc/blink/trunk/Source/core/style/ComputedStyleConstants.h?r1=194441&r2=194440&pathrev=194441
M
http://src.chromium.org/viewvc/blink/trunk/Source/platform/text/TextBreakIterator.cpp?r1=194441&r2=194440&pathrev=194441
A
http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css3-text/css3-word-break/css3-word-break-keep-all-expected.html?r1=194441&r2=194440&pathrev=194441
M
http://src.chromium.org/viewvc/blink/trunk/Source/core/css/parser/CSSParserFastPaths.cpp?r1=194441&r2=194440&pathrev=194441
A
http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css3-text/css3-word-break/css3-word-break-keep-all.html?r1=194441&r2=194440&pathrev=194441
M
http://src.chromium.org/viewvc/blink/trunk/Source/platform/text/TextBreakIterator.h?r1=194441&r2=194440&pathrev=194441
M
http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSValueKeywords.in?r1=194441&r2=194440&pathrev=194441
M
http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSPrimitiveValueMappings.h?r1=194441&r2=194440&pathrev=194441
M
http://src.chromium.org/viewvc/blink/trunk/Source/core/layout/line/BreakingContextInlineHeaders.h?r1=194441&r2=194440&pathrev=194441

Implement "word-break: keep-all" in CSS3 Text

This CL contains an implementation on "word-break: keep-all" which
suppresses soft wrap opportunity between letters (mostly in CJK).

http://dev.w3.org/csswg/css-text/#valdef-word-break-keep-all

BUG=141792

Review URL: https://codereview.chromium.org/1094863007
-----------------------------------------------------------------

[chro...@googlecode.com]

Comment #18 on issue 141792 by ko...@google.com: "word-break:keep-all" not

supported (for control of word-wrapping in CJK text)
https://code.google.com/p/chromium/issues/detail?id=141792

@jshin: understood what you're talking about, and agree that we should
solve this problem.

There are two bad wrapping in your screenshot, and the second one can be
solved by keep-all because it has a delimiting space and both Kana/Kanji
are L*.

The first one is tough, it requires some dictionary-based text analysis. My
rough (but not proposed yet) idea is to allow text-wrap: balance[1] being
more intelligent, and/or Houdini API to allow determining wrapping[2], but
I'm open to other solutions if there were any.

[1] http://dev.w3.org/csswg/css-text-4/#valdef-text-wrap-balance
[2] https://lists.w3.org/Archives/Public/public-houdini/2015Mar/0001.html

[chro...@googlecode.com]

Comment #19 on issue 141792 by ko...@chromium.org: "word-break:keep-all"

[chro...@googlecode.com]

Updates:
Labels: Hotlist-Interop

Comment #20 on issue 141792 by
mikelawt...@chromium.org: "word-break:keep-all" not supported (for control

of word-wrapping in CJK text)
https://code.google.com/p/chromium/issues/detail?id=141792

(No comment was entered for this change.)

[chro...@googlecode.com]

Comment #22 on issue 141792 by
dstoc...@chromium.org: "word-break:keep-all" not supported (for control

of word-wrapping in CJK text)

https://code.google.com/p/chromium/issues/detail?id=141792

Does #17 fix this issue?

[chro...@googlecode.com]

Updates:
Status: Fixed

Comment #23 on issue 141792 by ko...@chromium.org: "word-break:keep-all"

not supported (for control of word-wrapping in CJK text)
https://code.google.com/p/chromium/issues/detail?id=141792

It looks like it's working. The originally reported site has changed, but I
confirmed at:
https://play.google.com/store?hl=ja

Thank you yunsik.jang@!!