Попробовал сегодня по-быстрому сделать удобочитаемые переносы слов заголовков статей на сайте defront. Оказалось, что не всё так просто.
Зачем нужна балансировка переносов. Браузеры не заботятся о читаемости текста при переносе слов, поэтому в блогах зачастую можно встретить такие переносы заголовков статей:
Причины отсутствия поддержки AVIF в
Safari
хотелось бы, чтобы текст выглядел так:
Причины отсутствия
поддержки AVIF в Safari
В последнем варианте текст сбалансирован и не отвлекает внимание.
Для решения этой проблемы можно воспользоваться готовыми балансировщиками переноса слов. Есть две популярные реализации: от New York Times и от Adobe. Реализация от Adobe для меня слишком тяжёлая, реализация от New York Times полегче, но она хорошо работает только с небольшими объёмами текста.
Реализация New York Times для небольших заголовков подходит идеально, также она работает быстрее балансировщика Adobe благодаря использованию простого алгоритма на базе бинарного поиска. Но у неё есть проблема с видимым сдвигом позиции слов. Дениэл Александерсен в статье про форк балансировщика от New York Times предлагает скрывать текст заголовка до тех пор, пока не сработает балансировка, но мне это кажется очень хрупким решением. Если по каким-то причинам скрипт окажется сломан, то пользователь не увидит заголовка статьи. Также есть сомнения, что все скринридеры будут хорошо интерпретировать появляющийся из ниоткуда заголовок статьи.
Ещё можно сделать автоматическую вставку
<br> в нужном месте разрыва заголовка. На больших экранах заголовки будут выглядеть хорошо, на маленьких экранах в редких случаях перенос будет выглядеть странно:
Использование
SomeNewApi
и
OtherNewApi
в Node.js
Также в стандарте CSS Text Level 4 есть упоминание CSS-свойства
text-wrap: balance. Оно было предложено Adobe в 2013 году, и его поддержки до сих пор нет ни в одном браузере.Сначала хотел использовать форк балансировщика New York Times, но его недостатки перевешивают все преимущества. Возможно, что потом попробую покопать в сторону варианта с
<br>, но пока оставлю всё без изменений. Балансировка переноса слов — это коварная штука. #html #ux #a11y
https://defront.ru/posts/2022/01-january/11-in-search-of-best-line-wrap-balance/