Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/zachleat/BigText

jQuery plugin, calculates the font-size and word-spacing needed to match a line of text to a specific width.
https://github.com/zachleat/BigText

Last synced: about 1 month ago
JSON representation

jQuery plugin, calculates the font-size and word-spacing needed to match a line of text to a specific width.

Lists

README 

        
# BigText



[![Build Status](https://travis-ci.org/zachleat/BigText.png?branch=master)](https://travis-ci.org/zachleat/BigText)



## BigText Makes Text Big 



* Read the [original blog post](http://www.zachleat.com/web/bigtext-makes-text-big/)

* Play around on the [demo](http://zachleat.github.io/BigText/demo/wizard.html)

* Watch the [video](http://www.youtube.com/watch?v=OuqB6e6NPRM)



## [Download bigtext.js](https://zachleat.github.io/BigText/dist/bigtext.js)



Or use [bower](http://bower.io/): `bower install bigtext`



## [Run the Tests](http://zachleat.github.io/BigText/test/test.html)



## Requirements



1. jQuery

1. A block level parent element. BigText will force all children to be block level as well.



## Learn More



BigText works best on browsers that support [subpixel font scaling](http://status.modern.ie/subpixelfontscaling). In order to best serve sizes to all browsers, BigText will adjust `word-spacing` as well as `font-size`.



## Examples



### Simple Example



    


        BIGTEXT

        Makes Text Big

    


    

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

    



### Better, Progressive Enhancement-Based Example



Use `display: inline` children (like a `span`) so the text will flow correctly if BigText doesn’t run.



    


        BIGTEXT

        Makes Text Big

    


    

    // Only BigText on “new-ish” browsers

    if( 'querySelectorAll' in document ) {

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

    }

    



### Using a List (ordered/unordered)



    
    

            
  1. BIGTEXT
    2. 

            
  2. Makes Text Big
    3. 

        


    

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

    



### Restrict to a subset of children



#### Opt-in children with JS



    


        
BIGTEXT


        
Makes Text Big


    


    

    $('#bigtext').bigtext({

        childSelector: '> p'

    });

    



#### Opt-out lines using markup



    
    

            
  1. BIGTEXT
    2. 

            
  2. Makes Text Big
    3. 

        


    

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

    



### Mix and Match Fonts



    
    

            
  1. 

                BIG

                TEXT

            
    2. 

            
  2. Makes Text Big
    3. 

        


    

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

    



Works also with `letter-spacing`, `word-spacing`, and `text-transform`.



### Using with Custom Font-Face



**Warning**: a known issue exists with the [Google/TypeKit font loader in WebKit](https://github.com/typekit/webfontloader/issues/26).



    


        BIGTEXT

        Makes Text Big

    


    

    

    $(function() {

        WebFont.load({

            custom: {

                families: ['LeagueGothicRegular'], // font-family name

                urls : ['css/fonts/league-gothic/stylesheet.css'] // URL to css

            },

            active: function() {

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

            }

        });

    });

    



### Change the default max font size



    


        BIG 

    


    

    $('#bigtext').bigtext({

        maxfontsize: 60 // default is 528 (in px)

    });

    



### Adding a default min font size



    


        This is a super long line that will probably be resized to epically small proportions. We need a minimum font size!

    


    

    $('#bigtext').bigtext({

        minfontsize: 16 // default is null

    });

    



### Is your text static and unchanging?



See [Paravel's FitText plugin](http://fittextjs.com/). Curious how the two plugins compare? I've written a full [comparison between FitText and BigText](http://www.zachleat.com/web/fittext-and-bigtext/).



## Extra Features



### Re-BigText on Resize (Responsive BigText)



As of 0.1.8, BigText implements its own debounced resize event.



### Debug Mode



BigText uses an off-canvas detached node to improve performance when sizing. Setting `DEBUG_MODE` to true will leave this detached node on the canvas for visual inspection for problem resolution.



    BigText.DEBUG_MODE = true;



## Common Problems



### Lines Wrapping Pre-BigText

The starting font-size must be small enough to guarantee that each individual line is not wrapping pre-BigText. If the line is too long, BigText will not size it correctly.

    

## Releases



* `v0.1.0` Initial release

* `v0.1.1` Added line exempt feature.

* `v0.1.2` Responsive BigText resizes with media queries and resize events (optionally debounced).

* `v0.1.3`

* `v0.1.4` on `2013-08-24` Numerous bug fixes, improved accuracy, adds debug mode. 

* `v0.1.5` on `2013-10-14` BigText uses all children by default (#40)

* `v0.1.6` Various bug fixes.



## Using the repo



Run these commands:



 * `npm install`

 * `bower install`

 * `grunt`



## Configuring Grunt



Rather than one giant `Gruntfile.js`, this project is using a modular Grunt setup. Each individual grunt configuration option key has its own file located in `grunt/config-lib/` (readonly upstream configs, do not modify these directly) or `grunt/config/` (project specific configs). You may use the same key in both directories, the objects are smartly combined using [Lo-Dash merge](http://lodash.com/docs#merge).



For concatenation in the previous Gruntfile setup, you’d add another key to the giant object passed into `grunt.initConfig` like this: `grunt.initConfig({ concat: { /* YOUR CONFIG */ } });`. In the new configuration, you’ll create a `grunt/config/concat.js` with `module.exports = { /* YOUR CONFIG */ };`.



## License



[MIT License](http://en.wikipedia.org/wiki/MIT_License)