Aumentando e Diminuindo Tamanho de Letra
Olá pessoal, meu nome é Mauricio Junior. Venho mostrar com este artigo como utilizar de certa forma a acessibilidade aumentando e diminuindo a letra em seu site. O conceito é bem simples e fácil de entendimento.
Acessibilidade é uma forma de ajudar aos deficientes a navegarem na internet utilizando programas específicos de leitura de página. Não importa o tipo de deficiência. Existem muito mais formas de utilizar a acessibilidade na página web facilitando a vida de quem precisa verdadeiramente. Falarei mais sobre isso em outro artigo.
Requisitos:
- HTML
- JavaScript
- Div
Alguns desenvolvedores de software não sabem programar ou não gostam nem de tentar o conhecimento na linguagem de interpretação chamada JavaScript. Existe uma grande diferença entre JavaScript e Java; por favor não confunda as duas coisas. Java é uma linguagem de programação da Sun e JavaScript é uma linguagem de interpretação dos browsers.
JavaScript
Passarei de uma forma simples e tranqüila todo o javascript e depois o html onde aumenta e diminui o texto da página. Lembro que o mesmo funciona tanto no IE quanto no Firefox. A primeira coisa é o javascript. (Referência 1.1)
<script type="text/javascript"> var tam = 15; function mudaFonte(tipo,elemento){ if (tipo=="mais") { if(tam<24) tam+=1; createCookie('fonte',tam,365); } else { if(tam>10) tam-=1; createCookie('fonte',tam,365); } document.getElementById('txt_home').style.fontSize = tam+'px'; } function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } </script> |
Referência: 1.1
Este código da referência 1.1 possui 3 funções exclusivas feitas em JavaScript. Tente entende-las de uma melhor forma, mas como falei anteriormente, é bem simples. O método responsável chamada mudaFonte.
A referência 1.1 mostra dois códigos em negrito, onde um é o nome da função e o outro é o nome da div cuja fonte deve ser alterada. É necessário criar cookie para manter o aumento da letra; por isso possui dois outros métodos de cookie, um para criar e outro para ler.
document.getElementById('txt_home').style.fontSize = tam+'px'; |
Referência: 1.2
A referência 1.2 mostra como se deve aumentar a fonte do div. Lembro que, para pegar o nome da div ou qualquer objeto, deve se colocar e utilizar o getElementById, assim funcionará em qualquer brownser. Em meu html, tenho uma div chamada txt_home onde possui todo um texto dentro da mesma.
Html
No HTML, posso colocar como um div ou mesmo com href um ID com o nome txt_nome. Segue o HTML simples: (1.3)
<a href="#" id="txt_home">A ex-primeira-ministra e líder da oposição paquistanesa, Benazir Bhutto, morreu vítima de um atentado durante comício, perto de Islamabad, a duas semanas das eleições legislativas. Testemunhas afirmam que ela teria sido atingida por um tiro momentos antes de uma explosão. Outras 15 pessoas morreram no ataque. O partido da ex-primeira ministra declarou que ela morreu como mártir. Benazir foi a primeira mulher a chefiar um país de maioria muçulmana. Em outro comício da oposição, atiradores mataram quatro pessoas e feriram três.</a> |
Referência: 1.3
Note que no meu href possui um id chamado txt_home. Já tenho o meu javascript e o html, falta apenas o link para que funcione o aumento e diminuição da fonte. (1.4)
<a href="javascript:void(0);" Onclick="mudaFonte('mais'); return false"><img src="botaoAumentaFonte.png" border="0"></a> <a href="javascript:void(0);" Onclick="mudaFonte('menos'); return false"><img src="botaoDiminuiFonte.png" border="0"></a> |
Referência: 1.4
Um segredo, não coloque dentro do href o código ?#?. Caso colocar o código ?#? não funcionará da melhor maneira quando estiver no IE (Internet Explorer) e Firefox. Note que o href está javascript:void(0);, ou seja, não retorna valor algum. No atributo OnClick possui o nome da função feita em javascript chamada mudaFonte(?mais?) passando como parâmetro com o nome mais ou o nome menos. Coloquei uma imagem qualquer para representar o meu + ou -. Ao clicar no + aumenta a fonte, ou clicar no ? diminui a fonte. (Referência 1.4)
Note que na parte de cima da figura de referência 1.4, o tamanho da fonte é normal. Ao clicar na figura (+), o tamanho da fonte aumentou cujo é mostrado na segunda parte da figura.
Bom, eu fico por aqui. Espero que este artigo tenha te ajudar de certa forma, qualquer problema favor entrar em contato.
Mauricio Junior