#фишка дня

Одной из самых раздражающих особенностей SVG является работа с текстом. Она безумно сложна и нелогична.

Да, если преобразовать текст в кривые, можно творить чудеса (например, имитировать рукописный ввод: https://codepen.io/alinaki/pen/qoPRRE), но это лишает нас возможности изменять текст по желанию. Мягко говоря, неудобно.

Да, есть элемент text. С его помощью можно поменять размер шрифта, указать координаты размещения, трансформировать. Но вы даже фон не зададите таким образом!

А ведь так хотелось бы иметь возможность встраивать в SVG целые куски вёрстки…

Так можно же 😉

На помощь приходит элемент foreignObject!

Он фактически позволяет встроить в SVG любой другой элемент! И задача поставить фон тексту уже не кажется такой безумной, а наоборот, становится элементарной.

Важным трюком является установка высоты и ширины в 1 пиксель, при этом обязательно включение overflow: visible в CSS. Тогда вам не придётся задумываться о размерах встраиваемого объекта вообще. Иначе – обрежет.

Самая прекрасная часть: foreignObject автоматически озаботится изменением размера вашего элемента и контента в нём в зависимости от ширины SVG! Да, вы всё правильно услышали: масштабирование выполняется автоматически.

Чтобы вам не было скучно, я подготовил небольшой CodePen: https://codepen.io/alinaki/pen/PoWjdrY

На нём изображена карта России с парой городов. При наведении на город раскрывается флажок с его названием.

К сожалению, стоит установить любое значение transform или transition на содержимое foreignObject — и Safari просто перестаёт отрисовывать его. Пришлось сбросить. Ищу в трекере баг по этому поводу.

Поддержка? Ну в IE не работает, как обычно 😅 А в Safari и Firefox есть пара багов, связанных с переходами и анимацией. Но все решаемы.

#svg #foreignobject #text

#фишка дня

Знаете ли вы, что такое. ASCII-art?

Ну если нет, смотрим на иллюстрацию. Говорит само за себя.

Давайте сделаем нечто пафосное всего парой значащих строк CSS.

Например, портрет из слов.

Не ASCII-арт, конечно, но на бизнес по дропшиппингу уже тянет, не правда ли? Осталось найти производителей холстов 🙂

https://codepen.io/alinaki/full/MWqbYbO

#css #clip #text

#баг дня

Вроде мы все с вами знаем, что CSS — отвечает за представление контента, никак его не модифицируя. И это подтверждается спецификацией во многих местах.

Вот только если ты пойдёшь и скопируешь в Chrome текст, на который наложен text-transfrorm: uppercase, скопируются заглавные буквы!

Но это неправильно: спека.

В общем, в Chrome 127, благодаря разработчикам из Microsoft, это будет исправлено.

Мне нравится путь, которым разрабы Edge выбрали пиар своего браузера: исправление старых багов и работа на девтулзами.

Ну и ссылка на баг: https://chromium-review.googlesource.com/c/chromium/src/+/5399744

Такой же баг присутствует в Safari, Firefox же отрабатывает ок. Думаю, код этой части CSS в Blink довольно старый, потому можно ожидать, что в Safari и WebKit будет бэкпорт.

#bug #chrome #css

#codepen дня

Фокусы с типографикой в CSS весьма ограничены, но даже имея на руках лишь их — можно вытворять эффектные вещи.

Например, комбинируя грид и вертикальный режим вывода текста можно получить забавную змейку, как на демо от Adam Argyle: https://codepen.io/alinaki/pen/VwOJoXY

Я форкаю кодпены, потому что они имеют особенность пропадать.

Заодно демо являет собой хороший пример контейнерных запросов, зажимая размер шрифта в адекватных рамках:

grid
font-size: max(1rem, 15cqmin)
writing-mode: vertical-rl
line-height: 1.1cap

Пользуемся :)

#css #vertical #text