GustavoRibeiro.net

Hoje iremos aprender como fazer um script para aumentar e diminuir o tamanho da fonte de seu site.

O script é bem simples e fácil de entender, porém temos que definir qual o tamanho padrão que iremos ter em nosso site.

Na maioria dos browsers - se não todos - utilizando 16px como tamanho de fonte padrão, podendo ser alterado pelo usuário caso prefira. Vamos trabalhar com o valor padrão, sem alteração.

Primeiro, iremos definir o tamanho padrão de fonte para o noso site. Optei por 0.69em (11px)

var tam = 69; //número inteiro e tamanho relativo "em"

Criaremos a função chamada mudaFonte recebendo o parâmetro obj. O parâmetro será utilizado para sabermos se foi clicado no a+ ou no a-

function mudaFontes(obj) {
    //conteudo do script
}

Iremos utilizar switch como nossa condição. Se for “+”, aumentaremos o tamanho e se for “-”, diminuiremos. Assim…

switch (obj) {
    case '+':
        tam = tam + 9;
        break;
    case '-':
        tam = tam - 9;
        break;
}

Por fim, ajustaremos o valor padrão de nossa div principal - ctPrincipal ou o nome que escolheu colocar em sua div - com o valor final que obteremos no script, dividiremos por 100 e adicionaremos “em” para indicar um valor relativo.

document.getElementById('ctPrincipal').style.fontSize = (tam / 100) + 'em';

Finalizando, nosso sript ficaria assim:

var tam = 69;
function mudaFonte(obj) {
    switch (obj) {
        case '+':
            tam = tam + 9;
            break;
        case '-':
            tam = tam - 9;
            break;
    }
    document.getElementById('ctPrincipal').style.fontSize = (tam / 100) + 'em';
}

Para ativar a função basta utilizar onclick=”mudaFonte(’+')” - para aumentar - e onclick=”mudaFonte(’+')” - para diminuir. Outras versões ou dicas são bem vindas nos comentários

Para ajudar no cálculo dos valores relativos das fontes, veja o tópico sobre o Em Calculator

A algum tempo atrás falei sobre a importância de se utilizar acrônimos em web sites e hoje vim falar sobre as abreviações <abbr>.

Abreviação já se auto-explica o que é então vou ser rápido e explicar a diferença entre abreviações e acrônimos.

Para muitos, ou até para a maioria, usuários internet tudo é abreviação mas na realidade não é a verdade. Acrônimos são palavras formadas por letras ou sílabas iniciais de uma locução - Ex.: CSS = Cascading Style Sheets - enquanto abreviação é uma forma curta da palavra excrita - Ex.: Av. = Avenida.

No xHTML, a utilização da tag abrr se dá na seguinte forma:

<abbr></abbr>

Para cada <abbr> gerado, é altamente recomendável, no meu ponto de vista obrigatório, o uso da propriedade <title> ao qual, com ela, podemos visualizar o significado daquele abreviação ao passarmos o mouse por cima da palavra.

<abbr title="Avenida">Av.</abbr>

Fazendo isso, estaremos ajudando a quem não tem o conhecimento de certas abreviações e faremos nossos sites mais acessíveis e de acordo com os padrões w3c.

[update: 25.07 às 10:21]
Aproveitando a dica da amiga Cleo Morgause que eu sempre acabo me esquecendo de fazer :), uma ótima pedida é mudarmos o cursor do mouse, ao passarmos por cima do <abbr>, para o ícone de help (ajuda).

abbr { cursor: help }

Para os que costumam trabalhar com newsletters, enviando e-mails a torto e a direito por aí, existe um site chamado Email Standards Project que reúne informações de diversos webmails com resultados de testes feitos por eles visando saber o que cada cliente de email suporta se falando de webstandards.

http://www.email-standards.org/clients/

Se você é uma pessoa que ainda se perde ou fica tentando achar um tamanho relativo de fonte - em - equivalente aos pixels utilizados no photoshop, experimente utilizar a Em Calculator.