Skip to content

Instantly share code, notes, and snippets.

@sliceofbytes
Forked from x35a/scaleFontSize.js
Created April 26, 2019 21:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sliceofbytes/3ea2f0c74e4cd6dabba1111edf7d5dfc to your computer and use it in GitHub Desktop.
Save sliceofbytes/3ea2f0c74e4cd6dabba1111edf7d5dfc to your computer and use it in GitHub Desktop.
jq plugin decrease font size on text ovrfl
/*
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