Mantenha o ritmo vertical com CSS e jQuery

Contente

• Tipo de layout
• Ritmo vertical
• Conduzindo o ritmo
• Lidando com imagens
• Melhorando o jQuery
• Conclusão

• Conhecimento necessário: CSS, jQuery básico
• Requer: jQuery, CSS, HTML
• Hora do projeto: 30 minutos
• Baixar arquivos fonte

Supondo que você projete a partir do conteúdo, a primeira decisão para efetuar seu design tem estar relacionado ao tipo. Mesmo por não escolhendo um tipo de letra, você fez algo que afeta seu site. O tipo é fundamental para impressão e web design, e é complexo; há muitos termos, práticas, regras e técnicas acumuladas que contribuem para seu bom uso. Este artigo se preocupa com uma técnica para gerenciar um aspecto do tipo, que tem sido difícil de fazer online, mas é rotina na impressão: manter um ritmo vertical consistente, que por sua vez nos permite alcançar um layout profissional.

Tipo de layout

Na impressão, para qualquer item com uma quantidade considerável de texto, a base do design provavelmente será uma grade de linha de base. É usado para estruturar a página e orientar o fluxo vertical do conteúdo. Quase tudo é colocado em relação a essa grade de linha de base. Não se preocupe se você não reconhecer os termos, ninguém não está familiarizado com linhas de base ou grades de linha de base; você já sabe sobre eles. Lembre-se da escola, quando você, sem dúvida, escreveu em papel pautado - conforme escrevia, colocava a parte inferior de suas cartas ordenadamente em cada uma das linhas do papel. A linha de base e a grade da linha de base em ação. A linha de base é uma linha imaginária na qual a parte inferior das letras se alinha.Se você ler este artigo agora, “verá” uma linha de base, embora não haja realmente uma linha. Seu cérebro coloca um lá para você, é por isso que você pode ler frases. As linhas em papel pautado? Eles são uma grade de linha de base. Reto para que suas frases fiquem retas e definidas em intervalos regulares para que seu texto tenha um ritmo vertical regular.

Ritmo vertical

O ritmo vertical determina onde o texto da página está localizado. É um componente que afeta nossa capacidade de escanear e ler blocos de texto e ajuda a informar nossas respostas emocionais. Quando o texto tem um ritmo vertical forte e bom espaçamento, consideramos que é profissional, ponderado, confiável e confortável de ler. Quando o texto tem ritmo e espaçamento inadequados, sentimos que ele é menos considerado, menos profissional e geralmente mais difícil de ler. O ritmo vertical é uma parte usabilidade e uma parte estética.

Conduzindo o ritmo

Infelizmente, a web ainda é a prima pobre da impressão em termos de sua capacidade de promulgar algumas práticas fundamentais com relação à tipografia. Na web, não podemos usar uma grade de linha de base da mesma forma que um designer de impressão (ou criança na escola) faz - não podemos alinhar a linha de base do texto à grade de linha de base de um documento. CSS não tem conceito de grade de linha de base. Portanto, nosso texto não ficará exatamente nas linhas de uma grade de linha de base. Em vez disso, ele será centralizado verticalmente na lacuna entre as linhas. É o melhor que a web pode fazer.

Vamos ser práticos com um documento de exemplo. Em primeiro lugar, definiremos a batida criando uma grade de linha de base visível. Para fazer isso, usaremos uma imagem de fundo repetitiva para desenhar linhas horizontais regulares com 22 pixels de distância:

