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:

    
    
    
    


    
Como justificar texto em HTML5
    

        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. 
    
    

        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.
    

Explicação:

• Estrutura HTML:
  • O
    a tag é usada para o título e duas
    tags são usadas para parágrafos de texto.
• CSS:
  • O alinhamento de texto: justificar; estilo é aplicado a todos
    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.

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:

    
    
    
    


    
Como justificar texto em HTML5
    

        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.
    
    

        Este parágrafo não será justificado porque não possui a classe "justify-text".
    

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:

1. Legibilidade: Justified text can sometimes create uneven spacing between words, especially if the line length is short. This can affect readability. It’s important to test the justification on different devices and screen sizes to ensure a clean, readable appearance.
2. 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ífens propriedade (embora nem todos os navegadores suportem esse recurso).

   p { text-align: justify; hyphens: auto; /* Permite hifenização automática */}
   

3. 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, ou centro, usando o alinhamento de texto propriedade.

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