Beautiful Japanese line break for the Web

CJK languages such as Japanese lack clues like spacing and hyphenation to organize line breaks. In this talk, I'd like to describe Japanese line break techniques for the Web and introduce some tools to solve the problem.

Source code:
- https://codepen.io/tamanyan/pen/gOoOdVJ
Qiita:
- https://qiita.com/tamanyan/items/e37e76b7743c59235995
- https://qiita.com/tamanyan/items/aab0d41caef4a6f21ad1

Transcript

1. Beautiful Japanese line break for the Web English Night #14, @tamanyan55
2. Taketo Yoshida @tamanyan55 Software Development Engineer Github: https://github.com/tamanyan Twitter: https://twitter.com/tamanyan55 Adobe Japan R&D Interests: Frontend (React/Next.js), NLP, Localization Tech
3. Difficult to organize Japanese line break Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. English text 吾輩は猫である。名前はまだ無い。どこで生れたかと んと見当がつかぬ。何でも薄暗いじめじめした所で ニャーニャー泣いていた事だけは記憶している。吾輩 はここで始めて人間というものを見た。しかもあとで聞く とそれは書生という人間中で一番獰悪な種族であった そうだ。この書生というのは時々我々を捕えて煮て食う という話である。しかしその当時は何という考もなかっ たから別段恐しいとも思わなかった。ただ彼の掌に載 せられてスーと持ち上げられた時何だかフワフワした 感じがあったばかりである。掌の上で少し落ちついて書 生の顔を見たのがいわゆる人間というものの見始であ ろう。この時妙なものだと思った感じが今でも残ってい る。第一毛をもって装飾されべきはずの顔がつるつるし てまるで薬缶だ。その後猫にもだいぶ逢ったがこんな 片輪には一度も出会わした事がない。 Japanese text
4. 3 keys to solve the problem 🤔 1. word-break: keep-all (CSS property) 3. overflow-wrap: break-word (CSS property) 2. <wbr> (HTML tag)
5. Base HTML and CSS
6. 1. word-break: keep-all (CSS property) word-break: keep-all does NOT allow CJK (Chinese, Japanese, Korean) line breaks.
7. word-break: keep-all
8. 2. <wbr> (HTML tag) The <wbr> (Word Break Opportunity) tag specifies where in a text it would be ok to add a line break.
9. word-break: keep-all + <wbr>
10. word-break: keep-all + <wbr> Chunk
11. A part of text (chunk) overflows when shrinking browser word-break: keep-all + <wbr>
12. word-break: keep-all + <wbr> A part of text overflows when shrinking browser Chunk
13. 3. overflow-wrap: break-word (CSS Property) To prevent overflow, unbreakable words (chunk) allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line.
14. word-break: keep-all + <wbr> + overflow-wrap: break-word
15. word-break: keep-all + <wbr> + overflow-wrap: break-word The Layout is not broken when shrinking browser 🥰
16. Do we want to add <wbr> manually?
17. Google BudouX
18. 3 keys to solve the problem of Japanese line break 1. word-break: keep-all (CSS property) 3. overflow-wrap: break-word (CSS property) 2. <wbr> (HTML tag)
19. Give me likes 🙏 https://qiita.com/tamanyan/items/e37e76 b7743c59235995 https://qiita.com/tamanyan/items/aab0d41 caef4a6f21ad1