strokeText.js

Simple, pixel-perfect text stroking for the web. StrokeText.js adds strokes or "outlines" to live text. Doing this with CSS is scantly and poorly supported, so javascript to the rescue!

• Strokes do not overlap your text like they do with -webkit-text-stroke
• Supports nearly all browsers except IE8 and below
• Selectable text
• Dependency-free

Live demo

strokeText.js uses the canvas API to draw stroked text in a container with your text element positioned absolutely on top of it, allowing your text element to remain intact and selectable.

Usage

Install via npm with the package name stroketext.js or simply include strokeText.min.js in your project.

For each text element that you desire to stroke, create an instance, which accepts an ID string or reference to your text element:

var strokeText = new StrokeText('targetId');

Then call stroke(), which takes 2 args:

• stroke width
• stroke color

strokeText.stroke(3, 'white'); 

You can also call reset() to remove the stroke.

strokeText.reset();

Calling stroke() calls reset() before it does anything, so you can use stroke() to update the stroke at any time after initialization.

Options

You can optionally pass options (totally optional) to the initializer:

// defaults shown
var options = {
	lineCap: 'round', // ['round', 'butt', 'square']
	lineJoin: 'round', // ['bevel', 'round', 'miter']
	miterLimit: 10, // control spikeyness
	lineDashArray: [0, 0], // for dashed lines: [line, gap]
	debug: false, // examine measurements and properties used
	disableForFirefox: false // some fonts don't stroke well in firefox, bc they are rendered at varying baselines
}
var strokeText = new StrokeText('targetId', options);

Making strokeText.js responsive

Respond to viewport change events:

var resizeTimeout;
function handleViewportChange() {
	// timeout to debounce
	clearTimeout(resizeTimeout);
	resizeTimeout = setTimeout(function() {
		// reset and re-init so strokeText.js can re-evaluate container size
		strokeText.reset(); 
		strokeText = new StrokeText('targetId');
		strokeText.stroke(3, 'white'); 
	}, 100);
}
window.onresize = handleViewportChange;
window.onorientationchange = handleViewportChange;

Angular

Here's an example of how to use strokeText.js in an Angular directive, and react to text changes: https://plnkr.co/edit/wJM9InkTxdDn3GIVS4yy?p=preview

jQuery

A jQuery plugin is included, but can't be installed via npm. It's dependent upon strokeText.js.

Known issues

• In Firefox, some fonts (usually @font-face fonts) don't stroke well because they are rendered at a varying baseline. If this is your case, use the disableForFirefox option.
• Does not support text-decoration, e.g. strike-through or underline.
• Very thick strokes on certain fonts can leave cutouts on circle shapes like periods or dotted characters.
• Emojis don't get stroked 😬 due to the limitations of canvas.

TODO

• Better Firefox support. Due to a very old Firefox bug, canvas renders baselines of some fonts differently than html text. The issue is easily witnessed on the demo in Firefox. Some fonts have the stroke lined up perfectly, but for others it is too high, to a varying degree.

Contributing

• Do your work on strokeText.js, please follow existing formatting conventions
• In terminal, cd to the strokeText.js directory
• Run npm install
• Run gulp to create the minified strokeText module in the dist folder

Fiddle: https://jsfiddle.net/cburoure/