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.
- 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)
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
www.mauriciojunior.net
www.aspneti.com