40 or 60 what? 30 to 45 what? Anyways, font sizes should be set as % via css style. You would probably also want a minimum and maximum size. Here's one approach:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.sizer {
font-family: sans-serif;
}
</style>
<script type="text/javascript">
function sizeText(){
for(var i = 0, spans = document.getElementsByTagName('span'); i < spans.length; ++i){
if(spans[i].className === 'sizer'){
spans[i].style.fontSize = Math.max(Math.min((100 / spans[i].firstChild.nodeValue.length) * 48, 300), 120) + '%';
}
}
}
</script>
</head>
<body>
<span class="sizer">SACHIN TENDULKAR</span><br>
<span class="sizer">TENDULKAR TON HELPS INDIA TO WIN THE MATCH</span>
<script type="text/javascript">
sizeText();
</script><br>
</body>
</html>
Let's zoom in on the highlighted line:
Code:
spans[i].style.fontSize = Math.max(Math.min((100 / spans[i].firstChild.nodeValue.length) * 48, 300), 120) + '%';
The 48 is the multiplier, the larger this is, the larger everything affected by this script will tend to be, if you increase or decrease it too much, you wont see much difference between the smaller and larger sizes. 300 is the maximum % size, and 120 is the minimum % size. The minimum should be at least 90 though, otherwise it will could get pretty tiny.
Junior Coders
dynamically changing font with text size
Posting Permissions
Reply With Quote
Bookmarks