WhatIsHTML
@WhatIsHTML
HTML программист

Почему размер шрифта нестабильный?

Только для мобильных
Пример
Хочу сделать так, чтобы текст в колонках помещался в одну строку. Для этого использую ngFitText. Проблема в том, что если в одной колонке текст короткий, например 54, то шрифт будет больше чем в других колонках. Нужно чтобы шрифт был одного размера во всех колонках. Поэтому сделал директиву, которая считывает размер шрифта во всех колонках, и ставит на всех самый меньший из них.

.directive('equalFontSize', function($timeout, $window) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {

        function run(noDebounceFlag) {
          let elems = document.querySelectorAll('[equal-font-size]');
          let font;
          let debounce = 0;

          if (!noDebounceFlag && attrs.hasOwnProperty('fittext')) {
            debounce += 1100;
          }

          removeOldCss(elems);

          $timeout(() => {
            if (attrs.equalFontSize === 'min') {
              font = getFontMin(elems);
            }
            setFont(elems, font);
          }, debounce);
        }

        function getFontMin(elems) {
          let fontMin = 1000;
          elems.forEach(element => {
            let style = window.getComputedStyle(element);
            let fontSize = parseInt(style.getPropertyValue('font-size'));

            if (fontSize < fontMin) {
              fontMin = fontSize;
            }
          });
          return fontMin;
        }

        function removeOldCss(elems) {
          elems.forEach(element => {
            let classList = element.className.split(' ');
            classList.forEach(cssClass => {
              if (cssClass.includes("-fs-px")) {
                angular.element(element).removeClass(cssClass);
              }
            });
          });
        }

        function setFont(elems, font) {
          let fontElem = document.querySelectorAll('#font')[0];
          angular.element(fontElem).text(font);
          elems.forEach(element => {
            angular.element(element).addClass(`-fs-px-${font}`);
          });
        }

        run();

        window.addEventListener('resize', () => {
          run(true);
        });
      }
    };
  })


Почему используются классы вместо inline? Ответ: на мобильных скроллинг триггерит resize и поэтому ngFitText каждый раз будет пересчитывать размер шрифта. Поскольку наш класс перебивает инлайн стили, то скачков в размере шрифта не будет видно. В тестовом примере этого нету, но в реальном примере моя директива считывает шрифт только если изменился режим из портретного в альбомный или наоборот, но не в этом суть.

Проблема в том, что при resize ngFitText работает нестабильно и ставит часто минимальный размер шрифта. Не могу понять почему так
  • Вопрос задан
  • 102 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы