0

i need to make a accessibility website. User should has a oportunity to change text size. Unfortunately font-size in styles are in PX, so i can't do it fast by .css and i need to use jquery. I have three buttons: 1st increase font-size for all elements by fontsize*1.05, 2nd increase font-size for all elements by fontsize*1.1 and 3rd button should reset all added new font-size to those that are in .css file.

$('.top-mid').on('click', function() {
        $('*').each(function() {
            var fontsize = parseInt($(this).css('font-size'));
            var newFontsize = (fontsize * 1.05) + 'px';
            $(this).css('font-size', newFontsize);
        });
    });
 $('.top-high').on('click', function() {
        $('*').each(function() {
            var fontsize = parseInt($(this).css('font-size'));
            var newFontsize = (fontsize * 1.1) + 'px';
            $(this).css('font-size', newFontsize);
        });
    });
.top li {
  cursor: pointer;
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>TEst test</p>
<h1>Test test</h1>
<a href=''>aaaaa</a>
<h2>test test h2 </h2>

<ul class="top">
    <li class="top-normal">A</li>
    <li class="top-mid">A<sup>+</sup></li>
    <li class="top-high">A<sup>++</sup></li>
</ul>

Please help me with how to make a top-normal button to reset all added font-size by other buttons

mmmat
  • 1
  • 1
    You'd be ***far*** better off spending any time you'd waste on this approach instead converting the site to use `em`. Then it's simply a case of adjusting the root element's font size whenever the user wants to change font size. – Rory McCrossan Apr 28 '20 at 11:49
  • So body should has font-size: 1em or 100% in this case? – mmmat Apr 28 '20 at 11:54
  • 1
    You can use any unit that's a relative size: https://jsfiddle.net/RoryMcCrossan/x8dfj4eu/ – Rory McCrossan Apr 28 '20 at 12:00
  • couldn't agree more, maybe use REM rather than EM though as this could be breaking on an existing design if it isn't structured correctly. Simply do a Ctrl + H (replace) on each font size by the corresponding amount. Always start at 100% (1rem) as 16px minimum (i.e. replace 16px with 1rem, 18 px with 1.125rem etc.). Any font sizes smaller need redesigning. – GrahamTheDev Apr 28 '20 at 13:00

0 Answers0