Simple, pixel-perfect text stroking for the web.
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!
-webkit-text-stroke
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.
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:
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.
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);
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;
Here's an example of how to use strokeText.js in an Angular directive, and react to text changes: https://stackblitz.com/edit/stroketext-angular
A jQuery plugin is included, but can't be installed via npm. It's dependent upon strokeText.js.
disableForFirefox
option.text-decoration
, e.g. strike-through or underline.strokeText.js
, please follow existing formatting conventionscd
to the strokeText.js
directorynpm i
npm run build
to create the minified strokeText module in the dist folderFiddle: https://jsfiddle.net/cburoure/