шрифт от количества символов
Как можно контролировать/уменьшать/увеличивать размер шрифта в зависимости от количестве символов? Это можно сделать несколькими способами:
Шрифт в зависимости от количества символов.
- Шрифт в зависимости от количества символовphp.
- Код : Шрифт в зависимости от количества символов php
- Код : Шрифт в зависимости от количества символов javascript
Шрифт в зависимости от количества символовphp.
Не буду подробно рассказывать математику(только схематично), если учились в школе хорошо, то - это просто! Если нет, то бегом обратно в школу!
Размер шрифта в зависимости от количества символов:
Сделаем функцию, которая будет возвращать размер шрифта в зависимости от количества символов, для этого нам понадобится:
Создадим тестовый стенд из div с идентификатором (класс)а
<div class=example style="font-size:<?=countSimbols('123456789')?>px">123456789</div>
Поместим внутрь.. число/текст + атрибут "style" + значение "font-size" будем получать через php:
+ нам нужны стили, ширина для примера возьмем 300px + остальные стили и у нас получится:
Алгоритм совершенно простой:
В функцию получаем количество символов с помощью str_split разбиваем в массив, потом считаем с помощью count.
В условии (if) поместим, если количество символов, более 10... будет срабатывать наша "математика"
Ширину блока - 300 делим на количество символом - получаем ширину одного символа.
Далее умножаем на 1.6 - что это за число...
Это число вычисляется очень просто... :
Заполнили блок количеством символов, которое не выходят за пределы блока. 300 -ширина, количество символов в блоке - 40, font-size =13, найти "Х":
(300/40) * Х = 13
Код : Шрифт в зависимости от количества символов - php
Довольно длинный получился предыдущий пункт, поэтому, код "Шрифт в зависимости от количества символовphp" - в отдельном пункте:
Код в сборе - Шрифт в зависимости от количества символовphp
Php:
<?
function countSimbols($e)
{
$sp = count(str_split($e));
if($sp >=10) return (300/$sp)*1.6; else return 25;
}
?>
Html:
<div class=example style="font-size:<?=countSimbols('123456789')?>px">123456789</div>
Примеры: Шрифт в зависимости от количества символовphp
Менее 10 символов - style="font-size:25px":
10 символов - style="font-size:48px":
20 символов - style="font-size:24px":
24 символов - style="font-size:20px":
30 символов - style="font-size:16px":
40 символов - style="font-size:12.631578947368px":
50 символов - style="font-size:9.7959183673469px":
Код : Шрифт в зависимости от количества символов javascript
Регулирование шрифта в зависимости от количества символов в javascript.
Для этого вам понадобится:
Знания javascript и переписать выше приведенный код php на javascript.
Пишем аналогичную функцию, которая будет возвращать число font-size в зависимости от количества символов. Алгоритм совершенно аналогичный:
Получаем содержимое из блока - innerHTML.
Разбиваем в массив - split.
Возвращаем массив ключей - Object.keys.
Считаем длину массива - length.
Математику смотри выше пунктом...
Соберем весь код:
Код javascript Шрифт в зависимости от количества символов
Теперь нам остается собрать весь код "Шрифт в зависимости от количества символов" в javascript.
Html:
<div class="example" id="example1">12345678901234567890</div>
<div class="example" id="example">12345678901234567890121234301234567840</div>
<div class="example" id="example5">1234567890123456789012123430123456789001234567850</div>
javascript
<script>
function countSimbols(e)
{
var result = Object.keys(e.innerHTML.split('')).length;
if(result >=10) return (300/result)*1.6; else return 25;
}
example1. style = "font-size:"+countSimbols(example1)+"px";
example . style = "font-size:"+countSimbols(example)+"px";
example5 . style = "font-size:"+countSimbols(example5)+"px";
</script>
Пример javascript Шрифт в зависимости от количества символов
Далее разместим выше приведенный код прямо здесь:
