text-zoom-event

text-zoom-resize

A library that will detect when a user zooms text in their browser. This is a common use case for people who are visually impaired.

Example:

There is a great example and explanation of why you would want to use this script inside the Enable page Advanced Text Resizing

Usage:

You can include the script in your page, either with a script tag or using:

import textZoomEvent from 'path/to/textZoomEvent.module.js';

You should then initialize the module in your code using textZoomEvent.init():

// It is better if you give this the value of 
// parseFloat(getComputedStyle(document.documentElement).fontSize
// when the doc is not zoomed.
textZoomEvent.init(16);

You can find the current zoom factor using textZoomEvent.resizeFactor():

console.log('on load, resize factor is ', textZoomEvent.resizeFactor());

You can also use the textzoom event to fire when the user zooms the text with their browser:

document.addEventListener('textzoom', function (e) {
    console.log('ds', textZoomEvent.unzoomPixelValue, e.detail.resizeFactor());
});

How can you test? Different browsers have different UIs for zooming text. Full details can be found on my blog post about this library at https://www.useragentman.com/blog/?p=7749

Updating code

You should only manaually update js/textZoomEvent.js. Everything in the dist directory is autogenerated using npm.

Before you check a new version in, please run

npm run build:all

This will generate all the variations in the dist file:

• textZoomEvent-es4-min.js - minified es4 version
• textZoomEvent-es4.js - unminified es4 version
• textZoomEvent.module.js - ES module version (the recommended way of using this script)

If you are an admin of this project, you can use any of the following commands to update the version number on npm

npm run update:major # Update the major version of the project on npm (e.g. 1.2.4 to 2.0.0, for major updates)
npm run update:minor # Update to next minor version number (e.g. 1.2.4 to 1.3.0, for small fixes)
npm run update:patch # Update to next patch version number (e.g. 1.2.4 to 1.2.5, for trivial fixes)

All the npm run update:* commands should be run after pushing the code/merging to the master branch.