Non-jQuery alternatywa dla FitText.js?

Question

Pracuję nad małym projektem w tej chwili i jedną z ostatnich rzeczy, które muszę zrobić, to stworzyć fajny responsywny nagłówek.

Znalazłem FitText.js, co wydaje mi się bardzo lubię i dokładnie to, czego potrzebuję. Jedynym problemem jest to, że ta wtyczka używa jQuery, a ja w ogóle nie użyłem jQuery w projekcie i nie chcę używać tylko jednej małej wtyczki. Czy kiedykolwiek słyszałeś o podobnej wtyczce do FitText.js lub korzystałeś z niej, ale nie wymaga ona jQuery?

Answer 1

Jeremy Keith (@adactio) jest utrzymanie alternatywę non-jQuery FitText:

https://github.com/adactio/FitText.js

Answer 2

OP

jQuery sprężonego ~ 94 KB. Zepto skompresowany ~ 9,7 KB.

W skrócie, jeśli zawierają Zepto zamiast, i zmienić odniesienie do jQuery na ostatniej linii wtyczki do Zepto - po prostu działa. Zobacz this Fiddle

(function ($) { 
    $.fn.fitText = function (kompressor, options) { 
     // Setup options 
     var compressor = kompressor || 1, 
      settings = $.extend({ 
       'minFontSize': Number.NEGATIVE_INFINITY, 
       'maxFontSize': Number.POSITIVE_INFINITY 
      }, options); 
     return this.each(function() { 
      // Store the object 
      var $this = $(this); 
      // Resizer() resizes items based on the object width divided by the compressor * 10 
      var resizer = function() { 
       $this.css('font-size', Math.max(Math.min($this.width()/(compressor * 10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); 
      }; 
      // Call once to set. 
      resizer(); 
      // Call on resize. Opera debounces their resize by default. 
      $(window).on('resize', resizer); 
     }); 
    }; 
})(Zepto); 

---

Według the docs:

Zepto jest minimalistyczny biblioteką JavaScript dla nowoczesnych przeglądarek o znacznym stopniu zgodnym jQuery API.

Tak więc, w przypadku osoby, która chce używać wtyczki jQuery * bez konieczności dołączania całej biblioteki jQuery, Zepto wydaje się rozsądnym rozwiązaniem.

* Podczas gdy 100% pokrycie jQuery nie jest celem projektu, dostarczone interfejsy API pasują do ich odpowiedników jQuery.

Nadzieję, że pomaga.

Answer 3

Coś takiego powinno Cię zainteresować, najpierw dokładnie przetestuj. Zasadniczo przeskalujesz rozmiar tekstu na podstawie przesunięcia elementu. Możesz ustawić minimalne i maksymalne rozmiary czcionek, ale nie widzę punktu.

Funkcja zmiany rozmiaru może składać się z około dwóch linii kodu.

<style type="text/css"> 
    div { 
    border: 1px solid blue; 
    white-space: nowrap; 
    text-align: center; 
    } 
</style> 

<script> 

function resize(el, factor) { 

    // Get element width 
    var width = el.offsetWidth; 

    // set default for factor 
    if (typeof factor == 'undefined') { 
    factor = 5; 
    } 

    // Set fontsize to new size 
    el.style.fontSize = (width/factor | 0) + 'px'; 
} 

window.onload = function() { 
    function doResize() {resize(document.getElementById('d0'), 6);} 
    window.onresize = doResize; 
    doResize(); 
} 

</script> 

<div id="d0">Some text</div> 

Answer 4

Chyba ten problem został rozwiązany przez teraz jednak szukałem podobnego rozwiązania chwilę temu. W końcu stworzyłem własną wtyczkę Fittext, ponieważ potrzebowałem móc ją włączyć tylko powyżej określonej minimalnej szerokości ekranu. Więc jeśli ktoś prowadzi do tego samego problemu, oto rozwiązanie wymyśliłem:

https://github.com/dinealbrecht/fittext