Entender o correto funcionamento e a dinâmica da propriedade CSS “float” é fundamental para o desenvolvimento e estruturação de bons layouts para web. Saber usar corretamente float em web sites e projetos web, em geral, é de extrema importância, já que, basicamente, é através das regras CSS que utilizam float que é possível compor layouts sem o uso de tabelas (tableless), o que traz inúmeros benefícios, como economia no tempo de carregamento, adequação às normas W3C e, consequentemente, um aumento de performance, em geral.

O que é “Float”?

Float é uma propriedade CSS de posicionamento. Se você está familiarizado com projetos para mídia impressa, você pode pensar, de forma semelhante, numa imagem em um layout onde o texto a circunda quando necessário.

No design para web, uma imagem inserida continua a fazer parte do fluxo da página. Isto significa que, se forem feitas alterações no tamanho ou se elementos ao seu redor mudarem, a página irá automaticamente ser reajustada (“reflow“). Isso difere da página onde os elementos são posicionados de forma absoluta. Elementos posicionados de forma absoluta são removidos do fluxo da página web. Elementos posicionados absolutamente não afetarão quaisquer outros elementos da página, quer estes estejam em contato, ou não.

Para que são usados os floats?

Além de simples exemplos, como posicionar uma imagem ao lado de um bloco de texto, floats são usados para criar layouts para web.

Floats são igualmente úteis para layouts de pequenas instâncias. Veja, por exemplo, esta parte de uma web page:

Esses tipos de layouts podem ser manipulados usando posicionamento absoluto dentro de posicionamento relativo, mas elementos que flutuam (propriedade CSS “float”) são mais flexíveis. Vamos supor que o tamanho da imagem de um avatar precise ser alterado. Com floats, o box pode ser reestruturado para acomodar um tamanho maior, enquanto um posicionamento absoluto criaria problemas:

Problemas com floats

“Floats são frágeis”. Eles são cheios de “contratempos” e cross-browser quirks. Talvez o mais significativo seja a necessidade de “limpar” floats (propriedade CSS “clear”) em algumas situações. Primeiro, vejam alguns exemplos de porque alguns floats precisam ser “limpos” e, depois, como fazer esta “limpeza”.

Arrumar o float para ajustar a altura do elemento pai

Elementos que contêm elementos float não calculam sua altura como é de se esperar. De fato, se o elemento pai contém apenas elementos flutuadores, navegadores vão renderizar a altura em zero (como se fosse “height:0“).

Se você der um “clear” antes de fechar a tag do elemento pai, você conserta isso.

Limpar o float para começar uma nova linha

Vamos dizer que você tem uma série de elementos flutuantes.

Então, digamos que você quer criar uma pausa nesta grade de elementos, a fim de iniciar uma nova linha. Porque, você sabe, iss faz sentido apenas visualmente falando.

Dando “clear” somente à esquerda ou à direita

Os dois exemplos acima são exemplos genéricos de como fazer o uso de “clear” para fazer a “limpeza”, ou seja, dar clear tanto à direita, quanto à esquerda. Porque floats podem ser tanto à direita, como à esquerda, e você pode, evidentemente, dar um float somente à esquerda ou somente à direita. Isso pode ser útil quando fazer a limpeza de ambos os lados (“clear:both“) seja problemático.

Se tivesse sido dado um clear em ambos os lados (“clear:both“) no exemplo acima, a segunda imagem teria sido empurrada para baixo, onde termina o bloco de texto.

Diferentes técnicas de clear

Assim como tudo em CSS, há mais de um jeito para fazer isso.

Usando “clear” exatamente onde você precisa

A propriedade CSS “clear” faz exatamente o que “diz na caixa”. O problema reside em onde e como aplicar um elemento à página com a propriedade clear correta.

• Aplicar “clear:both” ao elemento imediatamente seguinte ao que você precisa que seja “limpo”. Tomemos um exemplo perto do topo de um layout de web page com o cabeçalho e rodapé de largura total, com o conteúdo principal flutuando à esquerda e uma barra lateral à direita. A fim de que o rodapé aparece no lugar certo, você deve limpar a flutuação antes dele. Neste simples exemplo, você pode aplicar aplicar clear:both na própria div do rodapé.

