68 lines
2.4 KiB
Markdown
68 lines
2.4 KiB
Markdown
|
---
|
||
|
|
title: Alignment
|
||
|
|
localeTitle: Alinhamento
|
||
|
|
---
|
||
|
|
## Alinhamento
|
||
|
|
|
||
|
|
O alinhamento tipográfico altera o fluxo de texto em um documento. Os designers podem usar essa ferramenta poderosa para aprimorar sutilmente a apresentação do texto, dando-lhe forma visual e contexto.
|
||
|
|
|
||
|
|
Experimente o alinhamento para encontrar novas combinações visuais empolgantes que destacam seu conteúdo. Certifique-se de testar erros de alinhamento em diferentes dispositivos e navegadores.
|
||
|
|
|
||
|
|
Use CSS para alinhar o texto sempre que possível. Você pode encontrar tags de alinhamento HTML (por exemplo, `<p align="right"></p>` ou `<center></center>` ), mas elas estão obsoletas no HTML 5.
|
||
|
|
|
||
|
|
### Texto justificado à esquerda
|
||
|
|
|
||
|
|
Padrão, `text-align: left;`
|
||
|
|
|
||
|
|
Em caso de dúvida, o tipo padrão de justificativa de texto geralmente é a melhor escolha. Especialmente para artigos ou longos blocos de texto, o texto justificado à esquerda é mais fácil de ler, já que as bordas irregulares à direita fornecem contexto visual para ajudar os leitores a manter seu lugar enquanto seus olhos mudam de linha para linha.
|
||
|
|
|
||
|
|
Use para:
|
||
|
|
|
||
|
|
* Texto de corpo
|
||
|
|
* Mais tudo mais
|
||
|
|
|
||
|
|
### Texto justificado à direita
|
||
|
|
|
||
|
|
`text-align: right;`
|
||
|
|
|
||
|
|
Texto justificado à direita e à esquerda pode ser útil como um tempero visual, mas é mais difícil de ler em trechos longos do que o texto justificado à esquerda.
|
||
|
|
|
||
|
|
Pode ser usado para:
|
||
|
|
|
||
|
|
* Legendas
|
||
|
|
* Navegação
|
||
|
|
* Sidebars
|
||
|
|
* Citações
|
||
|
|
|
||
|
|
### Texto Centrado
|
||
|
|
|
||
|
|
`text-align: center;`
|
||
|
|
|
||
|
|
Use texto centralizado para atrair os olhos dos leitores para pontos de ênfase (por exemplo, títulos, títulos de páginas, rodapés). Não use texto centralizado para longos blocos de texto, pois é extremamente cansativo de ler.
|
||
|
|
|
||
|
|
Pode ser usado para:
|
||
|
|
|
||
|
|
* Cabeçalhos
|
||
|
|
* Título da página
|
||
|
|
* Navegação
|
||
|
|
* Sidebars
|
||
|
|
* Legendas
|
||
|
|
* Citações
|
||
|
|
* Rodapés
|
||
|
|
|
||
|
|
### Texto justificado
|
||
|
|
|
||
|
|
`text-align: justify;`
|
||
|
|
|
||
|
|
Texto com justificativa completa é complicado de recomendar para o corpo do texto, pois grandes lacunas podem aparecer entre as palavras em algumas linhas. No entanto, desgionadores habilidosos podem fazer uso bonito dele.
|
||
|
|
|
||
|
|
Pode ser usado para:
|
||
|
|
|
||
|
|
* Legendas
|
||
|
|
* Notas abertas
|
||
|
|
|
||
|
|
#### Mais Informações:
|
||
|
|
|
||
|
|
* [Artigo da Wikipédia](https://en.wikipedia.org/wiki/Typographic_alignment)
|
||
|
|
* [Guia de estilo da web](https://webstyleguide.com/wsg2/type/align.html)
|
||
|
|
* [Alinhamento de texto na Web](http://www.webpagemistakes.ca/text-alignment-on-the-web/)
|