Já aconteceu se você entrar em algum site e achar o tamanho dos texto pequeno de mais? Já entrou numa página da internet e percebeu que está com certa dificuldade de leitura e não enxerga muito bem as letras? Se não aconteceu com você, fique sabendo que acontece, diariamente, com centenas de milhares de pessoas.
Algo simples pode se feito para sanar este problema e aumentar a usabilidade e acessibilidade de seus sites: controle de tamanho de fontes! Basta um simples controlador para o tamanho das letras e pronto: caso alguém se sinta desconfortável ou, mesmo, não consiga visualizar corretamente os conteúdos em função do tamanho diminuto da fonte, basta usar o controlador para aumentar. O contrário também: se julgar que está tudo muito grande e/ou ocupando espaço demais, basta acessar a ferramenta de controle de tamanho de fonte e usar a função “diminuir”.
Mas, como aumentar o tamanho do texto do site automaticamente? Simples, usando o fabuloso plugin para jQuery fontResizer!
O fontResizer aumenta ou diminui o tamanho dos textos de elementos específicos do site e ainda grava um cookie para, quando o visitante retornar ao site, este já apresentar as configurações escolhidas por ele previamente.
Usando fontResizer
A primeira coisa a se fazer depois de baixar o script do fontResizer, é inserir no <head> do seu documento o jQuery e o próprio fontResizer (obviamente, alterando os caminhos para ficarem de acordo ao que você está usando em seu projeto):
Com o plugin para aumentar / diminuir o tamanho dos textos, as mudanças podem ser incrementais ou com valores pré-determinados.
Para mudanças incrementais:
- Qualquer elemento com a classe “increaseClickItem” aumenta o tamanho da fonte.
- Qualquer elemento com a classe “decreaseClickItem” diminui o tamanho da fonte.
- O valor de incremento padrão é de 2.
Quando os valores das propriedades “minFont” e “maxFont” são selecionados, a classe “disabled” é automaticamente aplicada ao item oposto (se selecionar para aumentar, a classe se aplica ao que diminui e vice-versa). O mesmo vale se o cookie fontResizer retorna um valor que corresponda a minFont ou maxFont.
Para mudanças de tamanhos específicos, aplica-se o seguinte:
- Qualquer elemento com a classe “setFontSize” especifica o tamanho da fonte.
- O tamanho é determinado através do atributo “title”, que precisa ser passado quando a classe é setada.
- Exemplo: <a title=”20″> vai colocar o tamanho da fonte em 20.
Quando um elemento com a classe “SetFontSize” é clicado, a classe “on” é passada para ele. Quando um outro elemento com a classe “SetFontSize” é clicado, a classe é removida do anterior e passa para esse. Isso também ocorre com elementos de classe “increaseClickItem” e “decreaseClickItem”, quando estes chegam a um valor que corresponde a um valor de elementos com “SetFontSize”. O mesmo é verdade se o cookie fontResizer retorna um valor que corresponde a um valor “SetFontSize”.
O uso do fontResizer consiste em chamar a função de inicialização e passar as opções que se deseja (apresentadas a seguir). Por exemplo, fazer com que o controle de tamanho de textos funcione nos parágrados da div com ID “content” e elementos com classe “resizeMe”:
jQuery(document).ready(function($){
$('#content p, .resizeMe').fontResizer(
{
minFont:10,
maxFont:20,
increment:1
}
);
});
Opções do fontResizer
Os valores default do plugin são:
- sizeType. ‘px’
- minFont. 12
- maxFont. 16
- fontSet. 14
- setFontOn. ‘on’
- increment. 2
- incrementDisable. disabled’
Valores default do cookie:
- cookieName. ‘fontResizer’
- cookieExpire. cExpireDate
cExpireDate é o dia/mês em que o cookie é criado (1 ano para expirar). Variáveis usadas pelo cExpireDate” (sobreescritas quando o cookie expira ou quando um novo é criado):
- var date = new Date()
- var currYear = date.getFullYear()
- var currMonth = date.getMonth()
- var currDay = date.getDate()
- var cExpire = new Date(currYear + 1, currMonth, currDay)
- var cExpireDate = cExpire.toUTCString()
- cookiePath: ‘/’
Conclusão sobre o fontResizer
Certamente quando um site possui um controle de tamanho dos textos, sua usabilidade e acessibilidade aumentam. Aumentando a usabilidade, a qualidade do site, como um todo, também aumenta. Portanto, ter esta opção é algo muitas vezes indispensável e, quando isso é possível com tamanha simplicidade e eficiência quanto permite o fontResizer, melhor ainda!
3 Responses
Olá.
Gostaria de saber se há algo do gênero para implementar em blog. Muito obrrigado desde já. Parabéns pelo excelente trabalho desenvolvido.
O fontResizer pode ser implementado em blogs tranquilamente. Basta seguir o tutorial e tudo dará certo!
Abraços!
Muito Obrigado, estou gostando muito dos scripts jquery do site,