Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 15 hours ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 4 days ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

jQuery font resizing for accessibility

AshleyAshley

Following on from yesterdays little article about adding a simple JavaScript print link to a page, today I’m going to cover adding the functionality with jQuery for the user to adjust the text size on a page. It is important from an accessibility point of view to give your users the ability to re-size the text, and its also a handy trick that could become useful for building stand alone JavaScript applications. You will also need to include the jQuery JavaScript framework.

The Code


<script type="text/javascript">
$(document).ready(function(){
  var section = new Array('span','.text'); 
  section = section.join(',');

  // Reset Font Size
  var originalFontSize = $(section).css('font-size');
  $(".resetFont").click(function(){
    $(section).css('font-size', originalFontSize); 
  });

  // Increase Font Size
  $(".increaseFont").click(function(){
    var currentFontSize = $(section).css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $(section).css('font-size', newFontSize);
    return false;
  });

  // Decrease Font Size
  $(".decreaseFont").click(function(){
    var currentFontSize = $(section).css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $(section).css('font-size', newFontSize);
    return false;
  });
});
</script>

The HTML


<div id="menu">Adjust Text size <a class="increaseFont">+</a> | <a class="decreaseFont">-</a> | <a class="resetFont">Reset</a></div>

<span>Font size can be changed here</span>
<div class="title">This text will stay the same</div>
<div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor enim, mollis sed dapibus a, volutpat ac urna. Sed at felis eget mauris sodales dignissim. Nullam lacinia porta dolor a molestie. Duis id ligula at nunc elementum porttitor. Nulla facilisi. Nunc et elit justo, id sagittis nisi. Mauris sit amet diam nisl, non faucibus dui. Cras ac consequat urna. In hac habitasse platea dictumst. Donec auctor velit vitae orci imperdiet et mattis enim vehicula. Quisque bibendum varius odio eget suscipit. Nam varius hendrerit nunc eu tincidunt. Vivamus vel ligula risus.</p>

<p>Maecenas pulvinar, eros eget mollis feugiat, risus nunc pellentesque orci, nec mattis tortor lectus eget erat. Nulla porttitor ultricies condimentum. Cras ac arcu nisi. In eget elit sed neque pulvinar tristique. Quisque tempor ante at risus rutrum quis varius quam ultricies. Nulla mollis lectus a dolor rhoncus vitae ullamcorper nisi dapibus. Etiam vehicula, risus vitae dignissim euismod, neque tortor adipiscing diam, id congue turpis velit quis felis. Aliquam eu diam mauris, id bibendum risus. Nullam tortor nibh, consectetur eget pretium vel, auctor in urna. Nam rhoncus placerat sapien, et pretium risus pulvinar nec. Ut et metus sed tellus scelerisque convallis. Vivamus lobortis tempus rhoncus. Integer at accumsan purus. </div>
</p>

The CSS


body{font-size:12px;}

#menu{padding-bottom:10px;
margin-bottom:10px;
border-bottom:1px dotted #ccc; color:#999;}

#menu a{color:#000;}
#menu a:hover{cursor:pointer; color:#000;}
#container a{font-size:14px; font-weight:700;}

span{color:#FF6633; font-size:17px; font-family:Georgia, "Times New Roman", Times, serif;}
.title{font-size:11px; color:#666;}
p{font-size:15px;}

More information can be found out about font-size accessibility over at the W3C which can be found here.

demo

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 3
  • Sathish
    Posted on

    Sathish Sathish

    Reply Author

    Hi,

    All this is just for resizing an area of text. But I want it to resize as a whole webpage. Help me regarding this.

    Thanks
    Sathish


  • Dave
    Posted on

    Dave Dave

    Reply Author

    Hello,
    I was looking for this but how would the user save these settings (PHP cookie?)
    Thank You!


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Dave you could set the cookie with javascript then read it with PHP so if the user refreshes the page their settings would be saved.