Last active
April 26, 2019 21:17
-
-
Save x35a/d3d9cc739e36f06b96a332d4bdef7d9e to your computer and use it in GitHub Desktop.
jq plugin decrease font size on text ovrfl
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
works with JQ | |
usage | |
<p class="targetElement">Text to scale</p> | |
$('.targetElement').scaleFontSize({minFontsize: 12}); | |
minFontsize минимальное размер шрифта для уменьшения, default 16px. | |
Определяется переполнение по ширине и высоте. | |
Определение переполнения по высоте работает если элементу задан height. | |
Может масштабировать неверно если кастомный шрифт не успел подгрузиться. | |
1 простой вариант - сделать таймаут для загрузки шрифта. setTimeout(function () { $('.targetElement').scaleFontSize() }, 1000); | |
2 детектить событие загрузки шрифта. либа: FontDetect. | |
*/ | |
$.fn.scaleFontSize = function(options) { | |
var defaults = { | |
minFontsize: 16 //px | |
}, | |
calcDiff = 2; // weird IE offset/scroll difference | |
return $(this).each(function() { | |
options = $.extend(defaults, options); | |
var scrollWidth = this.scrollWidth - calcDiff, | |
offsetWidth = this.offsetWidth, | |
scrollHeight = this.scrollHeight - calcDiff, | |
offsetHeight = this.offsetHeight, | |
fontsize = parseFloat( $(this).css('font-size') ), | |
minFontsize = parseFloat( options.minFontsize ); | |
while ( fontsize > minFontsize && (scrollHeight > offsetHeight || scrollWidth > offsetWidth) ) { | |
$(this).css('font-size', --fontsize); | |
scrollWidth = this.scrollWidth; | |
scrollHeight = this.scrollHeight; | |
} | |
}); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment