Allow me to introduce

Percentext.js

The jQuery plugin that adjusts font-size and letter-spacing, so you can set a percentage width for your headers.

The jQuery plugin that adjusts font-size and letter-spacing,

so you can set a percentage width for your headers.

Quick Start Guide

A Quick Demonstration.

Wouldn't it be nice
if you could style text
just like any other element?
Why specify text in terms of font size
when you specify everything else in terms of width?
I just wanted each of these lines to take up 100% of their parent,
and to do so in a responsive way using CSS alone would have involved a looot of breakpoints.
So, I tinkered with jQuery, and came up with this implementation that dynamically changes letter-spacing and font-size to fit.

Why Percentext?

Percentext brings traditional DOM arrangement to text-based elements, allowing developers and designers the ability to quickly, easily and responsively size headers to be 'just right' across devices.

Alternatives

Many people who find it irksome to deal with font sizes use FitText.js. FitText is a great little plugin, but it isn't quite the same as Percentext. FitText arbitrarily sets font-size to be equal to a fraction of the parent container's width, allowing users to tweak via a 'compressor' to get the size just right.

Pros and Cons

Percentext's advantage is that it allows you to set a percentage and be done with it—no tweaking required. It also lets you achieve some pretty cool effects, without much work. The downside to this convenience is performance; FitText is a very simple plugin that works lightning fast. Percentext is pretty quick too, but it can be a bit sluggish if you have many headers that you wish to size in preciseMode.

Quick Start Guide.

Installation

With Bower new!

Easy! CD into your project directory, and run:

$bower install percentext

By default, bower installs packages into bower_components. If you haven't tinkered with the defaults, you can then include percentext like so:

<script type="text/javascript" src="bower_components/percentext/percentext.js">
Learn more about awesome Bower!

Without Bower

  1. First thing's first, make sure you have jQuery installed! Percentext depends on it.
  2. Download percentext.js (or the minified version) from GitHub .
  3. Throw your new download into your project folder. Right next to all the other scripts. It'll fit right in.
  4. Include the following line of HTML into the <head> section of the page(s) you want to use Percentext in:
    <script type="text/javascript" src="path/to/percentext.js">
  5. That's it! You're loaded and ready to rock.

Usage

Percentext is super easy to use.

If you're happy with the default settings, you can just call it on any element you want:

$(".some-class").percentext();

The default assumes you want the header's text to take up 100% of the width. If you want to specify a custom width, you can do so in the following ways:

// As a percentage:
$(".some-class").percentext({ width: "80%" });
$(".some-class").percentext({ width: 80 });

// As a pixel value:
$(".some-class").percentext({ width: "500px" });

There are a whole bunch of ways to customize Percentext to suit your needs (see below), but one more critical option to know about: Precise Mode.

Precise mode isn't happy to just grab the most appropriate font size, it uses letter spacing to try and match your requested width to the pixel. The downside is it can be pretty greedy with your CPU's cycles. If you're noticing the performance of Percentext leaves something to be desired, turn it off like so:

$(".some-class").percentext({ preciseMode: false });
The Documentation.

Customizing with Options

Percentext features a number of options that allow you to change how the plugin works. Most are pretty self-explanatory, but there are some pretty cool tweaks that might not be immediately obvious.

width
Default: 100
Accepted values: n, "n%", "npx", where n is any integer.

The meat of the plugin. Will adjust font size so that the text element takes up the specified width. Can be given in pixels or as a percentage of the parent container. Only works on single-line text elements.

// Example, takes up 400 pixels
$(".some-class").percentext({
  width: "400px"
});
letterSpacing
Default: 100
Accepted values: Any number

Provide a value, in pixels, for desired letter spacing. Note that Percentext will examine your CSS for letter-spacing, so you can provide it there instead. If it is provided in both places, Percentext will prioritize the value submitted through this option.

letterSpacing and preciseMode: please note that if you have preciseMode enabled, Percentext will use this value as the starting point, and may adjust it to achieve a perfect fit.

$(".some-class").percentext({
  letterSpacing: -3
});
preciseMode
Default: true
Accepted values: true, false

Precise mode uses line spacing to fine-tune the text element to take up as close to the desired width as possible. Set to false when you don't need pixel-perfection, to improve performance.

$(".some-class").percentext({
  width: 40,
  preciseMode: false
});
relativeSpacing
Default: true
Accepted values: true, false

If a custom value is passed in for letterSpacing, this boolean will decide whether to scale that value depending on the font size, or use the given value as absolute, regardless of font size.

// letterSpacing will always be 2px.
$(".some-class").percentext({
  letterSpacing: 2,
  relativeSpacing: false
});


// letterSpacing will scale with font size.
$(".some-class").percentext({
  letterSpacing: 2
});
textAlign
Default: null
Accepted values: left, right, center, justify

Set the desired alignment for your text. Acts as a higher specificity than applying CSS directly to the element.

$(".some-class").percentext({
  textAlign: "right"
});
minFontSize
Default: null
Accepted values: Any integer

Limits Percentext from setting a font size below this supplied value. Given in pixels.

// Will not set font-size below 12px.
$(".some-class").percentext({
  minFontSize: 12
});
maxFontSize
Default: null
Accepted values: Any integer

Limits Percentext from setting a font size above this supplied value. Given in pixels.

// Will not set font-size above 60px.
$(".some-class").percentext({
  maxFontSize: 60
});

Known Bugs

All currently-unfixed known issues are listed here:

  1. Elements inside hidden containers. Percentext crashes if it's called on an element whose parent has been hidden with display: none;. This is a pretty big deal, for those who want to hide sections with media queries, and I'm working on finding a solution.
  2. Inconsistent position at high negative letter-spacing. Really high (20px+) negative letter-spacing can cause the element to shift outside its container. I've tried to combat this situation with negative text-indent, but I haven't quite cracked it yet.

License

This plugin released under the MIT open-source license. You can read all about it here, but the long and short of it is you can do pretty much whatever you want with this plugin, personal or commercial, as long as you give me credit and don't hold me liable for anything.

Are you using this plugin? I'd love to see what you've done with it! Please drop a line and let me know =)