Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Effective Way of Increasing/Decreasing Font Size of All Elements on Page

In order to improve UX, I'm planning to have a font size increase/decrease/reset tool on all the pages of my website (A-, A, A+)

The problem I'm facing is that the font size used by different elements on the page is not uniform. Some are 14px, some are 18px, some are 12px and some are 15px.

As such, using the body tag for manipulating the font size will not get the desired result.

Is there a solution which will go through each element (get its present size) and increase its font size by 1 if A+ was clicked or decrease the size by 1 if A- was clicked and reset back to the originals if A was clicked?

PS: I'm open to jQuery solutions too.

like image 491
asprin Avatar asked Jan 07 '16 13:01

asprin


People also ask

What is used to increase the size of decreased text?

Keyboard shortcutHold down Ctrl press the + to increase the font size or - to decrease the font size. Pressing either of these keys while continuing to hold down the control key continues to increase or decrease the font until it reaches its maximum. To reset the font back to the default size Ctrl + 0 (zero).

How do I increase and decrease font-size in HTML?

In HTML, you can change the size of text with the <font> tag using the size attribute. The size attribute specifies how large a font will be displayed in either relative or absolute terms. Close the <font> tag with </font> to return to a normal text size.

Which option is used to increase the font-size?

Change the size of selected text To select all text in a Word document, press Ctrl + A. On the Home tab, click the font size in the Font Size box.

Which property is used to increase or decrease the size of a font in CSS?

The font-size-adjust property in CSS is used to adjusts the font size based on the height of lowercase rather than capital letters and gives the better control of the font size.


1 Answers

That's why em and rem units were invented instead of px. rem refer to the root font size, which then makes increasing and decreasing the whole document's font size super easy using body{ font-size : 120% };

But, since you can't use rem, here's a dirty solution using jQuery :

var $affectedElements = $("p"); // Can be extended, ex. $("div, p, span.someClass")

// Storing the original size in a data attribute so size can be reset
$affectedElements.each( function(){
  var $this = $(this);
  $this.data("orig-size", $this.css("font-size") );
});

$("#btn-increase").click(function(){
  changeFontSize(1);
})

$("#btn-decrease").click(function(){
  changeFontSize(-1);
})

$("#btn-orig").click(function(){
  $affectedElements.each( function(){
        var $this = $(this);
        $this.css( "font-size" , $this.data("orig-size") );
   });
})

function changeFontSize(direction){
    $affectedElements.each( function(){
        var $this = $(this);
        $this.css( "font-size" , parseInt($this.css("font-size"))+direction );
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p style="font-size : 30px">This text is initially 30px</p>
  <div>
    <p style="font-size : 20px">This text is initially 20px</p>
    <p style="font-size : 10px">This text is initially 10px</p>
    
  </div>  
</div>

<button id="btn-decrease">A-</button>
<button id="btn-orig">A</button>
<button id="btn-increase">A+</button>
like image 117
Jeremy Thille Avatar answered Oct 11 '22 02:10

Jeremy Thille