Масштабування тексту в блоці з допомогою Jquery

Нещодавно отримав замовлення, де поміж всього іншого потрібно було зробити блок, в якому текст повинен масштабуватися всередині блоку. Тобто не залежить, скільки тексту в блоці – весь текст повинен бути видимим! Спочатку думав вважати символи, рядки… Сверстал блок в якому повинен перебувати контент і при введенні тексту зауважив, що блок розтягується в залежності від наповнення. Народилася ідея зробити функцію, яка буде підбирати розмір шрифту, порівнюючи початкову висоту блоку і справжню. Так народилася ось ця функція:

image

function font_size_determination($block,height,width,font_size){
$block.css('font-size',font_size);
var block_height = $block.height();
var block_width = $block.width();
if (block_height > height || block_width > width){
font_size = font_size*0.9;
return font_size_determination($block,height,width,font_size);
} else {
return font_size;
}
}

Якщо детально, то це рекурсивна функція – за допомогою .css() підставляє розмір шрифту блоку $block, який переданий у функцію, потім перевіряє його ширину і висоту. Якщо вони відповідають спочатку заданим параметрам – функція повертає розмір шрифту, якщо немає – зменшує шрифт на 10% і перевіряє, і так, поки блок не буде відповідати заданим спочатку ширині і висоті.

Приклад того, що вийшло можна побачити тут. Починайте вводити текст у текстовому полі.

Ось код. CSS:

.left{
width:220px;
float:left;
}
.right{
width:100%;
padding-left:220px;
}
.right textarea{
width:100%;
height:100px;
}
.frame{
width:200px;
height:300px;
border:3px solid silver;
font-family:Arial;
}
.frame span {
display: table cell;
vertical-align: middle;
}
.frame-content{
display:table;
width:100%;
height:30%;
background-color:black;
color:white;
padding:0 4px;
text-align:center;
}
.frame-content-2{
display:table;
width:100%;
height:70%;
background-color:white;
padding:0 4px;
}

HTML:

<div class="left">
<div class="frame">
<div class="frame-content">
<span></span>
</div>
<div class="frame-content-2">
<span></span>
</div>
</div>
</div>
<div class="right">
<textarea id="title text" placeholder="Title"></textarea>
<textarea id="text" placeholder="Content"></textarea>
</div>

JAVASCRIPT:


$('#text').keyup(function(){
var text = $(this).val();
var $block = $('.left').find('.frame').find('.frame-content-2');
text_scaling($block,text);
});
$('#title-text').keyup(function(){
var text = $(this).val();
var $block = $('.left').find('.frame').find('.frame-content');
text_scaling($block,text);
});
function text_scaling($block,text){
var width_block = $block.width();
var height_block = $block.height();
text = text.replace(new RegExp('\r?\n','g'), '<br />');
$block.find('span').html(text);
if(text){
var start_font = height_block*0.8;
var font_size = font_size_determination($block,height_block,width_block,start_font);
$block.css('font-size',font_size);
}

}
function font_size_determination($block,height,width,font_size){
$block.css('font-size',font_size);
var block_height = $block.height();
var block_width = $block.width();
if (block_height > height || block_width > width){
font_size = font_size*0.9;
return font_size_determination($block,height,width,font_size);
} else {
return font_size;
}
}

Функцію font_size_determination я описав вище, до речі, її можна використовувати одну. Але для зручності (у мене три блоки в які необхідно вводити текст – на прикладі їх 2) я зробив функцію text_scaling, в яку передається блок і текст. Текст береться з textarea з допомогою обробника подій .keyup. Ця функція визначає стартові висоту і ширину, до яких прагнутиме функція font_size_determination. Початкова висота шрифту задана в 80% від висоти блоку.

Після збереження блоку мені необхідно його вивести в шаблоні, щоб текст розташовувався в ньому як на зразку під час введення.

Для цього я використовував функцію text_scaling, тільки тепер за допомогою .each — обходячи всі блоки і підбираючи розмір шрифту в них.

$('.left').find('.frame').each(function(){
var $this = $(this);
var $title = $this.find('.frame-content');
var $content = $this.find('.frame-content-2');

$title.css('font-size','1px');
$content.css('font-size','1px');

var text_title = $title.find('span').html();
var text_content = $content.find('span').html();

text_scaling($title,text_title);
text_scaling($content,text_content);
});

приклад (в прикладі 1 блок, але може бути більше).

Спочатку шрифт зменшується до розміру 1 піксель, щоб не порушилися розміри блоку, а потім функція сама підбирає необхідний шрифт для кожного блоку.

Такий ось вийшов простий, але в той же час корисний скрипт. Сподіваюся стане в нагоді і вам.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.