Text Resizing

 Currently, the text resizer plugins available on the Wordpress store are very limited. The best one we could find was Zeno Font Resizer, but it does not affect individual/local font sizes, only global font sizes, which were nearly always being overridden by individual/local font sizes, so the plugin was not working at all. Furthermore, the plugin increases the font size but not the zoom, so text will collapse into multiple lines and make the UI look really bad anywhere that there is limited space. 

Solution: Modify Zeno Font Resizer to Use the “zoom” CSS Property 

We fixed this issue by modifying the Zeno Font Resizer plugin to use the zoom CSS property instead of the font-size CSS property. This was done by modifying the code for the plugin to simply use one property instead of the other (as well as modifying the zoom stepping to be multiplicative instead of additive for more consistent stepping). 

The zoom CSS property controls the magnification level of an element. It scales each element on the page individually as opposed to just changing the font size (as with font-size) or scaling the whole page (as with transform: scale()). 

Developers/users should note that the zoom property does not work on Firefox, so the plugin hides the widget on Firefox. (The recommended solution to scale content is to use transform: scale()--but this does not actually work because it scales the whole page instead of the elements on the page. So for Firefox, we would either need a much more complex solution, or we can simply tell Firefox users to zoom in and out using their built-in browser zoom.) 

More information on the zoom property can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom 

Modified Plugin Download Link: 

https://drive.google.com/file/d/1GboGFGNm73ImHxEHw2_kiwrWmxpKpTbw/view?usp=sharing 

How to Use the Plugin: 

• Login to your WordPress site via the Admin login page  
• Locate plugins on the left side of the screen  
• Under plugins, scroll down to see Zeno Font Resizer and select “Settings”  
• On the settings page, you can customize the appearance and text steps of the Font Size plugin 

• Options to change Resize Steps and Character, Min and Max Size, Cookie Settings and HTML are available 

• You can also alter the widget appearance by going to “Appearance” -> “Customize” -> “Additional CSS” and Line 430 to 450 to alter the CSS 

Updating FAQ Pages Accordingly 

Be sure to update the FAQ page on the footer of the website to ensure users are up to date on any changes affecting their UX.