Increase and Decrease Font, how to apply on a large site?

Question

Increase and Decrease Font, how to apply on a large site?

Navigation

#1 by (5 votes)
#2 by (3 votes)
#3 by (0 votes)

2

I have to apply the accessibility feature to increase and decrease font. I currently have 3 buttons: Small Font, Normal Font and Large Font.

The idea is that when you click each button, its function is called in javascript. And that the font increases or decreases to a certain size and ready (not being able to increase 2px every time clicked, for example, 12 was right for 20 and so on).

What is complicating is that it is a large site, many classes, ids, lots of content.

I thought of making the change in the source through getElementsByTagName, but a same tag varies its size and available space according to the page.

For example, we have H1 with font 50 on a page and it can increase up to 60, 70, but we also have H1 with font 20 that increases up to 30 (otherwise it goes beyond page size and zoa everything).

What option do I have left then? Do class by class?

javascript html css acessibilidade

asked by anonymous 03.08.2018 / 19:49

3 answers

DisplayNameFor and DisplayFor Detect parts of a string

score 5 · Answer 1

If I understand what you want:

const btns = document.getElementsByTagName('button');

//Muda a fonte do corpo da página para 5px 
btns[0].addEventListener('click', () => document.body.style.fontSize = '5px');

//Muda a fonte do corpo da página para 20px
btns[1].addEventListener('click', () => document.body.style.fontSize = '20px');

//Muda a fonte do corpo da página para 35px
btns[2].addEventListener('click', () => document.body.style.fontSize = '35px');

/* Aqui define o tamanho base, não precisa ser em px */
body {
  font-size: 20px;
}

/* Os botões ficaram do mesmo tamanho idependentemente do tamanho */
button {
  font-size: 20px;
}

/* Os outros vão aumentar/diminuir proporcionalmente */
h1 {
  font-size: 1.5em
}
p {
  font-size: 1em
}
span {
  font-size: 0.5em
}

<body>
  <button> Pequeno </button>
  <button> Médio </button>
  <button> Grande </button>

  <h1>Texto grande</h1>
  <p>Texto médio</p>
  <span>Texto pequeno</span>
</body>

The em is a unit of measure that reflects the current font size, being 0.5em half the value, 1em the same value, 2em double the value and so on

Here you have an answer on these and other CSS units of measure

score 3 · Answer 2

I think the simplest thing is for you to work with variables in CSS and set the font-size property of the elements you want to change based on your variable.

With JavaScript, you simply change the value of the variable in the CSS that your page will fit. Here's an example, where I have defined that the title <h1> will always be twice the variable --font-size , while the paragraphs will be --font-size itself.

const buttons = document.querySelectorAll('button');

for (let button of buttons) {
  button.addEventListener('click', function (event) {
    document.body.style.setProperty('--font-size', this.dataset.fontSize);
  });
}

body {
  --font-size: 1rem;
}

h1 {
  font-size: calc(2 * var(--font-size));
}

p {
  font-size: var(--font-size);
}

<button data-font-size="0.5rem">Pequena</button>
<button data-font-size="1.0rem">Normal</button>
<button data-font-size="2.0rem">Grande</button>

<h1>Titulo</h1>
<p>Texto</p>

score 0 · Answer 3

I created an alternate css with the larger fonts, customizing each class the way I wanted and applied it as follows:

<--! Defini  um id para o css externo atual--> 
<link href="estilos.css" rel="stylesheet" id="css">

//altero a variável css (que recebe o arquivo atual) para que ela receba css externo, com as fontes maiores
function fontegrande ()
{
  var css = document.querySelector('#css');
  css.setAttribute('href', 'estilosmaiorecontraste.css');
}