Шрифт от количества символов

Как можно контролировать/уменьшать/увеличивать размер шрифта в зависимости от количестве символов? Это можно сделать несколькими способами:

Шрифт в зависимости от количества символов.

1. Шрифт в зависимости от количества символовphp.
2. Код : Шрифт в зависимости от количества символов php
3. Код : Шрифт в зависимости от количества символов (js)

Шрифт в зависимости от количества символовphp.

Не буду подробно рассказывать математику(только схематично), если учились в школе хорошо, то - это просто! Если нет, то бегом обратно в школу!

Размер шрифта в зависимости от количества символов:

Сделаем функцию, которая будет возвращать размер шрифта в зависимости от количества символов, для этого нам понадобится:

Создадим тестовый стенд из div с идентификатором класса

<div class=example style="font-size:<?=countSimbols('123456789')?>px">123456789</div>

Поместим внутрь.. число/текст + атрибут "style" + значение "font-size" будем получать через php:

+ нам нужны стили, ширина для примера возьмем 300px + остальные стили и у нас получится:

123456789

Php:

Алгоритм совершенно простой:

В функцию получаем количество символов с помощью str_split разбиваем в массив, потом считаем с помощью count.

$sp = count(str_split($e));

В условии (if) поместим, если количество символов, более 10... будет срабатывать наша "математика"

if($sp >=10)

Иначе - оставляем шрифт 25 :

Теперь о математике.

Ширину блока - 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":

123456789

10 символов - style="font-size:48px":

1234567890

20 символов - style="font-size:24px":

12345678901234567820

24 символов - style="font-size:20px":

123456789012345678901224

30 символов - style="font-size:16px":

123456789012345678901234567830

40 символов - style="font-size:12.631578947368px":

12345678901234567890121234301234567840

50 символов - style="font-size:9.7959183673469px":

1234567890123456789012123430123456789001234567850



Код : Шрифт в зависимости от количества символов (js)

Регулирование шрифта в зависимости от количества символов в 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 Шрифт в зависимости от количества символов

Далее разместим выше приведенный код прямо здесь:

12345678901234567890
12345678901234567890121234301234567840
1234567890123456789012123430123456789001234567850