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

Related tags

Typography BigText
Overview

BigText

Build Status

BigText Makes Text Big

Download bigtext.js

Or use bower: bower install bigtext

Run the Tests

Requirements

  1. jQuery
  2. 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. In order to best serve sizes to all browsers, BigText will adjust word-spacing as well as font-size.

Examples

Simple Example

<div id="bigtext">
    <span>BIGTEXT</span>
    <span>Makes Text Big</span>
</div>
<script>
$('#bigtext').bigtext();
</script>

Better, Progressive Enhancement-Based Example

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

<div id="bigtext">
    <span>BIGTEXT</span>
    <span>Makes Text Big</span>
</div>
<script>
// Only BigText on “new-ish” browsers
if( 'querySelectorAll' in document ) {
    $('#bigtext').bigtext();    
}
</script>

Using a List (ordered/unordered)

<ol id="bigtext">
    <li>BIGTEXT</li>
    <li>Makes Text Big</li>
</ol>
<script>
$('#bigtext').bigtext();
</script>

Restrict to a subset of children

Opt-in children with JS

<div id="bigtext">
    <p>BIGTEXT</p>
    <p>Makes Text Big</p>
</div>
<script>
$('#bigtext').bigtext({
    childSelector: '> p'
});
</script>

Opt-out lines using markup

<ol id="bigtext">
    <li>BIGTEXT</li>
    <li class="bigtext-exempt">Makes Text Big</li>
</ol>
<script>
$('#bigtext').bigtext();
</script>

Mix and Match Fonts

<ol id="bigtext">
    <li>
        <span style="font-family: sans-serif">BIG</span>
        <span style="font-family: serif">TEXT</span>
    </li>
    <li>Makes Text Big</li>
</ol>
<script>
$('#bigtext').bigtext();
</script>

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.

<div id="bigtext">
    <span>BIGTEXT</span>
    <span>Makes Text Big</span>
</div>
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
$(function() {
    WebFont.load({
        custom: {
            families: ['LeagueGothicRegular'], // font-family name
            urls : ['css/fonts/league-gothic/stylesheet.css'] // URL to css
        },
        active: function() {
            $('#bigtext').bigtext();
        }
    });
});
</script>

Change the default max font size

<div id="bigtext">
    <span>BIG</span><!-- the shorter the line, the larger the size required --> 
</div>
<script>
$('#bigtext').bigtext({
    maxfontsize: 60 // default is 528 (in px)
});
</script>

Adding a default min font size

<div id="bigtext">
    <span>This is a super long line that will probably be resized to epically small proportions. We need a minimum font size!</span>
</div>
<script>
$('#bigtext').bigtext({
    minfontsize: 16 // default is null
});
</script>

Is your text static and unchanging?

See Paravel's FitText plugin. Curious how the two plugins compare? I've written a full comparison between 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.

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

