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

Asked

Viewed 1,116 times

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 on each button, the corresponding function is called in javascript. And that the font increase or decrease to a certain size and ready (can not increase 2px every time clicked for example, it was 12 went straight to 20 and so on).

What is complicating is that this is a big site, many classes, ids, lots of content.

I thought about making the change in the font through getelementsbytagname, but the same tag varies its size and available space according to the page.

For example we have H1 with font 50 on a page and you can increase up to 60, 70, but we also have H1 with font 20 that increases up to 30 (otherwise exceeds the page size and mocks everything).

What’s left of option then? Do class by class?

javascript html css accessibility
  • 1

    An alternative would be to dynamically charge the css using javascript, loading a file that has all the size settings.

  • Ricardo, thanks for the idea! It worked for what I wanted.

3 answers

5

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 measurement that reflects the current size of the source, being 0.5em half the value, 1em the same value, 2em twice the value and so on

Here has an answer on these and other units of measurement of CSS

  • The ideal is just that, to define a base size and the others related to it. Only it seems that the question case is of a site that was not built thinking about it.

  • I believe that some Ctrl + H solve this

  • Hopefully. It’s +1 on your answer

  • In that case, I would have that problem of applying the change by tags. And on each page, the same tag has a different size, due to the available space etc. I ended up creating an alternative css and applying for a function. Thank you for the reply.

  • @Recursodeacessibility you can use classes (.pequeno, .medio, ...), I used tags as an example,

3

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

With Javascript, just change the value of the variable in the CSS that your page will fit. See an example, where you set the title <h1> will always be double the variable --font-size, while paragraphs shall be the --font-size.

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>

  • 1

    Always worth that warning: https://caniuse.com/#feat=css-variables

  • In that case, I would have that problem of applying the change by tags. And on each page, the same tag has a different size, due to the available space etc. I ended up creating an alternative css and applying for a function. Thank you for the reply.

0

I created an alternative css with larger fonts, customizing each class the way I wanted and applied it the following way:

<--! 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');
}

Browser other questions tagged javascript html css accessibility

You are not signed in. Login or sign up in order to post.