Uma certa vez me pediram para desenvolver uma gambiarra ferramenta que permitisse redimensionar o texto de uma página. Isso foi logo no começo deste ano, pouca experiência com jQuery e malícia zero na arte do POG (Programação Orientada a Gambiarra.)
O primeiro impulso foi procurar por alguma solução pronta, estilo os plugins de Lightbox do jQuery, mas na época não obtive o sucesso desejado, então abri meu Siple Text 2 e comecei a trabalhar.
A primeira solução que desenvolvi envolvia alterar a propriedade zoom, mas isso implicava em utilizar CSS3 e já devem imaginar a arte que seria “adaptar” isso ao querido Internet Explorer. Mas como o tempo não estava ao meu favor acabei usando isso mesmo.
Recentemente houve novamente a demanda pelo tal código, mas desta fez decidi fazer da maneira correta. Munido da documentação do jQuery e um pouco de água mineral (Yeah, sou um programador que não toma café) reuni o que ia precisar e comecei a desenvolver a lógica:
Primeira necessidade era delimitar o que seria afetado, ou seja, um container em que eu deixaria o código agir, já que não queria que todos os elementos da página fossem redimensionados.
Outro ponto era “guardar” o tamanho original do texto, para permitir o redimensionamento correto e permitir que o texto voltasse ao seu estilo original com apenas um click (sem reload). Para esta tarefa utilizei o método jQuery.data() do próprio jQuery, que permite armazenar qualquer informação do elemento selecionado.
O código divide-se basicamente em duas etapas, na primeira é feita a definição do container e das tags que serão afetadas, além da leitura dos elementos desejados e a cópia de seu tamanho original:
/* Proporção atual */
var currentRatio = 100;
/* Container - Elemento que contém o que será redimensionado */
var container = '#main-content';
/* TAGs permitidas */
var tags = container+' p, '+container+' span, '+container+' h2, '+container+' h3, '+container+' h4, '+container+' h5, '+container+' a';
/* Armazena o tamanho original */
jQuery(tags).each(function(){
var obj = jQuery(this);
var fontSize = obj.css('font-size');
obj.data('originalSize',parseInt(fontSize.replace('px','')));
});
Com os tamanhos copiados, é hora definir o “gatilho” da ação. No meu caso utilizei três links, dentro de uma div#acessibilidade:
<div id="acessibilidade">
<span class="small"><a href="#sml" title="Diminuir fonte">A</a></span>
<span class="medium"><a href="#nrm" title="Tamanho normal">A</a></span>
<span class="large"><a href="#lar" title="Aumentar fonte">A</a></span>
</div>
E atribuí a ação necessária ao link através do método $.click:
jQuery('#acessibilidade a').click(function(){
var obj = jQuery(this);
var act = obj.attr('href');
switch(act){
case '#sml': currentRatio = currentRatio-10;
if(currentRatio <= 40)
currentRatio = currentRatio + 10;
break;
case '#nrm': currentRatio = 100;
break;
case '#lar': currentRatio = currentRatio+10;
if(currentRatio >= 160)
currentRatio = currentRatio - 10;
break;
}
jQuery(tags).each(function(){
var obj = jQuery(this);
var orgSize = obj.data('originalSize');
obj.css('font-size',parseInt(orgSize*(currentRatio/100)));
});
return false;
});
Neste meu exemplo, defini que ao carregar a página ela está com o seu tamanho normal (ratio = 100). Ao clicar em aumentar ou diminuir a fonte, é acrescido ou subtraído 10 da variável ratio, caso o usuário clique no link para retornar ao tamanho original, a variável ratio volta a ter 100.
Com a variável ratio definida, é feito o cálculo do novo tamanho da fonte, recuperando o valor armazenado no elemento e multiplicando pelo ratio e dividido por 100 para obter o novo tamanho.
Utilizando a mesma lógica, é possível substituir os 3 links pelo slider do jQuery UI, permitindo um ajuste mais “fino” no tamanho da fonte.