Esta técnica é maravilhosa, já que ela funciona bem sem a necessidade de códigos supérfluos. No entanto, ela às vezes falha em sites dinâmicos. E se, por exemplo, você teve que acrescentar um novo elemento de página acima do rodapé e, consequentemente, abaixo dos outros conteúdos da página? Agora você precisaria dar um clear neste elemento ao invés de no rodapé. Muitas vezes é mais fácil pensar sobre onde é preciso dar um clear ao invés de em qual elemento é preciso dar um clear.

• Aplicar “clear” e limpar o float em um elemento vazio. DIVs são muito boas porque, geralmente, você não tem nenhum estilo aplicado a elas (como em um elemento de parágrafo “p”, por exemplo) e elas não têm nenhuma funcionalidade especial (como um “<br />”). Onde for preciso limpar o float, apenas insira: <div style=”clear: both;”> </div>. Usar estilos in-line não é muito “atraente”, então é melhor fazer uma classe “clear” e criar uma regra que faça a limpeza do float, mas isso é apenas uma questão de gosto.

O método da DIV vazia:

...parte de elemento flutuante.
</div>
 
<div class="clear"></div>
 
<p> ... ahhhh, recebi um "clear"! </p>

CSS:

div.clear { clear: both; }

“overflow:auto” no elemento pai

É difícil explicar o motivo, mas a aplicação da propriedade CSS “overflow:auto” no elemento pai fará com que sua altura seja calculada corretamente. Ele irá se expandir para englobar os elementos flutuadores (floats) ao invés de “dar pau”. Isso pode ser muito útil e é muito “limpo”, mas tem alguns inconvenientes. O maior deles é que, frequentemente, não faz sentido usar a regra CSS no elemento pai. Pense nas vezes em que você precisa dar um clear em vários elementos que têm um elemento pai em comum; nesse caso, isso não vai ajudá-lo.

Outro problema é que você pode querer usar a propriedade “overflow” para outros fins. E se você quiser esconder o overflow de uma div, em especial? Você não pode. Você terá que englobar a div com outra div para conseguir isso.

O hack “clearfix” (dar o clear com a pseudo-classe “:after”)

Embora antigo, o artigo do positioniseverything sobre como usar uma pseudo-classe CSS para dar o clear ainda é válido. Explicando rapidamente, a técnica consiste em adicionar um pouco de conteúdo depois do elemento. Este pouco de conteúdo (um espaço, geralmente) é que faz o clear funcionar, mas fica oculto do visitante.

Aqui está um código, aplicado em uma classe CSS para qualquer elemento que precise de um clear:

/* This needs to be first because FF3 is now supporting this */
.clearfix {display: inline-block;}
 
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
font-size: 0;
visibility: hidden;
}
 
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

O artigo citado alerta que a técnica já está ficando velha e fala sobre “overflow:auto“. Eu não compartilho da opinião de que a técnica está ficando ultrapassada. Esta é completamente diferente da outra técnica de overflow. Com a “clearfix“, você aplica a classe no próprio elemento, não no elemento pai. Isso significa que você pode usá-la mesmo quando não se trata de um elemento pai, isto significa que poderá continuar a usá-la, ainda que não exista um elemento pai que faça sentido, e aplicá-la pensando onde o elemento com float precisa de um clear.

Outro problema com float: empurrões para baixo (“pushdown“)

Esta questão merece uma atenção especial, porque frequentemente as pessoas têm problemas com questões de “empurrões”. Olhando novamente o exemplo dado no início deste artigo, a div do conteúdo principal flutua à esquerda da div da barra lateral. Esta é uma estrutura comum em muitos blogs.

