Great job Zach! I will think be using this in the future for sure!

Really really nice! Well done!

If you seek more crosss-browser precision in line-width adjustment you could revert to CSS-2D-Transforms (and Matrix-Filter or zoom-Property for IE < 8). I played around with it, searching for a way to force text-antialiasing on Windows-Systems with disabled cleartype, by setting the font-size huge and then scaling back down with a geometric transform. Helas, AA did not work that well in that damn Firefox... But the technique should be well suited for you. Shouldn&#039t it?

love it, great work!

LOVE IT! Brilliant work.

Now anyone can make their own Mazda commercial in a web-browser! Kudos!

Holy cow, this is AWESOME!
Not sure how/when I'll use it on a site, but it looks cool, and the demo is fantastic. Might even be the main attraction for me...

Very, VERY cool. Thanks for your contribution dude.

Good work...brilliant
I liked mostly the 3D part. Saw the video, it seemed to me that it is done using some media tool such a perfection this has.

You're implementation is really beautiful. I like the way you've organized the code, and there's a lot to learn from it. jquery, jquery ui, modernizer, throttle...and BigText is written in mostly JSON style which I really like (not to mention put at the end of the page rather than in an onload handler, another small nicety that I really appreciate).

Being a middling JavaScript programmer myself, I really appreciate high quality work that compounds the use of so many handy libraries that I might not have known about, let alone how to use, all in one place. thanks a bunch.

Reading your source I was struck with the fact that jQuery really, really needs a "toggleAttr()" method. :)

I'm not a huge fan of the toggle methods, as they are more prone to error when the user triggers them way too many times back-to-back, it's easy to get into the wrong state. I prefer to stick with the good ol' manual add and remove, and try to avoid toggle Class if I can.

Ignore that one style attribute in my HTML, don't know how that snuck in there :)

@Schepp
Good suggestion! I will keep that in mind when I have the motivation to hack on this some more.

There was also a great suggestion on Twitter to add support for Pull Quotes:
http://twitter.com/#!/matth...

Great idea for a plugin. I've been meaning to sit down and write this type of plugin for a while now because I love that whole aligned big-text effect.

Calculating the size of text to fit its container is something that I think should have been possible with CSS from day 1. For example, just speculating on a possible syntax. but you should be able to set font-size to auto or calculate or something and the font-size should be automatically calculated until that text is the width of the containing element. That would be very useful for a lot of cool layouts.

Great job.

When I try to apply this via a class selector to do multiple elements it makes the font size the same for all the elements regardless of the amount of text. It seems to set them all to the size which makes the longest text fit rather than treating them independently.

Is there a way around this as I wish to use this on 3 or 4 elements on the same page.

@Johnboy
Thanks for the heads up. I'll add a test for this and update the code on Github. You can "watch" the project there.

UPDATE: I've updated the script on Github and added a test to check for this. It should work fine now.

This is very informative. Thanks for posting the article.

@Chris
Yeah, I'd love to have something like this native in CSS. I don't think you want to overload the "auto" value, though. Would love to see fit to width, fit to height, or fit to whichever comes first.

Way cool.

Excellent work, Zach! Any chance we can get a configuration option to specify which element (or class, even) the script will affect?

This would allow us to, for instance, specify an HTML5 header as the containing element, and have the h1, h2, h3, etc. (rather than div) within all resized to the same width.

This would be extra-fantastic :)

Upon review, my previous comment wasn't as clear as it should have been.

The goal is to configure the script to resize something other than div — in the example I provided, that would be multiple elements (h1, etc.).

Specifying multiple target elements probably isn't ideal (or even a good idea) so perhaps just being able to specify a single element to use rather than div would be better, e.g. span, li, p, etc.

For situations like my earlier example with the multiple heading levels, specifying a class name rather than an element could work, e.g. .big rather than div.

A third option could be to configure the script to resize any children (but only children) of the container element, which would also work for my original example (the equivalent of using the child selector in CSS).

