Gerador de Lorem Ipsum

O texto de preenchimento existe para você avaliar um layout sem precisar lê-lo. Um texto de verdade puxa o olhar para as palavras; um latim sem sentido deixa você olhando para o comprimento das linhas, o ritmo e o ponto em que o design quebra. O gerador acima produz o quanto você precisar.

Como funciona

Escolha uma unidade — palavras, frases ou parágrafos — e uma quantidade entre 1 e 50. Dois controles definem o resultado:

• Começar com “Lorem ipsum dolor sit amet…” faz o texto começar com o conhecido Lorem ipsum dolor sit amet, consectetur adipiscing elit., para que ele seja lido como um placeholder reconhecível, e não como um texto quebrado. Desative-o para ter um texto que varia desde a primeira palavra.
• Gerar produz uma amostra nova com as mesmas configurações, e é o jeito mais rápido de verificar se um componente lida com uma variedade de comprimentos, e não só com aquele que por acaso deu certo.

As frases são montadas a partir de um conjunto do vocabulário tradicional, com 6 a 15 palavras cada, inicial maiúscula e ponto final. Os parágrafos têm de 3 a 6 frases. Por causa da aleatoriedade, duas gerações com as mesmas configurações saem diferentes; então use o botão de copiar em vez de contar com reproduzir uma amostra depois.

A geração acontece inteiramente no seu navegador: nenhuma requisição, nenhum limite de uso, e funciona offline.

Como usar bem

Use o comprimento real, não um confortável. O objetivo do texto de preenchimento é colocar o layout sob estresse, e o instinto de um designer é colar uma quantidade que fique bonita. Se os títulos de produto nos seus dados chegam a 90 caracteres, gere 90 caracteres. Se um campo costuma ficar vazio, teste o caso vazio também. A maioria dos bugs de layout mora nos extremos: o card que só quebra com um título de duas linhas, a célula de tabela que transborda com o valor mais longo, o botão cujo rótulo quebra de linha em alemão.

Gere várias variações. Uma amostra comprova um caso só. Gerar de novo quatro ou cinco vezes, ou preencher uma lista com comprimentos diferentes, revela os problemas de alinhamento que uma grade uniforme de blocos idênticos esconde.

Lorem ipsum é latim, e latim é estreito. Ele não tem diacríticos, nem palavras compostas longas, nem escrita da direita para a esquerda, nem caracteres CJK. Um layout validado só com ele ainda pode quebrar com Straßenbahnhaltestelle, com árabe ou com um emoji que muda a altura da linha. Em produtos internacionalizados, teste com strings reais dos locales que você realmente suporta.

Não leve isso para produção. Deixar texto de preenchimento chegar à produção é um vexame bem conhecido, e um buscador que indexa uma página em latim a trata exatamente como o que ela é: uma página sem conteúdo. Adicione uma verificação no build ou, no mínimo, rode um grep por lorem antes do release.

Onde o texto de preenchimento faz sentido

Além do design visual, texto gerado é útil como dados de teste: popular um banco de dados com linhas suficientes para a paginação ficar realista, preencher um campo até o comprimento máximo para checar a validação ou produzir um payload grande o bastante para pôr à prova um limite de tamanho. Mesmo assim, os testes que o usam devem verificar a estrutura, e não o texto em si, já que o conteúdo muda a cada execução: um teste que depende de uma string aleatória específica é um teste instável só esperando a hora de falhar. Fundamentos de testes explica a diferença entre fixtures fixas e dados gerados, e quando usar cada um.

Do lado do layout, a forma como o texto flui depende do elemento que o contém, e o essencial de HTML5 aborda o modelo de conteúdo que determina isso.

Ferramentas relacionadas

Para medir uma amostra em relação a um limite de caracteres ou de palavras, use o contador de palavras. Para dados de teste numéricos aleatórios em vez de texto, o gerador de números aleatórios; para identificadores, o gerador de UUID. Para converter um título entre estilos de nomenclatura, o conversor de maiúsculas e minúsculas.