Quer sejam elementos fixos ou fluidos, ambas as DIVs têm uma largura especificada. Eles supostamente comportam-se como elementos flutuantes, ou seja, se um elemento dentro da área do conteúdo principal tem a largura maior que toda esta área (por exemplo, uma imagem muito larga) ele simplesmente se extende através e cobre qualquer coisa que esteja “no caminho”. A forma como o IE6 trata isso é bem diferente. Se um elemento tem a largura maior que a de seu elemento pai, no IE6 a barra lateral vai ser simplesmente empurrada para baixo (“pushdown“), quebrando completamente o layout.

A solução? A melhor solução é não colocar elementos com largura maior que a de seu elemento pai. Para se protejer melhor, e se seu layout funciona de outra forma (não especifique alturas!), você pode trabalhar com “overflow:hidden” para esconder algo que seja preciso. Ainda há outra solução, que seria usar posicionamento absoluto para posicionar a barra lateral mais à direta. Lembre-se, entretanto, que posicionamento absoluto retira o elemento do fluxo da página – algo para se levar em consideração.

Há algum tempo saiu no A List Apart um artigo sobre fazer um “falso” posicionamento absoluto, Faux Absolute Positioning, que é uma leitura interessante e aborda uma nova técnica de layout que traz inúmeros benefícios do posicionamento absoluto, conservando o fluxo da página e não indo de encontro à “fragilidade” dos elementos com float.

“Quirks” sobre elementos float

Outra coisa para se lembrar quando se lida com IE6 é que, se você aplicar uma margem (CSS “margin”) no mesmo sentido que o float (“left” ou “right”), ela deve ser o dobro da margem.

Para o IE7, existe um pequeno truque sobre sua maneira peculiar de não respeitar margens inferiores (CSS “margin-bottom”) em elementos filhos dentro de objetos flutuantes.

Para quem tem blogs Wordpress que tratam de assuntos relacionados à programação, softwares, linguagens de marcação, estilos e afins, uma das grandes dificuldades é escrever artigos explicativos e evidenciar corretamente os códigos de marcação e programação nestes, através de uma sintaxe estilizada e compreensível.

Alguns criam regras CSS para utilizar em trechos dos códigos que apresentam, criando diversas classes, para estilizar diversas cores de texto com a propriedade “color”. Entretanto, a aplicação deste monte de classes em um código, além de ser demorada e sua implementação desgastante para o autor do post, apresenta o inconveniente de ser dificilmente manutenível.

Para apresentar diversos tipos de códigos em posts de blogs Wordpress, existe uma solução melhor, mais rápida, prática e que utiliza uma das principais vantagens desta plataforma: a extensibilidade de suas funções através de plugins.

Sobre o plugin WP-Syntax

WP-Syntax é um ótima extensão Wordpress para exibir códigos com sintaxe de fácil visualização e de forma inteligível. Quando se usa o plugin, é possível exibir códigos-fonte coloridos (coloração automática) com ou sem numeração das linhas. Para quem lê o artigo é excelente, já que ele provê uma sintaxe limpa e permite selecionar o código através do próprio navegador.

O sistema de highlighting do WP-Syntax é feito usando o GeSHi (Generic Syntax Highlighter), que já é conhecido entre alguns desenvolvedores web devido à sua facilidade de implementação e simplicidade de uso.

Funcionando do WP-Syntax

O uso do WP-Syntax é simples e seguro; ele evita conflitos com outros plugins de terceiros, executando “filtros” que garantem a compatibilidade geral com outras extensões, conferindo um resultado ótimo, que é a formatação dos códigos-fonte e exato destaque da forma como se quer e precisa.

Instalação e uso do WP-Syntax

Este plugin é todo fácil de usar, desde sua instalação ao momento de exibir códigos formatados nos posts.

Instalação

A instalação do WP-Syntax é feita da maneira “tradicional”:

1. Baixar o plugin;
2. Descompactar o conteúdo do arquivo zipado dentro da pasta padrão de plugins do Wordpress, o que irá resultar na seguinte hierarquia de diretórios: wp-content/plugins/wp-syntax/;
3. Ativar o plugin na área “Complementos” (Plugins) do painel de controle WP;
4. Começar a usar o WP-Syntax.

