Skip to content

Instantly share code, notes, and snippets.

@mi3tek-amb
Created October 13, 2013 08:34
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 mi3tek-amb/6959865 to your computer and use it in GitHub Desktop.
Save mi3tek-amb/6959865 to your computer and use it in GitHub Desktop.
$.fn.fontWall = function(options){
var options = $.extend({
init:13,fontRetio:1,heightRetio:0.8
},options);
var text = $(this).text(),
text = text.split('/'),
textWrap = [];
for(i=0; i<text.length;i++){
textWrap.push('<span class="fontWall">'+text[i]+'</span>');
};
$(this).html(textWrap);
var resizeElm = $(this),
outW = resizeElm.width();
resizeElm.find('.fontWall').each(function(n){
this.elm = $(this);
if( this.elm.text().length <= 1 ){
var newSize = outW;
}else{
var inW = this.elm.css({
display:'inline',
whiteSpace:'nowrap'
}).width();
var ratio = outW / inW,
newSize = ratio * options.init * options.fontRetio;
};
this.elm.css({
'font-size': newSize + 'px',
'line-height' : options.heightRetio
});
if( this.elm.text().match(/\s/g) ){
whiteSpace = this.elm.text().match(/\s/g).length;
}else{
whiteSpace = 0;
};
var inW = $(this).width(),
parWidth = outW-inW,
wordSpace = parWidth/whiteSpace;
this.elm.css({'word-spacing' : wordSpace , visibility:'visible' ,display:'block'});
});
};
$(this.self).find('.typographyText').each(function(){
$(this).setRatio({init:14,fontRetio:1.1,heightRetio:0.9});
});
<div class="typographyText">typographyText</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment