By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,491 Members | 1,212 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,491 IT Pros & Developers. It's quick & easy.

What html code do I use to offer viewers text size options (ex., sm, med, lg text)?

P: 1
What html code do I use to offer viewers of my webpage different text sizes?
Feb 7 '11 #1
Share this Question
Share on Google+
2 Replies


Frinavale
Expert Mod 5K+
P: 9,731
Is your web page static or is it dynamically created by a server side script?

Are you permitted to use JavaScript in your solution.

Typically you would use CSS to set the font-size for your web page.

For example, if you want your page's content to be small font size you might have the following css:

Expand|Select|Wrap|Line Numbers
  1. body{
  2.   font-size:small;
  3. }
For medium:
Expand|Select|Wrap|Line Numbers
  1. body{
  2.   font-size:medium;
  3. }
For large:
Expand|Select|Wrap|Line Numbers
  1. body{
  2.   font-size:large;
  3. }
Now the thing is that you need to apply the CSS to your page when the user indicates that they want to change the font size.

You could submit the page to sever-side code which would apply the corresponding font-size-css style to the value that the user selected.

Or you could use JavaScrpt to change the font-size css style....

Or you could redirect the user to a page that is exactly the same but uses the font-size style that the user selected.

-Frinny
Feb 7 '11 #2

P: 14
This is a solution using jQuery, and my preferable way of doing it (because it's small and fast and everyone on the Internet already have jQuery in their cache).

CSS-code:
Expand|Select|Wrap|Line Numbers
  1. .smalltext { font-size: small; }
  2. .mediumtext { font-size: medium; }
  3. .largetext { font-size: large; }
  4.  
JavaScript-code:
Expand|Select|Wrap|Line Numbers
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript">
  2. <script type="text/javascript">
  3. $(#small).onclick(function(){${'body').addClass('smalltext');});
  4. $(#medium).onclick(function(){${'body').addClass('mediumtext');});
  5. $(#large).onclick(function(){${'body').addClass('largetext');});
  6. </script>
  7.  
HTML-code (snippet):
Expand|Select|Wrap|Line Numbers
  1. <a href="#" id="small" class="smalltext">aA</a>&nbsp;
  2. <a href="#" id="medium" class="mediumtext">aA</a>&nbsp;
  3. <a href="#" id="large" class="largetexttext">aA</a>
  4.  
Feb 17 '11 #3

Post your reply

Sign in to post your reply or Sign up for a free account.