jQuery Bigtext Plugin Examples

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#span2").bigText({
            fontSizeFactor: 1
        });

Testing BigText

Example4

div size: width: 300px; height: 200px;
Add some padding to the parent div. You can also set this directly on the CSS of the parent div.

        $("span#span4").bigText({
            padding: 30
        });

Testing BigText

Example5

div size: width: 500px; height: 100px;
Add some padding to the parent div. But on this case the font size is limited vertically.

        $("span#span5").bigText({
            padding: 30
        });

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#span3").bigText({
            rotateText: 90
        });

Testing BigText

Example7

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

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

Testing BigText

Example8

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

        $("span#span3").bigText({
            rotateText: 45
            padding: 30
        });

Testing BigText

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: 200;
Limits the font size based only on the parent element height instead of both width and height.

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

Testing BigText

Final Example

A more complex arrangement

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

Big

Text

awesome