I'm creating a blog (via tumblr) and I'd like my page titles to automatically scale to fill the available space horizontally, and perhaps to push the content down a little at the same time.
(by scale, I mean the changing the font size, and perhaps word spacing)
The page titles will all be four words long, so there will probably be between 16 and 40 characters.
I know very little about html, and I'd be extremely grateful to anyone who could help me out. Cheers!
Notice : It's not a pure html/css solution .. I don't think it possible to do it with only html and css so It uses javascript intensively. Also I'm using jquery to do it but it could be easily reproduced with any of the javascript libraries out there. (I'm using a javascript library mainly for two reasons : 1st is the cross-browser compatibility that those libraries brings, as well as the well-tought shortcuts/utility functions and the 2nd reason is the high quantity of plugins that those libraries have to handle most of the situations or to bring free eye-candy to websites)
Hi I didn't find any 'out-of-the-box' solution for this, but it's something I always liked in iphone development and that I missed back in web dev so I decided to give it a try
Here is my solution, it's not perfect but it kinda works :p . I tough it would be not too difficult but I took me some time, anyway I think I might use it some day ... or some knowledge I acquired in the process ...
It has inspirations from this question where they depict a solution based on a loop where they increase/decrease the text size until it fits. But I was not satisfied with a loop for each text to resize and I was sure it could be calculated directly instead of trial-error'ed !
It has also inspirations from here for the window resize handling.
Now stop the chatting, here is the code :
<script type="text/javascript">
var timer_is_on=0;
jQuery.event.add(window, "load", loadFrame);
jQuery.event.add(window, "resize", resizeFrame);
function loadFrame() {
$(".sc_container").each(function(){
var $sc = $(this).children(".sc")
$sc[0].orig_width=$sc.width();
//console.log("saving width : "+$sc[0].orig_width+" for "+$sc[0])
});
resizeFrame()
}
function resizeFrame()
{
$(".sc_container").each(function(){
var $sc = $(this).children(".sc")
var wc = $(this).width();
var scale = 0
if (wc > $sc[0].orig_width) {
scale = wc / $sc[0].orig_width;
} else {
scale = - $sc[0].orig_width / wc;
}
//console.log("applying scale : "+scale+" for "+$sc[0])
$sc.css("font-size",scale+"em")
});
}
</script>
</head>
<body>
<div id="container">
<div class="sc_container">
<div class='sc'>SOME SUPER TITLE !</div>
</div>
<div class="sc_container">
<div class='sc'>ANOTHER ONE !</div>
</div>
<div class="sc_container">
<div class='sc'>AND A THIRD LOOOOOOOOOOOOOONG ONE :) !</div>
</div>
<div> And some normal content</div>
</div>
And here is a test page
It's not really robust .. it doesn't work well when the window is less than 400 px wide, and I only tested it on safari,firefox,chrome on mac.
A little tricky part is that I wanted it to work with multiple texts and so the $(".sc_container").each loop that runs on all the objects with css class ".sc_container".
A last trick is that I use the power of the css 'em' unit : for example '3em' mean 3 times the original text size, so here I can use this to scale from the original text size to the desired text size .. that's why I save the original text width on the DOM objects themselves : $sc[0].orig_width=$sc.width(); and reused it for computations later on resize, otherwise it was messed up after multiple resizes.
What do you guys think about it ?
