I have tried both FitText and BigText but they are not what I was after. You see they are for headings and they work great for that.

However, I wanted to be able to throw any amount of text at any size div and have that fit at the largest possible font size to fill the div.

Let’s start with the HTML shall we.


That snippet above is what is displayed when hovering over an item, hence the “display:none”


And that bit is what we will use to calculate the text size. It’s “display:block” but gets pushed off screen with the css below:

.quote, .quote-dummy { display: none; color: white; width: 80%; height: 80%; max-height: 80%; position:

fixed; z-index: 1000; top: 10%; left: 10%; font-size: 2.5em; overflow: hidden; } .quote .top-right { position: absolute; top: 2%; right: 2%; cursor: pointer; } .quote .top-left { position: absolute; top: -2%; left: 2%; font-size: 600%;

font-family: Helvetica, Arial, sans-serif; } .quote .bottom-right { position: absolute; top: 68%; right: 2%; font-size: 600%;

font-family: Helvetica, Arial, sans-serif; } .quote .content, .content-dummy { left: 3%; font-family: 'Trocchi', serif; width: 88%; height: 60%;

position: absolute; text-align: left; font-size: 128px; vertical-align: middle; } .quote .author { position: absolute; top: 87%; right: 2%; font-family: 'Kameron', serif; font-size: 100%; }

Ok that CSS probably needs a clean-up but let’s just not get to pedantic shall we ![:-)](http://blog.bondigeek.com/wp-includes/images/smilies/simple-smile.png) Alright then, with that out of the way let’s get to the actual bit that does the work. $(".container .item").mouseenter(function (e) { isVisible = false $(".quote").fadeOut("fast"); if (timeout != null) { clearTimeout(timeout); } var color = $(this).find("h2").css("color"); var author = $(this).find("h2").text(); var content = $(this).find("h2").data("quote"); timeout = setTimeout(function () { SetQuote(color, content, author); }, 500); if ($(this).hasClass("credit")) { isVisible = false $(".quote").fadeOut("fast"); $(".credits").fadeIn("slow"); } });

So .container is a

    with with a bunch of
  • elements that have the class .item. When the mouse hits one it extracts a bunch of stuff from data attributes and fires off SetQuote on a timer.


    function SetQuote(color, content, author) { if (content == null) { return; } isVisible = true;

    $(".quote .content").text(content); $(".quote .author").text(author); $(".quote").css('backgroundColor', color); // Set the text of the hidden quote $(".content-dummy div").text(content); $(".content-dummy div").css('font-size', '1000px') CalculateQuoteHeight(100); if ($(".content-dummy div").textWidth() > $(".content-dummy").width()) { while ($(".content-dummy div").textWidth() > $(".content-dummy").width()) { size = parseFloat($(".content-dummy div").css('font-size'), 10); size -= 5; $(".content-dummy div").css('font-size', size + 'px'); } } $(".quote .content").css('font-size', size + 'px'); $(".quote").css("display", "table"); var top = (($(".quote").height() - $(".quote .content").height()) / 2); top = top - ($(".quote .content").height() / 10); $(".quote .content").css("top", top + "px"); $(".credits").fadeOut("fast", function () { $(".quote").fadeIn("slow"); }); }

    SetQuote kicks off the process but it’s CalculateQuoteHeight that does most of the hard work. The IF statement after CalculateQuoteHeight does the final piece of work for short bits of text that overflow horizontally. The 100 passed in to CalculateQuoteHeight is what we start reducing the size by so we don’t go 1 pixel at a time. Subsequent calls to CalculateQuoteHeight(it’s recursive) halve the size to reduce by. function CalculateQuoteHeight(step) { while ($(".content-dummy div").height() > $(".content-dummy").height()) { size = parseFloat($(".content-dummy div").css('font-size'), 10); size -= step; $(".content-dummy div").css('font-size', size + 'px'); } if (step > 1) { $(".content-dummy div").css('font-size', (size + step) + 'px'); CalculateQuoteHeight(step / 2); } }

    So we just keep calling CalculateQuoteHeight until the step is less than 1. Now we need a global variable “var size;” to store the final size so that’s declared at the top of the file.

    That’s all the code out of the way, so what are we doing. Well, a dummy div is declared off page that is visible so heights can be calculated. The text is spat in to an internal div and we measure the height of that compared to the height of the container div (.content-dummy) which has it’s height set to 60%. We just keep reducing the size until it ‘s small than the .content-dummy div.

    Once that is done we check for small amounts of text and adjust horizontally.

    When we have the final size we just set the font size on the actual div and then display it.

    The results look like the following:





    When the sites live I will include the link in the post.