CODEWITHSUNDEEP
javascripthtmlcssaccessibilityzooming
fslaktern
fslaktern

Reputation: 89

Changing fontSize of * (everything) with JavaScript

In my project I want users to be able to zoom in on the webpage. But as the in-browser-zoom-function with JS isn't widely supported, I figured another way to zoom is to change the font-size: n%; as I have used rem units for everything size related.

If I change the font-size for * in css, everything else scales with the font-size. E.g.: *{font-size: 110%;} Would be the same as changing browser-zoom to 110%.

Additionally, I would like to use a select > option to choose between 50% and 150%. That way I could utilize onchange="this.value"

How do I change the fontSize/font-size of * in CSS with Javascript?

By * (CSS) I mean every element on the page, not just a div, form or id.

Upvotes: 1

Views: 5671

Answers (3)

fslaktern
fslaktern

Reputation: 89

As I used rem units on every element, all I needed to do was to change the font size of the element. Here's the code I used for it to work out for me:

<html id="html" style="font-size: 100%;">
  <input type="range" id="zoomInput" value="100" min="50" max="200" step="1" oninput="document.getElementById('html').style.fontSize = this.value + '%';">
  
  <p style="font-size: 1rem; transition: font-size 80ms ease-out">Example text</p>
</html>

This makes sense as rem units are relative to the root font size, i.e. the font size value of (default 12px iirc), unlike em units which are relative to the font size value of itself. See https://www.w3schools.com/cssref/css_units.php

Tip: The em and rem units are practical in creating perfectly scalable layout!

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206477

  • Set form-elements font or font-size to inherit (in order to override browser defaults)
  • If your elements have relative font-size, all it takes is to control the font-size of body element
  • Stop using inline JS. Use Element.addEventListener() instead. It's easier to debug JS when you're not using it withing HTML tags.

document.querySelector("#fontSize").addEventListener("input", function() {
  document.body.style.fontSize = this.value +"%";
});
h1 {
  font-size: 4em; /* Demo */
}

input,  
textarea,
button {
  font: inherit; /* override browser defaults */
}
<label><input id="fontSize" type="range" min="10" max="2000" step="1" value="100"></label>

<h1>H1 title</h1>
<p>Lorem ut florem</p>
<blockquote>
  blockquote
</blockquote>
<form>
  <input type="text" value="Lorem ut florem">
  <button type="button">Button</button>
</form>

Upvotes: 1

GrahamTheDev
GrahamTheDev

Reputation: 24885

Please don't do this!

As this is marked accessibility I cannot recommend doing exactly what you suggested.

Offering users the option to increase font size - massive bonus points.

Scaling everything on the page by an equal amount - massive no no.

The big problem with this is that the page will grow in width as you increase font size.

This will result in horizontal scrolling as well as vertical scrolling which is a big no no!

Why does it matter?

The people most likely to increase your font size are also likely to be the people who rely on a screen magnifier.

Scrolling in both directions is a nightmare for Screen Magnifier users, as part of a sentence may be off the screen.

It is also a bad experience for people with dyslexia etc.

They often struggle with making sure they don't skip a line, having to scroll side to side while reading makes this problem 100 times worse.

Why does browser zoom work for accessibility then?

The difference between increasing the size of everything and using the browser zoom is that when you zoom your browser it also calculates the effective width of the page in CSS pixels.

So if you zoom a 1920px wide screen 200% it exposes the width as 960px, which will trigger any media queries designed for a tablet view (for example) and adjust your styles accordingly.

What should you do?

As I said at the beginning, letting people change their font size - big bonus points!

However what you should do instead of scaling everything is that you should make sure all containers on the page can accept your larger font size and define all fonts in em or rem.

This way all you need to do is change the <HTML> font size and every single font on the page will scale by the same amount.

It will also obey user font size settings if you set your HTML units as percentages.

In the following example all you would do is change the HTML from 100% to 150% and all font sizes would increase without affecting container sizes etc.

The below example also illustrates what happens if you increase your font size and a container does not allow enough space at 150% font size.

Also try the below example with your browser font size set to maximum and you will see the text scales without affecting the container size.

Font size 100% example

html{
    font-size: 100%;
}
h1{
    font-size: 3rem;
}
p{
    font-size: 1rem;
}
.container{
    width: 33%;
    background-color: #ddd;
    overflow: hidden;
}
<div class="container">
<h1>Heading</h1>
<p>text</p>
</div>

font size 150% example

html{
    font-size: 150%;
}
h1{
    font-size: 3rem;
}
p{
    font-size: 1rem;
}
.container{
    width: 33%;
    background-color: #ddd;
    overflow: hidden;
}
<div class="container">
<h1>Heading</h1>
<p>text</p>
</div>

Don't define containers in the same units (as a general rule) so that they do not scale beyond the bounds of the page.

If you do this you will make the page far more accessible without introducing issues that actually reduce the accessibility of the page by forcing users to scroll in two directions.

Upvotes: 3

Related Questions