View on GitHub

Jquery-bigtext

jQuery plugin that makes text inside as big as possible while still fitting on the parent.

Download this project as a .zip file Download this project as a tar.gz file

Full documentation available on GitHub

Example1

div size: width: 300px; height: 200px;
Simple example. Makes the text as big as possible without overflowing the parent div.

        $("span#span1").bigText();

Testing BigText

Example2

div size: width: 800px; height: 100px;
Same as Example1 but with a different size div. Notice that jquery-bigtext checks both heights and widths to prevent overflowing.

        $("span#span2").bigText();

Testing BigText

Example3

div size: width: 800px; height: 100px;
Same as Example2 but with fontSizeFactor set to 1. fontSizeFactor default is 0.8, it's used to give some vertical spacing for letters that overflow the line-height (like 'g', 'Á' and most other accentuated uppercase letters). This does not affect the font-size if the limiting factor is the width of the parent div.

        $("span#span3").bigText({
            fontSizeFactor: 1
        });

Testing BigText

Example4

div size: width: 800px; height: 100px;
Horizontal alignment

        $("span#span4").bigText({
            horizontalAlign: "left",
        });

Testing BigText

Example5

div size: width: 200px; height: 200px;
Vertical Alignment

        $("span#span5").bigText({
            verticalAlign: "bottom",
        });

Testing BigText

Example6

div size: width: 100px; height: 300px;
BigText on rotated text? yes please!
Note: BigText, unlike padding, does not support setting the rotation of the text element on CSS. You must set through the $.bigText() options.

        $("span#span6").bigText({
            rotateText: 90
        });

Testing BigText

Example7

div size: width: 100px; height: 300px;
More rotated examples.

        $("span#span7").bigText({
            rotateText: -90
        });

Testing BigText

Example8

div size: width: 300px; height: 150px;
The element you call $().bigText() in can have other elements inside it. If you set the font-size in the em unit in these elements you can have bigger text followed by smaller text like below. Using this technique you can also have any kind of text, like font-awesome icons.
HTML:

    <div>
      <span id="span8">
        <i class="fa fa-home" style="font-size: 1.3em"></i>
        <span style="font-size: 1.2em">Big</span>
        <span style="font-size: 0.8em">small</span>
        <i class="fa fa-home" style="font-size: 0.5em"></i>
      </span>
    </div>

Javascript:

        $("span#span8").bigText();

Big small

Example9

div size: width: 600px; height: 300px;
Maximum font size option

    $("span#span9").bigText({
      maximumFontSize: 25,
    });

Testing BigText

Example10

div size: width: 600px; height: auto;
Limits the font size based only on the parent element width instead of both width and height.

    $("span#span9").bigText({
      limitingDimension: "width",
    });

Testing BigText

Example11

div size: width: auto; height: 100px;
Limits the font size based only on the parent element height instead of both width and height.

    $("span#span9").bigText({
      limitingDimension: "height",
    });

Testing BigText

Example12

div size: width: 200px; height: 100px;
BigText also works with line breaks added manually. The default is to center the text on each line, but that can be changed using the textAlign property

    $("span#span12").bigText({
      textAlign: "right"
    });

Testing
Big
Text

Example13

div size: width: 200px; height: 80px; padding: 30px
BigText understands padding on the enclosing div, so your text can have some breathing room without the need of multiple divs. In this example the enclosing div has a 30px padding added to it.

    $("span#span13").bigText();

Testing BigText

Final Example

A more complex arrangement

        $("span#complex_span1, span#complex_span2, span#complex_span3").bigText();
        $("span#complex_span4").bigText({
            rotateText: -45,
            fontSizeFactor: 1
        });

Big

Text

is

AWESOME