Como usar o WP-Syntax

Tirar proveito das funcionalidades do WP-Syntax é bastante simples. Enquanto escreve um artigo, vá até o modo de edição de código em seu tinyMCE – aba de nome “HTML” se você usa o modo de edição gráfica -  e englobe o código que você quer que fique estilizado entre tags pre. Para configurar o plugin in-line, é preciso informar:

• Qual linguagem será usada (necessário);
• Se haverá numeração de linhas (opcional).

Então, para colocar um trecho de código PHP com numeração de linhas, por exemplo, ficaria da seguinte maneira:

<pre lang=”php” line=”1″>

[...] código [...]

</pre>

Veja o plugin em funcionamento:

1
2
3

for ($i = 1; $i <= 11; $i++){
    echo $i . ', ';
}

Basta retirar o atributo “line” para o código iserido aparecer sem a numeração de linhas; caso se queira iniciar a contagem em número diferente, basta informar: line=”23″. Faça o teste e selecione o trecho de código acima; perceba que é possível fazer a seleção e colar onde se queira sem que a numeração também vá para a área de transferência.

Algumas das linguagens de programação e marcação que o WP-Syntax suporta são:

• ASP;
• C;
• D;
• CFM;
• CSS;
• HTML;
• Java;
• Javascript;
• mySQL;
• Oracle 8;
• Perl;
• PHP;
• Python;
• Ruby;
• E mais de 70 outras linguagens.

Um dos grandes benefício do WP-Syntax é que ele tem diversos “esquemas” de cores, um para cada linguagem de programação, estilo ou marcação escolhida, o que facilita a inserção de diversos trechos, de várias linguagens, em um só artigo, de modo a evidenciar a diferença entre todas, facilitando a leitura e entendimento do leitor.

Algo importante sobre o uso do WP-Syntax

Este aviso é somente para os que utilizam o editor gráfico para escrever artigos; os que utilizam somente o modo código, nem precisam ler este aviso.

Aconselho, ao usar o WP-Syntax para destacar códigos-fonte em seu artigos, a primeiro escrever as partes do post que são “texto comum”, como explicações, etc e, por último, passar ao modo HTML e inserir os códigos necessários.

E mais: ao editar um artigo já escrito com uso do WP-Syntax, vá até outro artigo qualquer, passe para o modo de edição HTML e, somente depois disso, edite o arquivo que usou o plugin.

O motivo para ambos é que o editor gráfico do Wordpress interpreta as tags existentes para as renderizar corretamente enquanto se escreve o post (negrito, itálico, etc). Então, como se está inserindo código “interpretável” por ele, é arriscado, dependendo da linguagem que se esteja usando no WP-Syntax, como HTML, por exemplo, de, no momento em que se passa para a edição em modo gráfico, o editor do Wordpress apagar as tags que você usou em seu artigo, com o WP-Syntax.

Nosso colega Rafael Biriba escreveu um excelente artigo sobre como utilizar os modos Visual e HTML com WP-Syntax sem strip tags.

Conclusão

Pessoalmente, quando ainda desconhecia a existência de um plugin que destaca códigos-fonte em artigos, como este, utilizava a “técnica” de criar diversas classes CSS para estilizar códigos que colocava nos posts. Posso garantir que não é a melhor das experiências, principalmente para o caso de ter que fazer manutenção no código…

O melhor, mesmo, para os casos de inserção de código diretamente em posts, para quem usa Wordpress, é utilizar o plugin WP-Syntax, que, primando pela simplicidade e facilidade de uso, além de possuir excelente suporte às mais de 70 linguagens de programação, estilo e marcação citadas, atende perfeitamente a finalidade para que foi criada, permitindo que o autor dos artigos mostre códigos a seus visitantes com uma sintaxe colorida, focando na facilidade de compreensão e entendimento dos códigos.

