Ramon Victor

Cada projeto exige diversas funcionalidades, algumas mais fáceis e outras mais complicadas de implementar. Há muita coisa boa na web, porém às vezes faltam coisas que são fundamentais na maioria dos projetos.

Em diversos sites precisei de um bom plugin jquery para controlar o tamanho das fontes e não consegui encontrar. Foi a partir dessa necessidade que decidi desenvolver  o plugin Font Size, que visa facilitar os desenvolvedores na tarefa de implementar esse controle. Vejamos como utilizá-lo.

Veja o demo.

Para a implementação do plugin precisaremos dos scripts: cookie e o fonSize + biblioteca jQuery.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cookie.js"></script><!-- Requerido caso queira guardar no cookie -->
<script type="text/javascript" src="font_size.js"></script>

O parâmetro principal deve ser a div onde ficarão guardados os links de controle. Em nosso exemplo usaremos a div#font_size.

$(document).ready(function() {
   $("#font_size").fontSize();
});

No XHTML declare apenas a div vazia que o script se encarrega de incluir os links.

<div id="font_size"></div>

Podemos customizar as funcionalidades do nosso plugin. Observe as opções.

• alvo podemos declarar um ou mais alvos separados por virgula. Em nosso exemplo utilizamos a div#content. Caso o alvo não seja declarado todo documento sofre a alteração no tamanho da fonte.
• tipoPaiLink informa se os links devem estar dentro de uma lista <ul> ou dentro de um <p>. Os parâmetros podem ser: ‘ul’ ou ‘p’.
• setCookie quando declarado true deixa salvo a ultima ação do usuário, de modo que quando houver uma nova visita o tamanho da última ação será mantido. Caso não queira usar a função de cookie declare como false (nesse caso não será mais necessário o script cookie.js).
• variacoes tem quantidade 7 declarado como padrão, onde 4 é o tamanho declarado como 100% no CSS. Caso aumente a quantidade de variações lembre-se de declarar todas as classes no CSS. Observe que a classe padrão separa igualmente o número de variações para mais e para menos. Por exemplo se eu declaro variacoes: 11 a  classe padrão detectada pelo script será a 6 sendo 5 variações de aumento e 5 variações de diminuição.

Veja agora como nosso script ficou com o acréscimo dos parâmetros.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cookie.js"></script&gt;
<script type="text/javascript" src="font_size.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#font_size").fontSize({
    alvo: '#content', //Alvo(s) da atuação do script
    tipoPaiLink: 'ul', //Guardando os links de controle em uma <ul>
    setCookie: true,//Ativando opção de cookie
    variacoes: 7 //7 variações (3 para mais e 3 para menos)
  });
});
</script>

No CSS podemos customizar o quanto vai mudar a cada nova ação. No exemplo eu utilizei medidas em porcentagem, mas você pode usar outras medidas de acordo com a sua necessidade.

.tam1 p, .tam1 li { font-size: 80%}
.tam2 p, .tam2 li { font-size: 90%}
.tam3 p, .tam3 li { font-size: 95%}
.tam4 p, .tam4 li { font-size: 100%} /* tamanho padrão */
.tam5 p, .tam5 li { font-size: 105%}
.tam6 p, .tam6 li { font-size: 110%}
.tam7 p, .tam7 li { font-size: 120%}

Para estilizar os links de controle utilize as classes .mais e .menos. No exemplo criei um estilo simples.

#font_size ul { float: right; }
#font_size ul li { float: left; margin-right: 3px}
#font_size a {
  width: 20px;
  height: 20px;
  text-align: center;
  display: inline-block;
  font-size: 12px;
  line-height: 20px;
  background: #ccc;
  color: #4F4F4F
}

O que há de novo ?

• Opção de declarar aonde o script vai atuar. O desenvolvedor declara um ou mais alvos que sofrerão a alteração no tamanho da fonte.
• Gera via DOM um xhtml limpo. Com uma simples classe no alvo o fontSize controla o tamanho de seus textos descendentes.
• Dispõe da opção de salvar em cookie. Diminuindo a tarefa do usuário de esta sempre clicando para adaptar ao melhor tamanho a cada nova visita. Uma vez adaptado o cookie já guardará a informação e em uma nova visita tudo estará na mesma configuração.
• Por trabalhar com a biblioteca jQuery é completamente Cross-browser. Testado em FireFox 3+, Internet Explorer 6+, Chrome, Opera e Safari.

Faça o download do Plugin Font Size 1.0.