Comments
  • BigText not working on iPhone

    BigText not working on iPhone

    Hi all,

    http://bootcoffee.com/about/

    I'm working on a site using BigText and I can't seem to get it to load on an iPhone. Has anyone else had this issue?

    When testing using a user agent switch in Firefox, it works as it should. However on an iPhone, it doesn't, which makes it hard to test.

    Thought I'd check here if someone had some advice for me.

    Thanks, Rick.

    CanReproduce 
    opened by rickpbaker 11
  • Does not function in Firefox

    Does not function in Firefox

    This simple example does not seem to work in Firefox 25.0.1 on OS X (it works in other browsers):

    http://jsfiddle.net/mnH2X/

    The issue seems to be a NotSupportedError on line 35 of bigtext.js.

    Forgive me if I'm missing something obvious.

    Planned 
    opened by tb000 8
  • Overflowing text using certain fonts

    Overflowing text using certain fonts

    I'm using BigText for a project I'm working on, but when using fonts from Google Webfonts, the text often (not always) overflows the h1 element, as seen in the image below:

    Overflowing text

    My HTML file contains this:

    <!DOCTYPE html>
    <html lang="da">
    <head><link href='http://fonts.googleapis.com/css?family=Alegreya+SC:400,900,400italic' rel='stylesheet' type='text/css'>
        <meta charset="utf-8">
        <title></title>
    
        <link rel="stylesheet" href="style_test.css" type="text/css" />
    
    </head>
    <body>
    
    <h1 id="bigtext"><div>Big fat</div><div>Bold Headline</div></h1>
    <h1 id="bigtext2"><div>Big fat</div><div>Bold Headline</div></h1>
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <script src="scripts/bigtext.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
    <script type="text/javascript">$(function() {
        WebFont.load({
            custom: {
                families: ['Alegreya SC'], // font-family name
                urls : ['style_test.css'] // URL to css
            },
            active: function() {
               $('#bigtext').bigtext();
               $('#bigtext2').bigtext();
            }
        });
    });
    </script>
    </body>
    </html>
    

    My CSS file looks like this:

    #bigtext {
        font-family:"League Gothic";
        text-transform: uppercase;
    }
    
    #bigtext2 {
        font-family: "Alegreya SC";
    }
    
    h1 {
        width:500px;
        border:1px solid #999;
    }
    
    h1 > div {
        line-height:1;
        white-space: nowrap;
    }
    
    opened by pshoeg 6
  • Bigtext only fires after Window resize

    Bigtext only fires after Window resize

    Hi.

    I've implemented bigtext. The text is only resized to the parent element after I resize the browser window.

    Why is that?

    This is my js:

    $(document).ready(function() { $('#bigtext').bigtext(); });

    This is my html: <div id="bigtext" style="width: 100%"><div class="temp">28.50°</div></div>

    This is my css: .temp{ font-family: "league-gothic",sans-serif; font-weight: 400; color: #2EA959; line-height: 1; }

    I load the typekit font via standard snipets. not with the fontloader api. It happens in webkit and also in FF.

    opened by kaspar-allenbach 5
  • Custom Font-Face issue in WebKit

    Custom Font-Face issue in WebKit

    I use BigText (and freaking love it!) on my site ( http://chrisnager.com ) and found that it does not work immediately, or sometimes at all, on the iPhone in portrait mode or in Firefox 3.6. Strangely enough, if you switch to landscape mode on the iPhone and then back to portrait, it will work. Sometimes if you wait long enough, it will work in Firefox 3.6.

    opened by chrisnager 5
  • The latest release is no longer compatible with jQuery 3

    The latest release is no longer compatible with jQuery 3

    After upgrading to new version (1.0.1) I noticed that jquery migrate plugin throws warnings because of using "bind" and "unbind" in following line:

    $(window).unbind(eventName).bind(eventName, function() {

    Bind/unbind are deprecated in jQuery 3. Use on/off to attach/detach event listeners.

    opened by smohadjer 4
  • Working with Flexslider

    Working with Flexslider

    Hi, great plugin! I got this working with Flexslider using $(window).load but it still only works for the first slide - any suggestions on how to get it to work for text in all slides? Thanks!

    Question ThirdPartyIntegration 
    opened by jhebb 4
  • BigText throws error under Chrome 28.0.1500.71

    BigText throws error under Chrome 28.0.1500.71

    Given the test file,

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="BigText/bigtext.js"></script>
    

    a Javascript error appears:

    Uncaught TypeError: Cannot call method 'getPropertyValue' of null (bigtext.js:36)
    

    Note that if I paste the block into the JS console, ret is calculated properly:

    var test = $('<div/>').css({
                  position: 'absolute',
                  'font-size': '14.1px'
                }).appendTo(document.body).get(0),
                fontSize = window.getComputedStyle( test, null ).getPropertyValue( 'font-size' ),
                ret = fontSize === '14px';
    

    lwvi2ca

    opened by pavellishin 4
  • Minimum font size, or minimum div width

    Minimum font size, or minimum div width

    So...this plugin is awesome. And I'm psyched to bake it into a project I'm working on. But, I'm running into a problem. Let me first outline what I'm trying to do.

    I have a div that will contain text that will be provided by a user, so I won't know how long it will be. So observe these examples:

    example 1: User-Provided Text: Viva La Vida

    In this example (1), the text would be large if the div were like 600px. Awesome. If it shrinks down to 200px, the text will be small, but readable. Awesome.

    example 2: User-Provided Text: This Is The Name Of an Album Title, And It's Really Long, Cuz I'm A Really Indie Artist.

    In this example (2), the text would be readable at 600px like this: http://cl.ly/CO5e Awesome. But if the container shrunk down to say, 500px, here's what it would like: http://cl.ly/CO0y Not awesome.

    So my thought process is, in options there should be something like minfontsize: BigText.DEFAULT_MIN_FONT_SIZE_PX that say if you set to 12, the font size would shrink no further and just wrap the line at that minimum text. So whatever div width calculates a size 12 font, if the div shrinks below that the font-size is frozen at 12 and just wraps normally, or responds to text-overflow or whatever. Does that make sense?

    So I'm wondering if I'm just missing an option for this or spacing on an easy workaround. Thanks for taking the time to respond!

    opened by davecoffin 4
  • Doesn't play nicely with text transformations.

    Doesn't play nicely with text transformations.

    Resizing on items that have 'font-weight:lighter; letter-spacing: 0; text-transform: uppercase' produces strange resize results.

    e.g.

    .js_bigtext { width: 100%; margin: 22px 0 0 0; }
    h1 { display: block; width: 100%; font-weight: lighter; letter-spacing: 0; text-transform: uppercase; }
    
    <div class="js_bigtext">
        <h1>Title Here</h1>
    </div>
    
    $('.js_bigtext').bigtext({
        childSelector: '> h1'
    });
    
    opened by acleancoder 4
  • Using font-size EM not PX

    Using font-size EM not PX

    In your demo the font is re-sized using EM, but when I use it on my site, it uses PX. How do i get it to use the EM font size. Or even a percentage font size. Thanks

    opened by BenjaminWalsh 3
  • bigtext is not a function

    bigtext is not a function

    I've got dynamic, changing text where I call the function when it changes, so I've got long and short text, once the text has been rendered, it's stuck on that size, I get an error saying bigtext is not a function. I've also got another error: n.GET is not a function. that's there when the page loads.

    opened by J-Cake 0
  • Doesn't work out of the box with webpack.

    Doesn't work out of the box with webpack.

    Using webpack almost works out of the box.

    Steps to repro.

    • npm install --save bigtext
    • require('bigtext') somewhere in the project
    • webpack a bundle and get this output...
          looking for modules in /Users/martincowie/Development/Diffusion/Main/javascript/console/node_modules
            using description file: /Users/martincowie/Development/Diffusion/Main/javascript/console/package.json (relative path: ./node_modules)
              Field 'browser' doesn't contain a valid alias configuration
              using description file: /Users/martincowie/Development/Diffusion/Main/javascript/console/node_modules/bigtext/package.json (relative path: .)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/martincowie/Development/Diffusion/Main/javascript/console/node_modules/bigtext is not a file
                .ts
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/martincowie/Development/Diffusion/Main/javascript/console/node_modules/bigtext.ts doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/martincowie/Development/Diffusion/Main/javascript/console/node_modules/bigtext.js doesn't exist
                as directory
                  existing directory
                    using path: /Users/martincowie/Development/Diffusion/Main/javascript/console/node_modules/bigtext/index
                      using description file: /Users/martincowie/Development/Diffusion/Main/javascript/console/node_modules/bigtext/package.json (relative path: ./index)
                        no extension
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/martincowie/Development/Diffusion/Main/javascript/console/node_modules/bigtext/index doesn't exist
                        .ts
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/martincowie/Development/Diffusion/Main/javascript/console/node_modules/bigtext/index.ts doesn't exist
                        .js
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/martincowie/Development/Diffusion/Main/javascript/console/node_modules/bigtext/index.js doesn't exist
    

    Essentially webpack is looking in the wrong place, where it should be looking for ./dist/bigtext.js. Setting browser in package.json to dist/bigtext.js will resolve the problem.

    As a workaround I have configured my webpack config thus ...

    ...
      resolve: {
        extensions: ['.ts', '.js' ],
        alias: {
            bigtext: "bigtext/dist/bigtext.js"
        }
      }
    
    opened by martin-cowie 0
  • BigText stops working when required font-size is less than 24px

    BigText stops working when required font-size is less than 24px

    I'm working on a responsive website at the moment and bigtext.js is working great on resizing my title within a fluid box UNTIL the font-size would need to be less than 24px. At this point instead of continuing the size the font down by 0.1 increments the font-size jumps to 10px. When the box gets wider the text remains at 10px until it can jump to 24px again.

    Is there a way to override this behaviour so it continues to scale please?

    opened by Tomtids 1
  • passing in the window object

    passing in the window object

    Hey, I've inherited a project that is using your plugin, and I've caused somewhat of an error while updating the webpack configurations, and some other things. To give a bit of backstory, We are requiring jquery in our entry point, but assigning it to the window, so then jquery is globally accessible from all files without having to require it for each one.

    Anyway - I ran into a problem, where after I've updated webpack, its telling me that what 'window' var that is passed in in undefined, and I'm not sure why. But I dont really think you even need to pass in the window object, because its globally available anyway, right?

    opened by z1haze 0
  • "Re-BigText on Resize" is misleading

    Not sure if I entirely understood this section of the readme, but I was initially reading "As of 0.1.8, BigText implements its own debounced resize event." to mean that BigText will automatically update its size on a window resize - which it does not.

    This is a bit confusing (to me). If there is it's own event, does that mean it will fire that event on resize? Or does it mean it will automatically resize itself, in a debounced manner? Or does it mean there is an event to can fire to make it resize? I think the documentation should be more explicit here. Also, I'd expect a 'resize' option being passed in to mean that the plugin will itself take care of resizing text on a resize event.

    opened by kontur 0
Owner
Zach Leatherman
bleep blorp the singularity is nigh
Zach Leatherman
Text Neon Golden effect jQuery plug-in

novacancy.js novacancy.js is a text neon golden effect jQuery plugin. Demo Visit demo site Basic Usage Just use $('#no').novacancy(); or detail $('#no

Chuck Chang 185 Sep 24, 2022
A jQuery plugin for inflating web type

FitText.js, a jQuery plugin for inflating web type FitText makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizi

Dave Rupert 6.8k Dec 30, 2022
Add a super simple rotating text to your website with little to no markup

#Super Simple Text Rotator by Pete R. A light weight jQuery plugin that will allow you to add a super simple rotating text to your website with little

Pete R. 754 Dec 6, 2022
Make your text sizing responsive!

jQuery responsiveText A jQuery plugin to set font sizes responsively based on its' container width. Use jQuery responsiveText to have scalable headlin

Gary Hepting 123 Oct 31, 2022
Web typography at its finest: font-size and line-height based on element width.

FlowType.JS Responsive web typography at its finest: font-size and line-height based on element width. Check out the demo site. What does FlowType.JS

Simple Focus 4.6k Dec 30, 2022
An Awesome Toggle Menu created with HTML,CSS,JQuery,font-awesome and line by line comment.

Demo : https://blackx-732.github.io/AwesomeMenu/ Under open source license No ©copyright issues Anyone can be modify this code as well Specifically we

BlackX-Lolipop 2 Feb 9, 2021
Wordle and Termooo style classic word guessing game for the command line. One new word per day!

Wordle and Termooo style classic word guessing game for the command line. One new word per day!

Anderson Silva 3 Nov 27, 2022
Truncate a string to a specific width in the terminal

cli-truncate Truncate a string to a specific width in the terminal Gracefully handles ANSI escapes. Like a string styled with chalk. It also supports

Sindre Sorhus 78 Oct 10, 2022
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
一个运行在浏览器内的提词器,可翻页,可变速,可自定义字体、大小、颜色等多种选项 A teleprompter in web browser, page down, speed up , custom font family/size/color and more.

Introduction 一个运行在浏览器内的提词器,可翻页,可变速,可自定义字体、大小、颜色等多种选项 A teleprompter in web browser, page down, speed up , custom font family/size/color and more. inst

Daniel Liu 19 Aug 17, 2021
Generate font size variables for a fluid type scale with CSS clamp.

Fluid Type Scale Calculator Generate font size variables for a fluid type scale with CSS clamp. Overview Customize everything, grab the output CSS, an

Aleksandr Hovhannisyan 136 Dec 31, 2022
Simple, buffered, line-by-line file reader with customizable buffer size.

simple-line-reader Simple, buffered, line-by-line file reader with customizable buffer size. Install npm install simple-line-reader yarn add simple-li

null 3 Jan 15, 2022
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Introducing FitVids.js A lightweight, easy-to-use jQuery plugin for fluid width video embeds. FitVids automates the Intrinsic Ratio Method by Thierry

Dave Rupert 4.8k Dec 24, 2022
Remade from Catch-Word-js [https://github.com/Jortsoft/Catch-Word-js]

Author: https://github.com/Jortsoft Catch-Word-js This is very simple game catch word with JavaScript and Jquery install and run guide! download proje

Dimitri Kvachakhia 3 Jun 12, 2021
A complete media query framework for CSS, to apply specific properties in specific screen

A complete media query framework for CSS, to apply specific properties in specific screen Note: Size of every media query is `50px, 100px, 150px, 200p

Rohit Chouhan 6 Aug 23, 2022
This bot was created with the sole purpose of replying to messages with the word "que" with the word "so"

UselessComplete This bot was created with the sole purpose of replying to messages with the word "que" with the word "so" If you want tu support the b

ThisIsAName 6 Aug 30, 2022
Smooth scrolling effect (while using mouse wheel). No jQuery or other unnecessary stuff needed.

scrooth Smooth scrolling effect (while using mouse wheel). No jQuery or other unnecessary stuff needed. Why? I needed that, and I was unable to find p

Rafał Spiżewski 20 Aug 29, 2022
Calculates dependencies for a Go build-target and submits the list to the Dependency Submission API

Go Dependency Submission This GitHub Action calculates dependencies for a Go build-target (a Go file with a main function) and submits the list to the

GitHub Actions 33 Dec 7, 2022
Extracts favicon of the current page and calculates their murmurhash. Firefox extension source code.

Favicon to Murmurhash Extracts favicon of the current page and calculates their murmurhash. Shows links to shodan search based on favicon murmurhashes

null 16 Dec 17, 2022
Calculates maximum composite SLA for a list of sequentially provided cloud services or your custom-defined services.

SlaMax Calculates maximum composite SLA for a list of sequentially provided cloud services or your custom-defined services. Here are a few use-cases y

Mikael Vesavuori 4 Sep 19, 2022