Typography: Add word break option

[MYIG]

I suggest about readability few days ago and I think it fixed. Thank you so much. But... It is not better in real. it is like Hide ones head in the sand...

Readability in title becomes better!

But it is still bad in real.

it looks bad in editor too.

It looks bad too.

it looks bad too in archive too.

That green circles are all one word. But they break. even title break too... it doesn't break words in title only in editor. words in content is broken too... It is not because of gutenberg?

[designsimply]

To confirm, the line breaks are working properly for the title field in the editor but the line breaks are not working properly for paragraphs in the editor or when the published posts are viewed directly on the web?

Would it be possible for you to include sample text you used above so that I can use the same text in my own testing? I want to compare what you have typed in the screenshots to my own test.

May I please also know what theme you are using?

[MYIG]

both. in editor and on the web. the line breaks works well only title in editor.

I updated gutenberg 4.5.1 but it don't change.

제가 프로 음악가가 되지는 않겠습니다만 예전부터 작곡을 해보고 싶었습니다. 한때는 꿈이었지만... 말 그대로 어렸을적 일이라서... 여튼 그러다보니 아이패드 에어 2를 구입했을 때부터 아이패드로 음악을 만드는 것에 대해 생각해봤습니다. 아이패드가 앱들이 성능도 솔직히 가격 생각하면 엄청나게 좋은 편이고 UI도 좋으면서도 개성도 풍부하고 다 좋은데 일일이 터치해서 음악을 만드는 것은 매우 불편합니다. 특히 미디를 할 때 말이죠. FL Studio를 가끔 쓰는데 컴퓨터로 음악 만들 때 마우스로도 조작하기 꽤나 불편하지만 그래도 이 친구는 키보드 단축키정도는 있습니다. 물론 컴퓨터로 할 때나 아이패드로 할 때나 마우스, 키보드, 혹은 터치로 하기보다는(다만 개인적으로 서피스에 있는 터치로 PC 버전 DAW를 할수 있다면 꽤나 편하게 하실 수 있지 않을까 합니다.) 미디 컨트롤러(= 마스터 키보드)를 사용하는 것이 더 좋을 것임은 자명합니다. 저는 Ckey 37Key라는 친구를 구입했습니다.

it is just Korean sample^^. line breaks don't work here too.

I use a tool called 'oxygen' and it said it is not theme. but I think it is not because of these tools. because I find other korean has same problem too.

[MYIG]

hmm... korean in wordpress is becoming better and better. but I want it is most important in readability... please fix it.

[taggon]

For those who tackle this, I add some information here:

• I think this user wants all words to be preserved, not broken. (단어가 분리되지 않았으면 좋겠다고 보고하신 거 맞나요?) @MYIG Am I correct?
• Line wraps in CJK work differently from latin based charset. CJK words can break at line ends even with overflow-wrap: break-word or word-break: normal. Only word-break: keep-all preserves CJK words.
• As I understand, Chinese and Japanese text don't have white spaces between words but Korean text does. (Correct me if I'm wrong)
• So the fix may need to set word-break: keep-all for .block-editor-block-list__block only when the locale is Korean.

cc @designsimply and @youknowriad

---

@MYIG Gutenberg renders the editor only. The broken words in the web page headings are supposed to be generated by the theme you're using.
(In Korean) 구텐버그는 에디터만 그립니다. 웹 페이지 제목에서 단어가 분리되는 건 사용하고 계신 테마에서 담당하는 부분일 것 같습니다.

[StevenDufresne]

I am in agreement with @taggon on this.

• The theme should be responsible for wrapping the text. Gutenberg shouldn't play a role in that.
• We could add word-break: keep-all directly into the style editor. I'm not certain it should be restricted to korean though. Could it not just be added for all languages?

[MYIG]

@taggon I don't know about chinese and japanese, but I feel Korean have those problem in whole web. Most korean website have same problem, not only wordpress... So I think gutenberg can't do it maybe... I just had hope but I feel sad...

I don't know about CJK and you talked about overflow-wrap: break-word or word-break: normal. Only word-break: keep-all preserves CJK words. How can I know about it more? I am not web designer...

[MYIG]

@StevenDufresne I don't know about word-break: keep-all, so I don't know it will fix Korean problem or not.

[StevenDufresne]

@StevenDufresne I don't know about word-break: keep-all, so I don't know it will fix Korean problem or not.

Sorry, I was not asking you specifically, I was asking everyone. I feel like we can add it as default since Gutenberg isn't a wysiwyg editor and it shouldn't have a negative impact on other languages.

For clarification,word-break: keep-all tells the browser to keep the words together and place the word on the next line if its too long.

[MYIG]

@StevenDufresne Korean user is just 0.2% of wordpress world. But you will care whole wordpress users. Thank you so much about it!!

[taggon]

@taggon I don't know about chinese and japanese, but I feel Korean have those problem in whole web. Most korean website have same problem, not only wordpress... So I think gutenberg can't do it maybe... I just had hope but I feel sad...

@MYIG 위에 달았던 코멘트 대부분은 나중에 이 문제를 다룰 개발자를 위해 남겨둔 정보입니다. 한국어로 썼던 부분만 확인하시면 됩니다.
(in English) Most of the information I left was for the engineers or designers who will handle this issue. Please don't mind that.

[MYIG]

@taggon okay thank you^^

[talldan]

I've renamed this issue so it's a bit easier to find and added some more relevant labels.

I imagine this could be a setting in the global styles typography panel, though perhaps it could equally be a setting related to internationalization? Feels more like a typography thing to me.

Not sure if it'd also be needed for individual blocks too (perhaps for mixed language sites?), starting off with a global option could be an easy way to go.