Neste artigo sobre tipologia na web e seu uso em sites, apresento algumas “questões tipográficas” e faço uma diferenciação entre termos comuns e frequentemente confundidos, como “tipologia”, “tipografia”, “tipo”, “fonte” e “fonte tipográfica”.

Considerações sobre a prática tipográfica na web

Os web sites, hot sites, mini sites, portais, sistemas web e softwares, campanhas online e o material encontrado na web, em geral, estão atualmente em uma fase de “amadurecimento”. As pessoas ainda estudam as melhores técnicas e possibilidades sobre o desenvolvimento para web e, devido a esta área do conhecimento ainda ser relativamente recente, ainda não se tem posicionamentos oficiais a respeito – na verdade, nem nas áreas de conhecimento e estudos tradicionais -, o que resultado em uma produção em massa de um material que poderia ter mais qualidade do que se vê.

A relativa facilidade de contato com o desenvolvimento web e, até certo ponto, ausência de obstáculos para se adentrar no ramo – fora o fato da disseminação de cursos do tipo “Web Design em 6 meses”, que aparecem mais e mais -, todos estes figuram como incentivadores às pessoas.

Até certo ponto, isso é positivo, já que permite que todos os interessados aprendam coisas novas e, rapidamente, iniciem o desenvolvimento de seus próprios web sites de forma profissional, sendo remuneradas por seu trabalho.

Por outra perspectiva, “qualquer um” desenvolver web sites tem seus pontos negativos, já que, por um motivo ou por outro – e principalmente pelos certificados que recebem do tipo de curso que foi citado -, os ainda principiantes na arte de desenvolver a web não sabem dos pormenores desta profissão e sobre como o fato de estudar e aprender a cada dia para adquirir novos conhecimentos e atualizar os que já se tem, é essencial!

E esta situação abarca, também, os inúmeros equívocos, falta de conhecimento e especulações sobre a correta utilização tipográfica no desenvolvimento de web sites e afins. Tendo o ledo engano de que fazer o “mais ou menos” é o suficiente, os desenvolvedores não prestam a devida atenção à tipografia na web. Frisando: o conhecimento e constantes estudos desta parte do desenvolvimento para web é muito importante para que os que se interessam seriamente pela área produzam designs web – e designs, em geral – melhores, que satisfaçam e agradem os visitantes dos sites que desenvolvem.

Teoria antes da prática: explicação de termos relacionados à tipografia na web

Antes da prática, vem sempre a teoria. Sempre foi assim. Alunos de medicina passam anos lendo livros, vendo filmes e se informando de maneira diversas antes de operar alguém e nenhum estudante de engenharia constrói um prédio nos primeiros períodos faculdade. O mesmo se aplica ao desenvolvimento para web: ninguém aprende a desenvolver bons sites – sites profissionais – em 6 meses…

Então, é necessária teoria antes da prática. É necessário que a correta definição dos termos da área sejam corretamente esclarecidos e aprendidos. Com isso, equívocos inoportunos e confusões desnecessárias são evitadas e um material com mais qualidade pode ser produzido.

Diferença entre Tipologia e Tipografia

É comum haver confusão entre os termos “tipologia” e “tipografia”. Não é “mal” de quem faz a confusão; a própria grafia e pronúncia são um pouco semelhantes e realmente podem causar confusão. Em um breve – mas muito bom – artigo sobre tipologia e tipografia, Sergio D Stefano, colunista do Webinsider, explica a diferença entre os termos:

Uma grande bobagem que tenho ouvido ao longo dos anos é a insistência no uso do termo tipologia a para classificação de tipos. Tipologia na verdade é um termo pertencente à taxionomia, a ciência das classificações, o estudo das características das diferenças entre objetos e seres vivos de toda espécie.

Nós temos a tipografia que, aí sim, é a arte e processo de criação de caracteres. A tipografia tem origem etimológica na implantação da impressão por tipos móveis na Europa, a partir do século XV. Portanto é a forma certa.

