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 }

Não sabe o significado de um acrônimo ou procura por um? O Acronym Search é um site de busca de acrônimos bem simples e eficiente.

Para quem desconhece o termo, acrônimo é uma palavra formada pelas letras ou sílabas iniciais de palavras sucessivas de uma locução, ou pela maioria destas partes. Os acrónimos são especialmente úteis nas telecomunicações, uma vez que permitem condensar várias palavras em poucas letras, poupando largura de banda e, em alguns casos, dinheiro.

Maiores informações sobre acrônimos no wikipedia.

“Image Replacemente” é uma técnica bastante utilizada hoje em dia quando queremos substituir um texto em nosso site por uma imagem, nos possibilitando o uso de diversos tipos de fontes etc. Abaixo coloco um exemplo utilizado aqui no blog, aonde eu substituo o texto “gustavoribeiro.net” por uma imagem chamada “logo.jpg”. A técnica é bastente simples:

Costumo utilizar sempre a tag <h1> para inserção de logo nos sites que faço, ficando assim:

<h1><a href="index.php"><span>gustavoribeiro.net</span></a></h1>

Já no CSS, aplico a imagem da logo como background da tag <a>, fazendo assim, um link para a home do site e na <span> escondo o texto para que o mesmo não apareça em cima da imagem.

h1 a {
    float:left;
    width:148px;
    height:22px;
    margin-top:9px;
    background:url('img/logo.jpg') no-repeat;
}
h1 span {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    visibility:hidden;
}

Dessa forma, ao utilizar-mos o Jaws ou o Lynx não iremos perder nenhuma informação disponível no site por causa de imagens. Experimente também, desabilitar o CSS utilizando a extension web developer do firefox e veja o que acontece com a imagem do logo.

ps off topic: parabéns para mim

A Acesso Digital, a um tempo atras, fez um dos melhores - senão o melhor - vídeo sobre acessibilidade na web que eu já vi até hoje.

Ainda acham que acessibilidade não é nada?