Forwarded from Defront — про фронтенд-разработку и не только (Alexander Myshov)
В поиске лучшего способа балансировки переносов слов
Попробовал сегодня по-быстрому сделать удобочитаемые переносы слов заголовков статей на сайте defront. Оказалось, что не всё так просто.
Зачем нужна балансировка переносов. Браузеры не заботятся о читаемости текста при переносе слов, поэтому в блогах зачастую можно встретить такие переносы заголовков статей:
хотелось бы, чтобы текст выглядел так:
В последнем варианте текст сбалансирован и не отвлекает внимание.
Для решения этой проблемы можно воспользоваться готовыми балансировщиками переноса слов. Есть две популярные реализации: от New York Times и от Adobe. Реализация от Adobe для меня слишком тяжёлая, реализация от New York Times полегче, но она хорошо работает только с небольшими объёмами текста.
Реализация New York Times для небольших заголовков подходит идеально также она работает быстрее балансировщика Adobe благодаря использованию простого алгоритма на базе бинарного поиска. Но у неё есть проблема с видимым сдвигом позиции слов. Дениэл Александерсен в статье про форк балансеровщика от New York Times предлагает скрывать текст заголовка до тех пор, пока не сработает балансировка, но мне это кажется очень хрупким решением. Если по каким-то причинам скрипт окажется сломан, то пользователь не увидит заголовка статьи. Также есть сомнения, что все скринридеры будут хорошо интерпретировать появляющийся из ниоткуда заголовок статьи.
Ещё можно сделать автоматическую вставку
Также в стандарте CSS Text Level 4 есть упоминание CSS-свойства
Сначала хотел использовать форк балансировщика New York Times, но его недостатки перевешивают все преимущества. Возможно, что потом попробую покопать в сторону варианта с
#html #ux #a11y
https://defront.ru/posts/2022/01-january/11-in-search-of-best-line-wrap-balance/
Попробовал сегодня по-быстрому сделать удобочитаемые переносы слов заголовков статей на сайте 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/
www.ctrl.blog
Improving the New York Times’ line wrap balancer
Web browsers don’t yet support (text-wrap: balance). Adobe and the NY Times have offer free JavaScript alternatives. I improved the latter to suit my needs.
Forwarded from ai.dot(ufna, dev)
Обожаю линковку и баги, над которыми сидишь три дня на ровном месте.
Поменял ключик — подожди дцать минут пока оно там шесть-семь сотен юнитов прошуршит.
А главное, если не попросить линковщик вежливо, мол, милый добрый линкер, не будет ли многоуважаемый джин так добр задетектить ошибки вот прям по порядку, то может оказаться что ругается он на несуществующие проблемы. Он просто "ну не шмогла", потому кинул тебе последнее на чем не смог, а это уже далеко идущие последствия невидимого первого шага.
Короче, за такие вещи я ненавижу плюсы. Их великая сила и коварная слабость — подружи 100500 разношерстных либ с разными стандартами, rtti и прочее. А анрил - вообще адский комбайн.
Поменял ключик — подожди дцать минут пока оно там шесть-семь сотен юнитов прошуршит.
А главное, если не попросить линковщик вежливо, мол, милый добрый линкер, не будет ли многоуважаемый джин так добр задетектить ошибки вот прям по порядку, то может оказаться что ругается он на несуществующие проблемы. Он просто "ну не шмогла", потому кинул тебе последнее на чем не смог, а это уже далеко идущие последствия невидимого первого шага.
Короче, за такие вещи я ненавижу плюсы. Их великая сила и коварная слабость — подружи 100500 разношерстных либ с разными стандартами, rtti и прочее. А анрил - вообще адский комбайн.
Forwarded from СПNЗЖУ DESIGN
Уже 17 января начнётся трёхдневный практикум по дизайну сайтов.
На марафоне вы получите:
🔥 Новую работу в портфолио
🔥 Шаблон для презентации работы на Behance
🎁 Пособие Designer Pack
Узнаете:
— Как работать по заданию заказчика
— ТОП-3 проблемы с портфолио у новичков
— 5 портретов нежелательных заказчиков
— Почему может не получиться в веб-дизайне и фрилансе
— Как получить первый коммерческий заказ
Нюансы:
- Опыт в дизайне не требуется
- Устанавливать на компьютер ничего не надо
- Нужно три свободных вечера и желание учиться новому
Принять участие ➡️ https://bit.ly/3tbu4hw
На марафоне вы получите:
🔥 Новую работу в портфолио
🔥 Шаблон для презентации работы на Behance
🎁 Пособие Designer Pack
Узнаете:
— Как работать по заданию заказчика
— ТОП-3 проблемы с портфолио у новичков
— 5 портретов нежелательных заказчиков
— Почему может не получиться в веб-дизайне и фрилансе
— Как получить первый коммерческий заказ
Нюансы:
- Опыт в дизайне не требуется
- Устанавливать на компьютер ничего не надо
- Нужно три свободных вечера и желание учиться новому
Принять участие ➡️ https://bit.ly/3tbu4hw
Forwarded from Coding: работа и стажировки для программистов
М.Видео допустили ошибку и продали iPhone 13 за 1 рубль!
Магазины часто ошибаются в ценах, и самые шустрые подписчики канала Придумал Скидку забирают БЕСПЛАТНО смартфоны, игровые приставки, ноутбуки.
Cегодня они выложили приватные промокоды для всех фастфуд заведений, бесплатные подписки на музыку и киносервисы.
Придумал скидку станет закрытым через 48 часов - https://t.me/+8lAlhyd8jus3NTEy
Магазины часто ошибаются в ценах, и самые шустрые подписчики канала Придумал Скидку забирают БЕСПЛАТНО смартфоны, игровые приставки, ноутбуки.
Cегодня они выложили приватные промокоды для всех фастфуд заведений, бесплатные подписки на музыку и киносервисы.
Придумал скидку станет закрытым через 48 часов - https://t.me/+8lAlhyd8jus3NTEy
Forwarded from Дизайн-снайпер
Внутри этого ретро-мобиля спрятали BMW C 400 X.
Компания Nmoto, расположенная в Майами, выпустила комплект для «обшивки» скутера. В его основе лежит мотоцикл 1936 года, построенный энтузиастом ар-деко О. Рэем Кортни на базе Henderson KJ Streamliner 1929 года. В комплект входят девять кузовных панелей из углеродного волокна и все необходимое крепежное оборудование, включая оригинальные винты BWM Torq.
Компания Nmoto, расположенная в Майами, выпустила комплект для «обшивки» скутера. В его основе лежит мотоцикл 1936 года, построенный энтузиастом ар-деко О. Рэем Кортни на базе Henderson KJ Streamliner 1929 года. В комплект входят девять кузовных панелей из углеродного волокна и все необходимое крепежное оборудование, включая оригинальные винты BWM Torq.
Forwarded from СПNЗЖУ DESIGN
Telegraph
21 полезный совет, который можно сделать из адресной строки Chrome.
Скрытые секретные внутренние команды. Веб-браузеры имеют множество встроенных команд, которые можно использовать для разных целей. В этом посте собраны несколько команд Chrome, которые интересны и могут сэкономить тебе время. 1. Dino Game. Если ты наберешь…
Forwarded from Nrjwolf ⚡️IT Developer
Такой дтф мне нравится
https://dtf.ru/gamedev/955978-telegram-bot-dlya-unity-cloud-build
https://dtf.ru/gamedev/955978-telegram-bot-dlya-unity-cloud-build
Forwarded from Shock Design
Привет👋. Здесь пишу мнение о дизайне, прокрастинации и выгорании, и как пытаюсь с этим справляться.
Полистать канал 👉
Полистать канал 👉
Forwarded from Coding: работа и стажировки для программистов
👨🎓️ Нужны ли программисту математика, английский язык, теория алгоритмов и паттерны проектирования?
Вы думаете, что достаточно знать парочку языков программирования и сопутствующие библиотеки? Увы, для успешного программиста этого мало. Опытный разработчик рассказывает, какие еще дисциплины придется освоить новичку.
Статья
Вы думаете, что достаточно знать парочку языков программирования и сопутствующие библиотеки? Увы, для успешного программиста этого мало. Опытный разработчик рассказывает, какие еще дисциплины придется освоить новичку.
Статья
Forwarded from Дизайн-кабак
Victor Zhitomirskiy: «Дизайн система от А до Я. Часть 2: атомы или дизайн язык»
https://designpub.ru/137ffd311be4
https://designpub.ru/137ffd311be4
Medium
Дизайн система от А до Я. Часть 2: атомы или дизайн язык
Всем привет, прошло немало времени с момента публикации первой, общей статьи на тему нашего опыта работы над дизайн системой. Если…
Forwarded from Дизайн-снайпер
Хорошая заметка о взаимном проникновении культур в границах творчества одной личности. Дизайн вообще поглощает в себя очень многое из культурной жизни и действует между инженерными процессами, технологией, универсальными практиками понимания потребностей людей и искусством. Хотя искусство здесь стоит поставить первым.
Forwarded from Дизайн-снайпер
This media is not supported in your browser
VIEW IN TELEGRAM
Отличный дизайн очков. Простое оптическое решение, а какой нужный многим эффект «правильно дополненной реальности»
Forwarded from Логотип побольше
This media is not supported in your browser
VIEW IN TELEGRAM
На финале года "Что? Где? Когда?" был вопрос про звуковой логотип. В целом история интересная, так как само определение "звуковой логотип" можно встретить не часто. Набережная озера Альстер визитная карточка Гамбурга. Здания, шпили и отражение всей панорамы сформировали звуковую дорожку. Далее на ее основе сделали музыку, которая стала звуковым логотипом для гамбургской филармонии.
В видео отлично рассказано, как все было и вы можете услышать, как звучит этот логотип.
#логотип
В видео отлично рассказано, как все было и вы можете услышать, как звучит этот логотип.
#логотип
Forwarded from Coding: работа и стажировки для программистов
Молодой профессор из ВШЭ создал необычный канал по финансовой грамотности
По его словам, даже ленивый сможет легко и быстро из 1000 рублей сколотить состояние. Он рассказывает, как разбогатеть даже в кризис и оформляет всю информацию в картинки — поэтому процесс обучения превращается в увлекательное занятие.
Если хотите стать богаче, то вот ссылка на канал: @finadvisora
По его словам, даже ленивый сможет легко и быстро из 1000 рублей сколотить состояние. Он рассказывает, как разбогатеть даже в кризис и оформляет всю информацию в картинки — поэтому процесс обучения превращается в увлекательное занятие.
Если хотите стать богаче, то вот ссылка на канал: @finadvisora