Na maioria das vezes pode parecer bobagem “ficas cismado” com falar uma palavra errada aqui, outra acolá, já que o que importa, mesmo, é enteder sobre o assunto, em suas diversas nuances. Entretanto, ao utilizar um termo errôneamente estamos, em primeiro lugar, errando – e fazer isso, por exemplo, na presença de um cliente, pode ser muito desgradável – e, depois, transmitindo um conhecimento errado, propagando um equívoco que, se tivéssemos estudado um pouquinho mais a respeito, teríamos evitado.

Então, para acabar de vez com este equívoco sobre tipologia e tipografia e, a partir de agora usar o termo correto, quando queremos dizer que estamos envolvidos em alguma atividade sobre a criação/estudo de tipos, usamos o termo tipografia. Combinado? ;-)

Um pouco mais de informação sobre a Tipografia

Mais uma vez utilizando o bom conteúdo da Wikiédia, para expandir mais o tema transcrevo uma sucinta explicação sobre a Tipografia:

A tipografia (do grego typos – “forma” – e graphein – “escrita”) é a arte e o processo de criação na composição de um texto, física ou digitalmente. Assim como no design gráfico em geral, o objetivo principal da tipografia é dar ordem estrutural e forma à comunicação impressa. Tipografia também é um termo usado para a gráfica que usa uma prensa de tipos móveis.

Na maioria dos casos, uma composição tipográfica deve ser especialmente legível e visualmente envolvente, sem desconsiderar o contexto em que é lido e os objetivos da sua publicação. Em trabalhos de design gráfico experimental (ou de vanguarda) os objetivos formais extrapolam a funcionalidade do texto, portanto questões como legibilidade, nesses casos, podem acabar sendo relativas.

No uso da tipografia o interesse visual é realizado através da escolha adequada de fontes tipográficas, composição (ou layout) de texto, a sensibilidade para o tom do texto e a relação entre texto e os elementos gráficos na página. Todos esses fatores são combinados para que o layout final tenha uma “atmosfera” ou “ressonância” apropriada ao conteúdo abordado. No caso da mídia impressa, designers gráficos (ou seja, os tipógrafos) costumam se preocupar com a escolha do papel adequado, da tinta e dos métodos de impressão.

Apesar de estes conceitos e definições terem foco especialmente às mídias impressas, é perfeitamente possível e aceitável “adaptarmos” tudo e pensar sobre a tipografia com foco ao design web. É importante, então, muito atenção a este assunto porque, com certeza, este é um dos assuntos mais úteis e bons de se tratar – e praticar – no desenvolvimento para web.

“Tipo”, “Fonte” e “Fonte Tipográfica”

Outros equívocos que são feitos quanto à terminologia tipográfica é a respeito dos termos tipo, fonte e fonte tipográfica – na verdade, os equívocos dizem respeito mais aos dois primeiros. Novamente, para sermos claros e precisos enquanto profissionais da web, não podemos cometer equívocos desnecessários e facilmente evitados.

Fonte e Tipo, na verdade, querem dizer a mesma coisa. Entretanto, devido ao mau uso do termo, principalmente por traduções mal-feitas de softwares estrangeiros para a língua portuguesa – editores de texto, por exemplo, usam o termo “fonte”, quando o correto deveria ser “tipo” -, o uso corrente e disseminação deste termo para designar tipos foi inevitável. Tanto que, em explicação a este respeito, consta que a tradução para português de Portugal, nestes programas, ficou “Tipo de Letra” – que é o certo – ao invés de “Tipo de Fonte” – que é o equivocado.

E, quanto á “fonte tipográfica”, é usado para diferenciar e referenciar que se está falando sobre “fontes de tipos” ao invés das outras significações de “fonte”, como “fonte de informações” ou “fonte d’água”.

Conclusão

É importante, então, que se usem os termos corretos quando estivermos lidando com o estudo da tipografia e assuntos tipográficos, em geral, não fazendo confusão entre termos que, aparentemente, querem dizer a mesma coisa. “Fonte” virou sinônimo de “Tipo” principalmente em função de traduções famosas equivocadas, mas o correto é “tipo de letra” ao invés de “tipo de fonte”.