Как масштабировать шрифты в web?

Question

[Алексей]

Добрый день уважаемое сообщество.

Задача следующая. Есть блок заданных размеров. В него вставлен тег с текстом. Нужно масштабировать размер шрифта так чтобы он не вылазил за края родительского блока. Сколько бы не поместили текста он должен уменьшатся вплоть до абсурда (когда прочитать его будет невозможно).



Такого быть не должно:



Соответственно текст будет добавляться в блок динамически и так же динамически он должен подстраиваться. Возможно ли такое сделать? Есть готовые библиотеки? Или каков алгоритм действий?

Comments

[Rustam Bainazarov]

JS.

[Алексей]

Рустам Байназаров, Понятно что не CSS, хотя очень бы хотелось иметь такое свойство

[Rustam Bainazarov]

Алексей, «понятно, что не CSS»:


Тогда нужно теги поправить.

[Алексей]

Рустам Байназаров, поправил, спасибо

[Kovalsky]

Думаю проще всего с помощью SVG решить: foreignObject может содержать в себе html, соответственно запихиваете ваш текст в foreignObject, а сам svg уже масштабируете под размеры блока. Пара примеров с so

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

[Aetae]

Kovalsky, а смысл? В кавадрат сам текст себя не отформатирует никак. Если уж как-то получили текст точно вписанный в квадрат, то проще его потом через transform: scale, чем svg городить.

[Kovalsky]

Aetae, "В кавадрат сам текст себя не отформатирует никак" - именно это и произойдет, смотрите примеры.

"проще его потом через transform: scale, чем svg городить" - нет, как раз svg проще, т.к. масштабирование произойдет автоматически

[Aetae]

Kovalsky, не вижу. Хрень там, а не примеры. Тупо про перенос текста. Кривой.

[Kovalsky]

Aetae, ну щито поделать. А между тем примеров там много. Как конкретно того что запросил оп, так и более сложных вариантов.

[Aetae]

Kovalsky, нету там нихрена, тыкни пальцем в конкретный рабочий, по твоему мнению, пример.

[Kovalsky]

Aetae, в таком тоне я не планирую разговаривать. Если оп не найдет нужных примеров - напишет, поясню

[Aetae]

Kovalsky, ч.т.д.

[Kovalsky]

Aetae, лайк, хорошо отыграл, разоблачил некомпетентного меня

[Алексей]

Kovalsky, Детально не смотрел, но чутье мне подсказывает что это хорошее решение, как проверю отпишусь.

[Алексей]

Думаю проще всего с помощью SVG решить: foreignObject может содержать в себе html, соответственно запихиваете ваш текст в foreignObject, а сам svg уже масштабируете под размеры блока.

Kovalsky, к сожалению этот способ не работает. Да SVG масштабируется, и текст внутри него тоже масштабируется но только если он заранее подогнан.

Answer 1

[Иван Клименко]

Если стоит именно такая задача, то вам придётся изучить много нового и интересного. Почитайте про рендеринг шрифтов для начала. Например вот эту статью на Хабре.

Но вообще, зная количество букв и размеры блока, можно рассчитать высоту одной строки. Много будет зависеть от самого шрифта.

Например, если принять, что блок квадратный и имеет размер a на a, а текст имеет длину в N символов (с пробелами и знаками препинания), и каждая буква в шрифте ограничена квадратом с размерами b на b, то размер шрифта S можно прикинуть следующей формулой:

S = b = a / sqrt(N)

Comments

[Алексей]

Например? Что конкретно почитать?

[Иван Клименко]

Алексей, я обновил ответ

Answer 2

[Сергей delphinpro]

https://github.com/davatron5000/FitText.js
https://stackoverflow.com/questions/687998/auto-si...