troubles getting dynamic text to fit defined box size

Question

I'm trying to fit some dynamic text into a defined box on my Wordpress site. I've investigated using the following two scripts:

• http://plugins.jquery.com/project/TextFill
• text_fit_in_box found on dhtmlgoodies dot com

With both I'm getting the same results which is the text coming into the boxes (a good start) but the text does not wrap nor does it seem to scale according to the available size as indicated in the stylesheet.

The text is a link inside a div. Here is the code for the div in the index.php file of Wordpress:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div id="id<?php echo get_post_meta($post->ID, "blipclass", true); ?>" class="<?php echo get_post_meta($post->ID, "blipclass", true); echo " "?>blip storycontent frontp news-post">
        <a href="<?php echo the_permalink(); ?>" class="bliptext"><?php echo get_post_meta($post->ID, "blip", true); ?></a>
        <script type="text/javascript">fitTextInBox('id<?php echo get_post_meta($post->ID, "blipclass", true); ?>',136);</script>
    </div>
</div>

and relevant parts of my stylesheet

#idblip-c, #idblip-m, #idblip-y, #idblip-k, {
        width: 218px !important;
        height: 136px !important;
        overflow: auto !important;
}

.bliptext {
        padding:10px;
        padding-top:15px;
        width:100%;
        height:100%;
        overflow: auto !important;
}

Basically, I would like to see the front size change based on the available space in the box. The fewer words the bigger the font and vice versa.

Here is where I'm at right now:

as you can see, the font size is maxing out and is not wrapping. I get this far using either script.

Any tips on the matter is greatly appreciated.

some more of the CSS

#idblip-c, #idblip-m, #idblip-y, #idblip-k, {
        width: 218px !important;
        height: 136px !important;
        overflow: auto !important;

HTML output

        <div class="frontpics">
                                                <div id="post-1831" class="post-1831 post type-post status-publish format-standard hentry category-news">
                            <div id="idblip-c" class="blip-c blip storycontent frontp news-post">
                                <a href="story1/" class="bliptext">HE NEVER STOPS, EVER!</a>
                                <script type="text/javascript">fitTextInBox('idblip-c',136);</script>
                            </div>
                        </div>
                                                <div id="post-1649" class="post-1649 post type-post status-publish format-standard hentry category-news">

                            <div id="idblip-m" class="blip-m blip storycontent frontp news-post">
                                <a href="story2/" class="bliptext">FIRST PLACE</a>
                                <script type="text/javascript">fitTextInBox('idblip-m',136);</script>
                            </div>
                        </div>
                                                <div id="post-1826" class="post-1826 post type-post status-publish format-standard hentry category-news tag-caen tag-france tag-klar tag-masterplan">
                            <div id="idblip-y" class="blip-y blip storycontent frontp news-post">
                                <a href="story3/" class="bliptext">MASTER OF THE UNIVERSE</a>

                                <script type="text/javascript">fitTextInBox('idblip-y',136);</script>
                            </div>
                        </div>
                                                <div id="post-1820" class="post-1820 post type-post status-publish format-standard hentry category-news">
                            <div id="idblip-k" class="blip-k blip storycontent frontp news-post">
                                <a href="story4/" class="bliptext">CONTEMPORARY SHT</a>
                                <script type="text/javascript">fitTextInBox('idblip-k',136);</script>

                            </div>
                        </div>
                                        </div>
            </div>

Answer 1

I made a plugin to address this issue:

https://github.com/jeremiahrose/perfectFit.js

It will resize each line separately after wrapping, which seems to be what you are looking for.

Answer 2

EDIT Looks like someone already made a jQuery plugin for this exact thing: http://plugins.jquery.com/project/TextFill

Not a specific answer, but a general strategy:

Take the id of the box and some default text size. Call a function that detects whether a scrollbar exists on a div. If so, decrease the font size slightly, and repeat. If not, increase the font size slightly, and repeat. At any point you detect that the previous action was to increase in size, and the current action was to decrease in size, you've found the point where the text fits the box. This could easily be done with a simple loop.

If reach some minimum text size and the scroll bar still exists, you can gracefully fail by setting the value to the default text size you originally sent.

You can reduce the number of tests by binary searching in either direction, each time you make a step that changes the outcome (has or doesn't have a scrollbar), you half the distance you change the font-size by in the next step.

How to find out whether a div has a scrollbar: possible solution (haven't tested), solutions on Stack Overflow using Jquery 1, 2, 3