Будни разработчика
14.5K subscribers
1.38K photos
404 videos
8 files
2.3K links
Download Telegram
#заметка дня

В CSS Fonts Level 5 обсуждают <meta name="text-scale">. Его появление связано с тем, что системная настройка размера текста на мобильных устройствах сейчас не гарантирует увеличение текста в вебе.

Пользователь увеличивает шрифт в настройках ОС, приложения подхватывают это предпочтение, а браузерам пофигу.

На Android Firefox учитывает системный масштаб текста, а Chrome — нет; на iOS Dynamic Type не применяется к обычным страницам в Safari. В результате сайт может выглядеть нормально при стандартных настройках, но оставаться практически недоступным для человека, который рассчитывает на увеличенный системный текст.

<meta name="text-scale" content="scale"> должен дать странице способ явно поддержать это предпочтение. Браузер включает пользовательский text scale factor в базовый размер шрифта, а дальше масштабирование естественно распространяется через CSS: rem следует за новым базовым размером, тогда как px остаётся фиксированным.

Отсюда и практическое последствие: чем больше типографика и размеры компонентов завязаны на относительные единицы, тем лучше интерфейс адаптируется к пользовательскому масштабу. А жёсткие размеры, ограниченная высота и другие предположения о том, сколько места займёт текст, начинают проявляться обрезанием контента и горизонтальным скроллом.

Manuel Matuzović протестировал proposal на своём сайте и подробно описал результат: https://www.matuzo.at/blog/2026/text-scaling-meta-tag

Proposal: https://drafts.csswg.org/css-fonts-5/#text-scale-meta

#css #font #scale
👍2