StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Notice :</strong> 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)</p> <p>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</p> <p>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 ...</p> <p>It has inspirations from <a href="https://stackoverflow.com/questions/3401136/resize-font-to-fit-in-a-div-on-one-line">this question</a> 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 !</p> <p>It has also inspirations from <a href="https://stackoverflow.com/questions/838137/jquery-change-height-based-on-browser-size-resize">here</a> for the window resize handling.</p> <p>Now stop the chatting, here is the code :</p> <pre><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> </code></pre> <p>And here is a <a href="http://mathvdh.com/tests/fit.html" rel="nofollow noreferrer">test page</a></p> <p>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.</p> <p>A little tricky part is that I wanted it to work with multiple texts and so the <code>$(".sc_container").each</code> loop that runs on all the objects with css class ".sc_container".</p> <p>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 : <code>$sc[0].orig_width=$sc.width();</code> and reused it for computations later on resize, otherwise it was messed up after multiple resizes.</p> <p>What do you guys think about it ?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload