monitor-text-zoom

• Adds classes to the DOM, at specified text zoom levels, to help with page layout.
• Optionally stack Bootstrap columns when a specified text zoom level is reached.

Installation

1. Via file links

Download the code zip and extract dist/monitor-text-zoom.js and, if you want to stack Bootstrap columns, dist/monitor-text-zoom.css.

<script type="text/javascript" src="/path/to/monitor-text-zoom.js"></script>
<!--If you want to stack Bootstrap columns: -->
<link href="/path/to/monitor-text-zoom.css" rel="stylesheet" />

2. Via package installation

npm install monitor-text-zoom

import monitorTextZoom from "monitor-text-zoom";
// If you want to stack Bootstrap columns:
import "/path/to/node_modules/monitor-text-zoom/dist/monitor-text-zoom.css";

Initialize

Initialize with the size, in pixels, of 1 rem:

window.addEventListener("DOMContentLoaded", () => {
    monitorTextZoom.init({
        remSize: 16
    });
});

Stack bootstrap columns when a specified text zoom level is reached

monitorTextZoom.init({
    bootstrap: 5 // 3 | 4 | 5
});

Specify the class stack-tz-{value} to stack the columns if the text zoom percentage is ≥ {value}.

This example stacks the columns if the text zoom is ≥ 130%

<div class="row stack-tz-130">
    <div class="col-sm-6"></div>
    <div class="col-sm-6"></div>
</div>

Often, different styles are applied to the un-stacked columns which you may want to omit when the columns are stacked due to text zoom. When stacked, the class .bs{bootstrap version}-tz-query-match is attached to the row. You can used this to ensure that the additional styles are not applied:

@media (min-width: 768px) {
    .row:not(.bs5-tz-query-match) {
    }
}

Add classes to the body node at specific text zoom levels

monitorTextZoom.init({
    attachZoomLevels: [110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 250, 300, 350, 400, 450, 500]
});

For each specified text zoom level, the class tz-{value} is attached to the body node when the level is ≥ to {value}.

For instance, if the current text zoom level is 130, the body node will have the following classes attached: tz-110, tz-120 & tz-130.

body.tz-110 .my-node {}
body.tz-120 .my-node {}
body.tz-130 .some-other-node {}
...

Finer control at node level

1. Single query

Add a query to a node. When matched, the class tz-query-match is added to the node. In the following example, the query is matched if the current text zoom level ≥ 150%:

<div id="element-1" data-query-tz="gte:150"></div>

#element-1.tz-query-match {
}

As well as gte, you can specify gt, lt, lte and eq.

2. Specify more than one query per node

Specify multiple queries separated by a space. Append the subsequent queries with [{class name}]. You can also append a class name to the first query or omit to have the default tz-query-match attached.

<div id="element-1" data-query-tz="gte:150 gt:400[massive-zoom-amount]"></div>

#element-1.tz-query-match {
}
#element-1.massive-zoom-amount {
}

3. Complex queries

Use + and | to specify AND and OR operators. In the following example, the class tz-query-match is attached if the current text zoom level is (≥ 150% AND ≤ 200%) OR ≥ 300%:

<div data-query-tz="gte:150+lte:200|gte:300"></div>

Check the current text zoom level

const factor = monitorTextZoom.getZoom().factor;
const percentage = monitorTextZoom.getZoom().percentage;

Handle text zoom level change

1. Via init

monitorTextZoom.init({
    changed: e => {
        console.log(e.factor, e.percentage);
    }
});

2. Handle event

document.addEventListener("textzoom", e => {
    e = e.detail;
    console.log(e.factor, e.percentage);
});

To call changed and raise textzoom at initialization time:

monitorTextZoom.init({
    notifyLevelOnInit: true
});

Requery for dynamic content

If you add dynamic content with stack-tz-{value} or data-query-tz, a requery is required:

monitorTextZoom.requery();

Credits

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