TGViewer
mefody.dev mefody.dev @mefody_dev · 5.38K subscribers
Post #340 5.47K
Сбалансированные строки для японского и корейского языков

Мы в подкасте периодически обсуждаем, какой text-wrap: balance хороший для заголовков. Я к себе в блог это свойство затащил почти сразу, как про него узнал.

А вот Келли Чойс-Дван подсвечивает интересную проблему. Для языков, где есть пробелы как разделители слов, text-wrap: balance и правда хорош. Но есть языки, где пробелы либо не используются вовсе, либо есть разные подходы, в том числе и без пробелов. Например, в японском и корейском языках тексты без пробелов — вполне себе норма.

Допустим, у вас есть текст на японском, что-то вроде «Замечательный текст». И наведение красоты приводит к двум строчкам «Замечател / ьный текст». Что делать?

В Chromium-браузерах есть word-break: auto-phrase. Такая конструкция просит браузер проанализировать текст и не вставлять разрывы посреди слов. Под капотом у этого свойства machine learning, поддерживает далеко не все языки.

Как фолбек можно применить word-break: keep-all. Это специальное значение как раз для CJK-текстов (Chinese/Japanese/Korean), которое выключает разрывы слов для них в принципе.

Ну а вообще интересно было бы поизучать опыт японских или корейских пользователей. Ведь мы же как-то читаем сайты с дефисами-переносами для длинных слов, hyphens: auto, все дела. Возможно, если для удобства чтения сайта важно сохранять фразы на одной строке, то надо расставить переносы строк руками, а не доверять это дело автоматике, заточенной под англоязычный мир.

https://ryelle.codes/2025/04/typography-troubles-balancing-in-japanese-korean/
ryelle codes Typography troubles: Balancing lines in Japanese & Korean | ryelle codes Text wrapping works differently across languages. Here’s a look at how text-wrap: balance affects Japanese and Korean text—and what to do about it.
  • 👍 19
  • ❤‍🔥 2
  • 😐 2
  • ❤ 1
More from @mefody_dev
  1. Sep 23, 2026Цена ошибок гидрации В React есть много ухищрений, чтобы серверный кусок страницы обновилс…
  2. Sep 16, 2026Какие анимации более производительные: CSS или JS? Лучше пару раз увидеть, чем много откуд…
  3. Sep 14, 2026Единица измерения lh Если коротко, то 1lh = 1 line height. И это не размер шрифта, который…
  4. Sep 11, 2026<mermaid-element> Ещё одна полезная библиотека. Брамус собрал кастомный элемент, которому…
  5. Sep 10, 2026MicroLighter Дейв Руперт собрал маленькую библиотечку, которая делает подсветку кода. «Ещё…
  6. Sep 9, 2026Вам больше не нужен initial-scale Стопудово где-то у вас в вёрстке есть <meta name="viewpo…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →