2

Есть блок .text-wrap с заданным размером, есть массив из текстовых строк в jQuery (разной длины и дополняющийся). Задача - при нажатии кнопки вписать рандомный текст в блок подогнав размер его шрифта. С рандомным текстом вопросов нет, вопросы именно в адаптивности =)

Первое что пришло в голову:

В .text-wrap добавить еще один div с авто высотой и шириной 100%; получается так

<div class=".text-wrap">
  <div class = ".text"> Тут текстовая строка  </div>
</div>

В внутренний блок добавляем текст с заведомо огромным размером шрифта и далее уменьшаем шрифт, пока высота внутреннего не станет меньше внешнего блока.

Делал через while, функция работает. Но на некоторые тексты она делает по 300-400 проходов. Особенно если шаг уменьшения шрифта маленький. тогда решил сократить через рекурсию и множитель. Получается примерно 13-15 шагов на двустрочный текст.

Вот код:

jQuery.noise = 15; //погрешность ресайза в пикс
    jQuery.step = 100; //шаг
    jQuery.startFontSize = 200; //стартовый размер шрифта
    jQuery.currentFontSize = 100; //текущий размер шрифта 
    jQuery.stepCounter = 0; //счетчик действий
    jQuery.stepper = 1; //множитель шага шрифта (на это чилсо делим)     
function changeSizeDown(he1, block) //he1 - высота внешнего блока, block - блок с текстом
    {
           //если мы добились своего, заканчиваем рекурсию
          if(he1 - jQuery.noise < block.height()  &&   block.height() < he1 + jQuery.noise) { //noise - погрешность высоты (т.к. 100% малый шанс попасть)
            return 1; 
        }
        //иначе, если высота текста больше высоты блока
        else if(block.height() > he1) {
            jQuery.currentFontSize -= Math.ceil(jQuery.step/jQuery.stepper); 
            console.log('Step: '+jQuery.stepCounter+' / Side: down / fsize: ' + jQuery.currentFontSize + ' / mult: x'+jQuery.stepper); 
            console.log('Blocks: '+block.height()+' / ' + he1); 

            block.css("font-size", jQuery.currentFontSize + "px"); 
            changeSizeDown(he1, block);
        }
        //если высота блока меньше, то увеличиваем шрифт
         else if(block.height() < he1) {
            if(jQuery.stepper < 50) //если множитель шага < 50, то умножаем вдвое
                jQuery.stepper = jQuery.stepper*2;
            else //иначе мы уже подобрали максимально близкий размер шрифта, а шагов сделали слишком много. Поэтому стоп.
                return 0;
            jQuery.currentFontSize += Math.ceil(jQuery.step/jQuery.stepper); 

            console.log('Step: '+jQuery.stepCounter+' / Side: up / fsize: ' + jQuery.currentFontSize + ' / mult: x'+jQuery.stepper); 
            console.log('Blocks: '+block.height()+' / ' + he1);             
            block.css("font-size", jQuery.currentFontSize + "px"); 
            changeSizeDown(he1, block);
        }
    }

Данный код быстро справляется со своей задачей. Но, как и цикл, на мобильных устройствах иногда работает некорректно. А именно через раз меняет размер, через раз не меняет.

Может у кого есть идеи или более простые решения? Гуглил очень много. Сразу скажу что всякие fitText мне не подходят, т.к. они только от ширины отталкиваются. А у меня задана и ширина и высота.

0

1 ответ 1

1

Итак, если кому интересно. Разобрался с большинством своих ошибок.

jQuery.noise = 15; //погрешность ресайза в пикс
jQuery.step = 100; //шаг размера шрифта в пикс
jQuery.startFontSize = 200; //стартовый размер шрифта
jQuery.currentFontSize = 200; //текущий размер шрифта 
jQuery.stepper = 1; //множитель
jQuery.stopper = false; //стоппер

function changeSize(he1, block) {  //he1 - необходимая высота //block - div с текстом
//если мы находимся в пределах допустимой погрешности, то все ок, завершаем работу или если поступила команда стопера
if(he1 - jQuery.noise < block.height()  &&   block.height() < he1 + jQuery.noise || jQuery.stopper == true) {
    block.css('line-height', jQuery.currentFontSize + (jQuery.currentFontSize/10) + 'px'); //высота строки (настройте под себя)
    var padding = (he1 - block.height())/2 + "px"; // т.к. у нас есть погрешность, остатки я выравниваю за счет отступов
    block.css('padding-top', padding);
    block.css('padding-bottom', padding);
    //тут и была моя первая ошибка. Я не обнулял счетчики =))
    jQuery.stopper = false;
    jQuery.stepCounter = 0;
    jQuery.stepper = 1;
    return 1; 
}

//если высота блока больше чем необходимая, уменьшаем
else if(block.height() > he1) {
    //уменьшаем размер шрифта на шаг / множитель
    jQuery.currentFontSize -= Math.ceil(jQuery.step/jQuery.stepper); 
    block.css("font-size", jQuery.currentFontSize + "px"); 
    return changeSizeDown(he1, block); //рекурсия
}
//если высота блока меньше чем необходимая, увеличиваем (и увеличиваем вдвое stepper)
else if(block.height() < he1) {
    //тут ограничитель множителя. Методом проб и ошибок выяснилось, что для моих нужд множитель более 50 - излишне. Когда множитель больше 50 мы уже очень близки к нужному размеру, потому тормозим скрипт. Иначе умножаем вдвое
    if(jQuery.stepper < 50)
        jQuery.stepper = jQuery.stepper*2;
    else{
        jQuery.stopper = true;
        return changeSizeDown(he1, block);
    }    
    jQuery.currentFontSize += Math.ceil(jQuery.step/jQuery.stepper);           
    block.css("font-size", jQuery.currentFontSize + "px"); 

    return changeSizeDown(he1, block); //рекурсия
} }

