I'm not sure if this question has already been asked and answered but I haven't found any relevant result.
I would like to know if it's possible to calculate and convert specific dimensions (width/height) to a font-size ?
For example, I have :
var textWidth = 150;
var textHeight = 30;
And I would like to get a font-size from these dimensions (pixels)?
EDIT : Thanks dystroy, I finally managed to resolve this issue with your help. I used the function posted here and after that, it was not very complicated :
$(function(){
$( "#height, #width" ).keyup(function(){
var varHeight = $( "#height" ).val();
var varWidth = $( "#width" ).val();
if( varHeight != "" && varWidth != "" ){
$( "#text_container" ).css( "width", varWidth );
$( "#text_container" ).css( "height", varHeight );
$( "#text_container" ).textfill({ maxFontPixels: 500 });
var getFontsize = $( "#text_container > span" ).css( "font-size" );
var fontSize = parseInt( getFontsize.slice(0, -2) );
$( "#fontsize" ).val( fontSize );
}
});
});
Thanks again.
I've made a small interface for what I understand is your question : you input the max width and max height for some text and it automatically computes the size of the font to adapt the text : http://jsfiddle.net/kPZ3E/
HTML :
Max width : <input id=width value=200> px
<br>Max height : <input id=height value=20> px
<br><br>
<table border=1><tr><td id=txtcell nowrap><span id=txt style=>Some sample text.</span></td></tr></table>
<br>Font Size : <span id=mes></span>
JS :
var fontSize = 100;
var reduce = function() {
$('#txt').css('font-size', fontSize);
$('#mes').html(fontSize);
if ($('#txt').width()>$('#width').val() || $('#txt').height()>$('#height').val()) {
fontSize -= 1;
reduce();
}
};
reduce();
$('#width, #height').change(function(){fontSize = 100;reduce()});
Note : the timeout in the fiddle is only here to show the reduction process with an animation.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.