There is a global configuration option (BigText.DEFAULT_CHILD_SELECTOR) that defaults to > div.

There are some tag specific defaults also (BigText.childSelectors). For example, if you run $('ol, ul').bigtext(); it will look for <li> children.

If you want to specify in a single call, the first argument to $.fn.bigtext is an options object.

$('#bigtext').bigtext({
    childSelector: '> h1' // must be a block element.
});

I like your idea around simplifying the API for a single element without children, I'll look at adding it.

Anyone else having issues with the text being resized first and then the LeagueGothic font is loaded? Then the text doesn't fill the width.

In the demo, I circumvented that problem by using Google's Font Loader, which exposes a load event.

You can use an existing CSS loader (http://plugins.jquery.com/f..., just make sure it doesn't fall prey to: http://www.zachleat.com/web...

good stuff!

any idea if that affects seo, if I split up a keyword in let's say 3 different div tags like that?

Cool Stuff

Is it possible to fit the multi liner text in given box with certain width and height?

I've noticed some issues with serif and slab-serif fonts causing the text in each div to be on two separate lines. Have you encountered this issue at all? I'm trying to use it with google font api and 1140px responsive grid.

Hi, love this plugin. But I'm trying to get this to work on a horizontal list where the li elements are "display:inline". Essentially I want a nav element whose links take up the entire horizontal space.

I have it working in Chrome, FF & Safari..but of course in IE8 the BigText doesn't seem to want to work and I can't figure it out...

Ah, I zeroed in on the problem. It wasn't the ul or li elements exactly, but I was using :after on the li elements to insert a separator and Big Text didn't like that for some reason. Is this a bug or just something one has to deal with?

Hey brian,
I'm actually surprised to hear that you got it working with display: inline elements at all. One of the minimum requirements for BigText is a block element. It needs some kind of width to work against.

Hey Dan,
Make sure you're using the Google Font API load event, otherwise BigText will go against the non-font-face dimensions, and will be incorrect when the font successfully loads.

brian,
I was searching these comments looking for exactly what you describe. Can you enlighten as to how you accomplished it?

Great,

thanks for sharing this one, I have only just discovered the greatness of jquery and text effects!
Better late than never i suppose.
Cheers, Aaron.

hi zach,

thanks for the great plugin. ever thought about adding an option to animate a piece of text to its new size?

I love the plugin. I am, however, having quite some trouble applying the text resize to multiple elements on a page. For instance, I'd love to have it work in 3 areas of the page, the header, and in two parts of the footer. I'm using all default settings with the #bigtext id on all elements, but the footer elements do not work. The header works beautifully.

The footer is split in 2, floated left and right: one has more text than the other but neither will resize whatsoever. I have tried changing "bigtext" to a class and even running the script as two different calls (one for #bigtext and a second for #bigtext2, for instance), but still, no dice.

It's weird. Please help

Can you add an issue on the GitHub repo?

This is awesome... Do you have any recommendation for repeating elements?


Text 1



Long Text 2



Long Text 2 and Text 1 are the same size.... But should be different sizes.

Can't get this to work at all. Even the examples from github won't work when tested locally. Quite a newbie so if you have any suggestions I'd be grateful. great plugin

Thanks.

If you have questions/suggestions, it's best to open an issue on GitHub!

https://github.com/zachleat...

This is really great! I am totally impressed! Great work, Zach!!

Zach,

I have had a play with your demos and had a go at implementing it myself. I think the plugin is amazing and it is exactly what I need. However, I'm having a problem. I'm not sure if its just something I'm doing or if it is an problem with the plugin.

I am trying to use it more than once on the page to gain this type of effect.

a c t u a l
distance time
1 3 . 4 4 5 7
K M min

However, whenever I try to call .bigtext() on another element after having called it previously it does some very strange things as can be seen here.

Hope you can get back to me soon,

Jan

Hey Jan,
The bigtext version you're hotlinking is outdated.

Try https://raw.github.com/zach... instead.
Thanks,
Zach

Ok, I am dizzy now!

it doesn't work if cut or paste text using mouse! i think its really to add. hope it could improve your lib!

this script working perfect on a page

but not working on a page more then 1 time

is it possible that this script work for more then 1 on a page

I like this BIGTEXT. I will try out..

Looks fantastic. Can you point me to a simple 1 page HTML page that demonstrates text filling a container.I tried creating one: downloaded bigtext.js, included it, included jquery, etc - no go. I am an old dog familiar with HTML, CSS but not so current anymore

Thanks so much for this nice plugin Zach 'LETTERMAN', that one was too easy.

Thank you for this, saving me so much time. Works great!

First off, thanks Zach for taking the time to create this great script and offering it to the community!
I'm still looking but if someone could point me in the right direction or answer this question, I would appreciate it!

I need to be able to get the font size for the printed text after running through bigtext. Is there a way to do this - I'm a javascript neophyte and don't know if there is a way to grab the properties of the text after big text runs (I'm mostly concerned in the final size of font produced). I have the text coming from a text field into a specifically sized div so depending on what is typed, the font size can change considerably :-)

Thanks for any help!

I can't seem to get this working either. Anyone have any ideas why? Here is my code. Please help. Thanks.

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<title>header test</title>

<script src="http://ajax.googleapis.com/..."></script>

<script src="js/bigtext.js"></script>

</script>

<style>

body,html{

width:100%;

height:100%;

}

#bigtext{

width:50%;

background-color:green;

font-size:100pt;

font-family: Helvetica, Arial;

}

</style>

<script>

$(document).ready(function(){

$('#bigtext').bigText();

});

</script>

</head>

<body>

<div id="bigtext">

BIGTEXT

Makes Text Big

</div>

</body>

</html>

Is there something like this for SVG?

Great Script for the community
THANKS! THANKS!
Good Luck Zach

Hey I did a similar plugin myself (also called it bigtext, I was not aware of yours.) It is a little different though, mine fits the text both in width and in height. I also don't incrementally change font sizes, I do some math to calculate the right font size so it should be far faster than your approach, but I only support linebreaks added manually (
tags).

Mine also supports (optionally) fitting to both width and height of the element and supports rotating text, but no 3d effects (the 3d effects shouldn't be that hard, I might implement them in my plugin as well).

You can check it out: https://github.com/DanielHo...

Examples: https://rawgit.com/DanielHo...

هنا

I have a need for this, but I can't figure out how to install this. I have downloaded the "BigText-master.zip" file and extracted it onto my webserver. When I go to the "/demo" html files, I'm not seeing any resizing happening. What else do I need to do to get this up an running? Sorry if I'm missing this on your site and github.

Trying to get this to work on the bootstrap carousel (like this one http://getbootstrap.com/exa... ) first slide is obviously fine but the next ones won't implement it, any idea of how I could get it to work? Great script by the way!

Great Plug In - Worked fine until Safari 7.1 - now it expands the height of the divs in some weird way -

Hello Zach! Wasn't it possible to 1/ clone the text, 2/ measure the width with getBoundingClientRect() (example: width=624px), 3/ hide the cloned text, 4/ Modify the fontSize such that it fits in the desired width (example : desired width = 300px) => ie font-size = font-size * 300/624 (rounded to the integer below)

Thank
You
For Any
Other
Fantastic
Post.
Where
Else May
Just
Anybody
Get That Type

TUMUSEO
Of
Info
In Such An
Ideal
Method
Of Writing? I
Have
A Presentation Next
Week, And I'm
At
The
Look
For
Such Information.

Hey man, you need to fix this or take it down. Don't you see how many people are complaining that it doesn't work?

No, this this does not work as advertised. I already spent 2 days of my life trying to install BigText as the responsive text solution for my client's website only to find out that it is buggy and does not resize everything like you say it can. Thanks for the waste of my time, bro!