Перед вызовом скрипта необходимо:

  1. присвоить стартовый размер шрифта блоку.
  2. Высоту строки сделать нормальной. line-height:normal
  3. убрать padding

Мой пример вызова:

//при загрузке страницы
$(window).load(function() {
  updateAdvice();
});

//при ресайзе страницы. Выполняем только, когда ресайз закончил. За это отвечает функция debouncer
function debouncer(func, timeout) {
  var timeoutID, timeout = timeout || 200;
  return function() {
    var scope = this,
      args = arguments;
    clearTimeout(timeoutID);
    timeoutID = setTimeout(function() {
      func.apply(scope, Array.prototype.slice.call(args));
    }, timeout);
  }
}

$(window).resize(debouncer(function(e) {
  adapt();
}));


//Переменные
jQuery.noise = 15; //погрешность ресайза в пикс
jQuery.step = 100; //шаг
jQuery.startFontSize = 200; //стартовый размер шрифта
jQuery.currentFontSize = 200; //текущий размер шрифта 
jQuery.stepper = 1; //множитель
jQuery.lastAd = 0;
jQuery.stopper = false;

//ТЕКСТ (для примера взят с http://fucking-great-advice.ru/ )
jQuery.adv = ['Не опускай руки!', 'Не делай плохого!', 'Упал — отряхнись!', 'Соблюдай режим!', 'Группируй задачи!', 'Не срывай сроки!', 'Мысли масштабнее!', 'Учись готовить!', 'Признавай свои ошибки!'];


//Замена текста
function updateAdvice() {
  $('.text').text(jQuery.adv[rand(jQuery.adv.length)]);
  adapt();
}


//ФУНКЦИЯ РАНДОМНОГО ЧИСЛА//
function rand(max) {
  var rand = jQuery.lastAd;
  while (rand == jQuery.lastAd) {
    rand = Math.random() * (max - 1);
    rand = Math.round(rand);
  }
  jQuery.lastAd = rand;
  return rand;
}


//АДАПТАЦИЯ
function adapt() {
  //Обнуляем все
  $('.text').css('opacity', '0');
  $('.text').css('padding-top', '0px');
  $('.text').css('padding-bottom', '0px');
  $('.text').css("font-size", jQuery.startFontSize + "px");
  $('.text').css('line-height', 'normal');
  jQuery.currentFontSize = jQuery.startFontSize;
  //стартуем
  changeSizeDown($('.text-wrap').height(), $('.text'))
}




function changeSizeDown(he1, block) {
  jQuery.stepCounter++; //счетчик действий
  if (jQuery.stepCounter > 50) {
    updateAdvice();
    return 0;
  };
  //если мы находимся в пределах допустимой погрешности, то все ок, завершаем работу
  if (he1 - jQuery.noise < block.height() && block.height() < he1 + jQuery.noise || jQuery.stopper == true) {
    block.css('line-height', jQuery.currentFontSize + (jQuery.currentFontSize / 10) + 'px');
    var padding = (he1 - block.height()) / 2 + "px";
    block.css('padding-top', padding);
    block.css('padding-bottom', padding);
    block.animate({
      opacity: 1,
    }, 300);
    jQuery.stopper = false;
    jQuery.stepCounter = 0;
    jQuery.stepper = 1;
    return 1;
  }
  //если высота блока больше чем необходимая, уменьшаем
  else if (block.height() > he1) {
    jQuery.currentFontSize -= Math.ceil(jQuery.step / jQuery.stepper);
    block.css("font-size", jQuery.currentFontSize + "px");
    return changeSizeDown(he1, block);
  }
  //если высота блока меньше чем необходимая, увеличиваем (и увеличиваем вдвое stepper)
  else if (block.height() < he1) {
    if (jQuery.stepper < 50)
      jQuery.stepper = jQuery.stepper * 2;
    else {
      jQuery.stopper = true;
      return changeSizeDown(he1, block);
    }
    jQuery.currentFontSize += Math.ceil(jQuery.step / jQuery.stepper);

    block.css("font-size", jQuery.currentFontSize + "px");

    return changeSizeDown(he1, block);
  }
}

//КНОПКА//
$('.button').on('click', function() {
  updateAdvice();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='text-wrap' style="width: 400px; height: 300px; background-color: #d8d8d8;">
  <div class='text'>
    sdfsdfef
  </div>
</div>
<div class='button'>Поменять</div>

2
  • слово "масштабнее" не влезает
    – Grundy
    21 мар 2016 в 10:27
  • да, есть еще много, что нужно доработать) В данном случае проверку по ширине 21 мар 2016 в 19:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.