1. html {background: #fff url (baseline_22.png); }

Viva, temos nosso papel pautado!

Você notará que nada se alinha. Para alinhar tudo, queremos que a borda inferior de todos os elementos atinja uma dessas linhas. A maneira mais fácil de fazer isso é garantir que todos os elementos ocupem uma altura vertical (incluindo as margens) que seja um múltiplo de 22. Aqui estão alguns CSS que fazem exatamente isso. Estou usando a unidade REM, mas dando um substituto de EM para navegadores que não entendem REM. Também estou incluindo a unidade PX equivalente nos comentários. Se você ainda não entende REM / EM, pode simplesmente usar os valores de px - eles são todos equivalentes:

1. html {/ * font-size: 16px, line-height: 22px * /
2. fonte: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sem serifa;
3. plano de fundo: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * margin-top e bottom têm 22px * /
6. / * em fallback * / margin: 1.375em 0;
7. margem: 1,375 rem 0; }
8. h1 {/ * o tamanho da fonte é 32px, a altura da linha é 44px * /
9. / * em fallback * / font-size: 2em;
10. tamanho da fonte: 2rem; altura da linha: 1,375; }
11. h2 {/ * o tamanho da fonte é 26px, a altura da linha é 44px * /
12. / * em fallback * / font-size: 1.75em;
13. tamanho da fonte: 1,75rem; altura da linha: 1,5714285714; }
14. h3, h4, h5, h6 {/ * o tamanho da fonte é 22px, a altura da linha é 22px * /
15. / * em fallback * / font-size: 1.375em;
16. tamanho da fonte: 1,375rem; altura da linha: 1; }
17. p, ul, blockquote {/ * a margem inferior é 22px, a altura da linha é herdada de html (22px) * /
18. / * em fallback * / margin-top: 0; margem inferior: 1,375em;
19. margem superior: 0; margem inferior: 1,375rem; }

Vamos dar uma olhada no que isso nos oferece. Observe como todo o texto se alinha bem? Não fica na linha de base, mas tem um ritmo vertical previsível. É bom e arrumado.

Lidando com imagens

As imagens tornam as coisas mais complicadas. Veja o que acontece com nosso ritmo quando incluímos alguns. Eles o interrompem como um salto em um disco - o tempo está certo, mas o tempo está errado. O alinhamento muda. É porque é improvável que as imagens tenham uma altura que seja um múltiplo da linha de base, então a borda inferior não se alinha com nossa grade de linha de base.

Para consertar, tudo o que realmente precisamos fazer é adicionar uma margem a cada imagem, alinhando a parte inferior da margem com nossa grade. O que é simples o suficiente para automatizar com um pouco de JavaScript. Aqui está nosso plano básico:

1. Descubra a altura de cada imagem.
2. Veja quantas vezes o valor da linha de base se divide no espaço vertical que a imagem ocupa atualmente e obtenha o restante.
3. Subtraia o restante da linha de base para obter o deslocamento que precisamos aplicar na imagem.
4. Aplique o deslocamento como uma margem na parte inferior da imagem.

A parte inferior do espaço vertical da imagem agora se alinharia corretamente com a grade da linha de base. Esta é uma função básica em jQuery que faz isso:

1. $ (window) .bind (’load’, function () {
2. $ ("img"). each (function () {
3. / * variáveis ​​ * /
4. var this_img = $ (this);
5. var linha de base = 22;
6. var img_height = this_img.height ();
7. / * faça as contas * /
8. var resto = parseFloat (img_height% baseline);
9. / * quanto precisamos adicionar? * /
10. var offset = parseFloat (linha de base-resto);
11. / * aplica a margem à imagem * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

Porque o window.bind linha? Porque temos que esperar até que as imagens sejam carregadas antes de podermos obter seus tamanhos com segurança. Aqui está um exemplo com este código básico em execução.

Melhorando o jQuery

O mundo raramente é direto, e assim acontece aqui - temos que lidar com alguns detalhes de implementação. O que há de errado com a função que temos? Bastante:

• Ele produz resultados desagradáveis ​​com imagens embutidas em vez de flutuantes ou bloqueadas.
• Parece com erros em algumas imagens, especificamente as dos contêineres.
• Não lida com layouts líquidos.
• Não é muito reutilizável.

Não queremos aplicar esse comportamento a imagens embutidas, como o rosto sorridente no exemplo. As imagens embutidas são alinhadas de forma que a borda inferior fique na mesma linha de base do texto (não a grade de linha de base). Isso significa que a imagem é deslocada verticalmente. Nem CSS nem JS nos fornecem uma maneira de descobrir onde está a linha de base de um elemento de texto, então não sabemos o deslocamento. Devemos ignorar as imagens embutidas e aplicar nossa correção apenas às imagens definidas para display: block (felizmente, qualquer imagem flutuante é automaticamente definida para exibir o bloco).

Se uma imagem estiver em um contêiner, a margem aplicada à imagem pode ficar oculta devido às configurações de estouro no contêiner. Além disso, podemos não querer a margem na imagem, mas sim no elemento contêiner. No exemplo, preferimos ter margens na caixa branca do que na imagem dentro da caixa, para que possamos evitar lacunas estranhas que aparecem na caixa.

A função é executada apenas uma vez, mas em um design líquido as imagens mudam de altura quando o navegador é redimensionado (tente redimensionar o exemplo para algo bastante estreito para ver isso). O redimensionamento quebra o ritmo novamente. Precisamos que a função seja executada depois que o navegador for redimensionado, bem como após o carregamento da página. Os layouts líquidos também apresentam outros problemas; as imagens podem ter pixels fracionários de altura, por exemplo, 132,34 px. Isso, por sua vez, pode causar resultados inesperados, mesmo se aplicarmos uma margem fracionária (se você estiver interessado, aqui está o motivo: trac.webkit.org/wiki/LayoutUnit). Então, vamos precisar massagear a imagem em uma altura de pixel inteira para evitar bugs de layout causados ​​por pixels fracionários.

Por último, devemos tornar isso uma função mais reutilizável. Na verdade, com a complexidade que uma solução prática necessita sobre a solução teórica, devemos fazer um plug-in que possa ser reutilizado em outros projetos.

No último exemplo, você encontrará o código que faz tudo isso. O plug-in JavaScript é muito comentado para que você possa acompanhá-lo. Você pode usar o plug-in chamando-o da seguinte maneira:

1. $ (window) .bind (’load’, function () {
2. $ ("img"). baselineAlign ();
3. });

Ou você pode dizer ao plug-in para aplicar a margem a um contêiner nomeado, se houver um como pai da imagem:

1. $ (window) .bind (’load’, function () {
2. $ ("img"). baselineAlign ({container: ’. popup’});
3. });

Conclusão

Manter um bom ritmo vertical é uma prática de design sutil, mas eficaz, usada regularmente na impressão. Agora você conhece os princípios básicos, tem um conhecimento prático das linhas de base e da grade da linha de base e conhece algumas das limitações do layout de texto CSS em comparação com a impressão. Você também sabe como contornar essas limitações, compor seus documentos em qualquer ritmo vertical de sua preferência e tem uma ferramenta para ajudar a lidar com conteúdo de imagem perturbador.

Conforme o CSS amadurece, continuamos a ter mais recursos alinhados com nossos primos de impressão, portanto, um bom entendimento do tipo se tornará mais importante para a criação de sites de qualidade. Se você quiser saber mais sobre tipos em geral, recomendo fortemente www.thinkingwithtype.com (e comprar o livro para acompanhar). Se você procura artigos CSS sobre tratamento de tipos, existem vários artigos aqui e em outros lugares na web. Eu também recomendo ficar em dia com as últimas novidades de Mark Boulton e Elliot Jay Stocks, os quais falam com frequência sobre tipos em relação ao design da web especificamente.

Divirta-se!