https://github.com/zoltan-dulac/text-zoom-resize

https://github.com/zoltan-dulac/text-zoom-resize

Last synced: 16 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/zoltan-dulac/text-zoom-resize
• Owner: zoltan-dulac
• License: unlicense
• Created: 2019-03-18T16:04:09.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-07T00:23:05.000Z (over 1 year ago)
• Last Synced: 2024-09-19T16:47:53.392Z (about 2 months ago)
• Language: HTML
• Size: 1.82 MB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# 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](https://useragentman.com/hero-image-text-resize.php)

## 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.