javascript - A nice algorithm for font-size relative to number of chars and screen width -
ok, have input field big font (100px). thought when user starts writing letters, font size lower instead of phrase moving off screen.
its gotta responsive well, algorighm includes screen width nice.
what have now:
var chars = $('#big-search').val(); var w = $(window).innerwidth(); var fz = parseint($('#big-search').css("font-size"), 10); console.log(fz); var nfz = 100-((chars.length/w)*(w*2.2)); if(nfz < 100){ $('#big-search').css("font-size", nfz+"px") }
the problem speeds lowering of font size. should rather slow down.
any thoughts on this?
this did trick:
var basefz = 100; var chars = $('#big-search').val(); var w = $(window).innerwidth(); var nfz = (w/100)*(basefz/chars.length); if(nfz <= 100 && nfz >= 20){ $('#big-search').css("font-size", nfz+"px"); } else if(nfz >= 100){ $('#big-search').css("font-size", 100+"px"); } else if(nfz >= 20){ $('#big-search').css("font-size", 20+"px"); }