Комментарии 8
Media queries <...>.
clamp() <...>.
SVG <text> <...>.
Сторонние библиотеки и плагины - <...>.
Подсчёт количества букв - <...>..
А еще можно "налету" превращать текст в картинку и масштабировать уже само изображение )
ЗЫ: Прошу прощения, у вас похожее было
Sandbox не работает... сделал длинный текст и он просто вылез за пределы.
Но необходимый размер текста можно вычислить после первой же итерации!
1. Аналитического решения задачи не существует, будем использовать перебор.
2. Для оптимизации полный перебор заменим на бинарный поиск.
3. При ресайзе вьюпорта используем троттлинг.
Зачем тут все эти стены кода — не совсем понятно.
И, кстати, тротлинг и дебонсинг это не одно и то же.
Простите если я чего ляпну не так.
Первое на что хотел бы обратить внимание это variable fonts. Ведь там, набор параметров, позволяющих регулировать отображение шрифта просто гиганский.
И второе. Ваша задача уже лет 10 как решена в Google Docs. Причем решена двумая способами.
Способ первый заключается в том, что фактически все шрифты с которыми работает Docs парсятся, или заранее имеют предустановленные метрики глифов. Что дает возможность очень точно расчитывать все длины, зная размеры каждой буквы.
Способ второй - тот самый svg. Который они используют уже почти год вполне уверенно. И с точки зрения решения только этой проблемы, делают они это очень неплохо. Возможно вам стоит заглянуть в их canvas render, что бы забрать от туда этот кусок кода.
1) Размер шрифта можно легко вычислить через measureText
2) Ну а самый простой вариант, это делать все же в svg text, и одной строчкой кода просто корректировать viewBox, согласно длине text.getBBox().
Публикации
Делаем отзывчивый и максимально возможный размер шрифта динамического текста относительно контейнера