Justificar texto é uma tarefa comum em web design, pois ajuda a criar um layout limpo e profissional, alinhando o texto uniformemente nas margens esquerda e direita. Em HTML5, a justificação de texto normalmente é feita com CSS (Cascading Style Sheets) em vez de diretamente nas tags HTML.
Por que justificar texto?
Justificar o texto cria um bloco uniforme de texto que se alinha às bordas esquerda e direita de um contêiner, semelhante ao texto de jornal ou livro. Esse método é frequentemente usado para melhorar a estética dos parágrafos, fazendo com que o texto pareça mais refinado e organizado.
Como justificar texto usando CSS em HTML5
Você pode justificar o texto em HTML5 usando o alinhamento de texto propriedade em CSS. A alinhamento de texto propriedade controla o alinhamento horizontal do texto dentro de um contêiner. Para justificar o texto, basta usar o valor justificar.
Veja como você pode fazer isso:
Exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de texto justificado</title>
<style>
/* CSS to justify the text */ p {
text-align: justify;
}
</style>
</head>
<body>
<h1>Como justificar texto em HTML5</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis felis velit. Nada fácil. Inteiro convallis, orci a egestas sodales, orci lorem lacinia lorem, eget pretium eros lorem eu erat. Quisque euismod, lorem sit amet tempor feugiat, mauris erat dictum arcu, sed suscipit justo nulla a dui. Nunc sit amet magna nisi. Auctor inteiro nec metus eget vulputate. Suspendisse vitae urna eget augue volutpat iaculis non sit amet mi.
</p>
<p>
Aenean tincidunt, arcu nec tincidunt aliquet, nisl risus maximus nunc, sed bibendum risus velit a augue. Curabitur suscipit, lectus id efficitur mollis, metus lectus tincidunt ligula, id luctus magna risus et sapien. Nada fácil. Proin elementum sit amet purus a fermentum. Ut et velit a mi volutpat auctor.
</p>
</body>
</html>
Explicação:
- Estrutura HTML:
- O
<h1>a tag é usada para o título e duas<p>tags são usadas para parágrafos de texto.
- O
- CSS:
- O
alinhamento de texto: justificar;estilo é aplicado a todos<p>elementos. Isso garante que o texto dentro dessas tags de parágrafo seja justificado, ou seja, ele será esticado para alinhar as margens esquerda e direita.
- O
Alternativa: Justificar texto para elementos específicos
Se você não quiser aplicar a justificação a todos os parágrafos, mas apenas a alguns específicos, você pode usar uma classe ou ID para direcionar elementos específicos.
Exemplo usando uma classe:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de texto justificado</title>
<style>
/* CSS to justify only paragraphs with the class 'justify-text' */ .justify-text {
text-align: justify;
}
</style>
</head>
<body>
<h1>Como justificar texto em HTML5</h1>
<p class="justify-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis felis velit. Nada fácil. Inteiro convallis, orci a egestas sodales, orci lorem lacinia lorem, eget pretium eros lorem eu erat. Quisque euismod, lorem sit amet tempor feugiat, mauris erat dictum arcu, sed suscipit justo nulla a dui.
</p>
<p>
Este parágrafo não será justificado porque não possui a classe "justify-text".
</p>
</body>
</html>
Neste exemplo, apenas o parágrafo com a classe justificar-texto é justificado e o segundo parágrafo permanece alinhado à esquerda.
Coisas para manter em mente:
- Legibilidade: Texto justificado pode, às vezes, criar espaçamento irregular entre as palavras, especialmente se o comprimento da linha for curto. Isso pode afetar a legibilidade. É importante testar a justificação em diferentes dispositivos e tamanhos de tela para garantir uma aparência limpa e legível.
- Hifenização: Texto justificado também pode levar a quebras de palavras estranhas. Para melhorar a aparência do texto, você pode habilitar a hifenização em CSS usando o
hífenspropriedade (embora nem todos os navegadores suportem esse recurso).p { text-align: justify; hyphens: auto; /* Permite hifenização automática */} - Alinhamentos Alternativos:Se você decidir que a justificação não fica ótima em todos os casos, você pode experimentar outros alinhamentos de texto, como
esquerda,certo, oucentro, usando oalinhamento de textopropriedade.
Conclusão
Justificar texto em HTML5 é simples de conseguir usando CSS com o alinhamento de texto: justificar; Propriedade. Ajuda a criar blocos de texto limpos e com aparência profissional, comumente encontrados em livros, jornais e sites. Seja para justificar o texto em toda a página ou apenas para elementos específicos, o CSS oferece uma maneira fácil de implementar esse recurso e adaptá-lo às suas necessidades.
Foto por Lucas
