Код?... Это просто!
php js Jquery JsPhp blog
ТЕГИ:
php (101)
js (87)

php (101)
js (87)
php date (19)
html (14)
online (14)
js slice (13)
encode (11)
js array (11)
php array (10)
js date (10)
engine (10)
hash (10)
dosite (9)
info (7)
php img (7)
jsphp (6)
Показать еще :

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

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

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

  1. Шрифт в зависимости от количества символовphp.
  2. Код : Шрифт в зависимости от количества символов php
  3. Код : Шрифт в зависимости от количества символов javascript
  1. Шрифт в зависимости от количества символов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

  2. Код : Шрифт в зависимости от количества символов - 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
  3. Код : Шрифт в зависимости от количества символов 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 Шрифт в зависимости от количества символов

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

    12345678901234567890
    12345678901234567890121234301234567840
    1234567890123456789012123430123456789001234567850
jsphp.ru есть здесь:
Полезные ссылки:
ruweb
Я писал немного о ruweb.net!
Помочь проекту JsPhp.ru

Что можно сделать!?

Поделиться ссылкой! C друзьями или врагами!


Помочь проекту JSPHP.RU: Помочь проекту JSPHP.RU прокомментировать :

Скоро...


Мои Проекты :

Скоро...



О хостинге :

Скоро...


© jsphp.ru 2023 - 2024 , Аминев Марат. Контакты
Страница загружена за : 0.007404 секунд.