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 2 months ago
JSON representation
jQuery plugin, calculates the font-size and word-spacing needed to match a line of text to a specific width.
- Host: GitHub
- URL: https://github.com/zachleat/BigText
- Owner: zachleat
- License: mit
- Created: 2011-01-05T04:01:11.000Z (almost 14 years ago)
- Default Branch: master
- Last Pushed: 2020-09-22T10:18:50.000Z (about 4 years ago)
- Last Synced: 2024-10-25T04:48:06.362Z (about 2 months ago)
- Language: JavaScript
- Homepage: http://www.zachleat.com/web/bigtext-makes-text-big/
- Size: 3.86 MB
- Stars: 887
- Watchers: 35
- Forks: 257
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-javascript - BigText - jQuery plugin, calculates the font-size and word-spacing needed to match a line of text to a specific width. - ★ 851 (Typography)
README
# BigText
[](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)
- BIGTEXT
- Makes Text Big
$('#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
- BIGTEXT
- Makes Text Big
$('#bigtext').bigtext();
### Mix and Match Fonts
-
BIG
TEXT
- Makes Text Big
$('#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)