Slide 1

Slide 1 text

Beautiful Japanese line break for the Web English Night #14, @tamanyan55

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

3 keys to solve the problem 🤔 1. word-break: keep-all (CSS property) 3. overflow-wrap: break-word (CSS property) 2. (HTML tag)

Slide 5

Slide 5 text

Base HTML and CSS

Slide 6

Slide 6 text

1. word-break: keep-all (CSS property) word-break: keep-all does NOT allow CJK (Chinese, Japanese, Korean) line breaks.

Slide 7

Slide 7 text

word-break: keep-all

Slide 8

Slide 8 text

2. (HTML tag) The (Word Break Opportunity) tag specifies where in a text it would be ok to add a line break.

Slide 9

Slide 9 text

word-break: keep-all +

Slide 10

Slide 10 text

word-break: keep-all + Chunk

Slide 11

Slide 11 text

A part of text (chunk) overflows when shrinking browser word-break: keep-all +

Slide 12

Slide 12 text

word-break: keep-all + A part of text overflows when shrinking browser Chunk

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

word-break: keep-all + + overflow-wrap: break-word

Slide 15

Slide 15 text

word-break: keep-all + + overflow-wrap: break-word The Layout is not broken when shrinking browser 🥰

Slide 16

Slide 16 text

Do we want to add manually?

Slide 17

Slide 17 text

Google BudouX

Slide 18

Slide 18 text

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. (HTML tag)

Slide 19

Slide 19 text

Give me likes 🙏 https://qiita.com/tamanyan/items/e37e76 b7743c59235995 https://qiita.com/tamanyan/items/aab0d41 caef4a6f21ad1