Como projetar para a expansão do texto

A expansão do texto se torna um problema de composição quando uma interface depende de sua redação original ocupar uma quantidade exata de espaço. Um botão curto em inglês cabe. Uma tradução mais longa é cortada. Uma fileira de abas organizadas fica apertada, ou um cartão cresce enquanto sua ação continua presa à posição antiga.

Você não precisa esperar por todas as traduções para revisar essa rigidez. Pode testar um rascunho com textos deliberadamente maiores e depois repetir a revisão com traduções reais. A primeira etapa encontra fragilidades estruturais; a segunda verifica se a interface funciona para uma língua e um significado reais.

Por que uma única porcentagem de expansão não basta

Não existe uma porcentagem única que prepare uma interface para todos os idiomas. Rótulos curtos, frases longas, palavras compostas e diferentes sistemas de escrita criam tipos distintos de pressão. Contar caracteres também não informa exatamente quanto espaço o texto precisará quando renderizado.

A explicação do W3C sobre o tamanho do texto na tradução descreve por que textos compactos na língua de origem podem se expandir bastante e por que largura dos caracteres, estrutura das palavras e entrelinha importam. Seus exemplos são alertas úteis, não uma calculadora para sua interface específica. Revise a combinação real de conteúdo e fonte antes de considerar um componente pronto.

Imagine um painel fictício de eventos com um botão “Ver detalhes”. Um rótulo maior pode exigir um botão mais largo ou uma segunda linha. Enquanto isso, o título do evento pode passar de duas para três linhas. São mudanças diferentes, com consequências diferentes. Reservar a mesma porcentagem de espaço extra em todos os elementos não define como nenhum deles deve se comportar.

Primeiro, identifique o que as palavras precisam comunicar. Se um rótulo distingue consultar uma reserva de alterá-la, essa distinção precisa sobreviver. Se um aviso explica que uma ação não pode ser desfeita, seu significado não pode ser encurtado para preservar a altura original do cartão. A composição existe para transmitir a mensagem.

Faça um pequeno inventário dos componentes vulneráveis

Comece pelos lugares com espaço rigidamente controlado. Navegação, abas, botões, selos, rótulos de formulário, cabeçalhos de tabela e cartões pequenos costumam ser casos de teste mais informativos do que uma coluna generosa de parágrafos. Encontre exemplos em que o texto aparece ao lado de um ícone, preço, status ou outra ação.

Para cada componente, registre quatro comportamentos:

1. Quebra de linha: o rótulo pode usar outra linha?
2. Crescimento: o contêiner fica mais alto ou largo junto com ele?
3. Vizinhos: o ícone e a ação adjacente se movem com segurança?
4. Limites: se houver limite de linhas, onde a pessoa pode ler o texto completo?

Uma pergunta sem resposta é uma decisão de design ainda pendente; o rótulo curto em inglês pode apenas tê-la escondido.

Depois, anote o custo de uma falha. Uma etiqueta decorativa que fica mais alta é diferente de um valor de pagamento coberto por um rótulo. Priorize componentes que transmitam decisões, requisitos ou ações. Isso evita que uma revisão de localização passe sua primeira hora refinando variações inofensivas enquanto um controle essencial continua ilegível.

O que a Shopify aprendeu antes de as traduções chegarem

No relato da Shopify sobre a internacionalização de seu produto, a equipe descreve um problema fácil de ignorar em uma prévia em inglês: textos extraídos pareciam idênticos aos fixos no código. A equipe introduziu pseudotradução, substituindo caracteres por versões reconhecíveis e duplicando vogais. O texto alterado ajudou a identificar quais textos passavam pelo sistema de tradução e a examinar a interface com palavras mais longas.

A pseudotradução encontra cedo uma classe útil de defeitos: textos que nunca entram no sistema de tradução, controles que dependem de palavras curtas e contêineres incapazes de crescer. Não revela se uma instrução em francês é natural ou se uma composição em árabe tem a ordem correta de leitura.

Vale examinar a captura pelo que permanece reconhecível. Uma pessoa testando ainda consegue entender a tela enquanto vê caracteres incomuns. Isso facilita concluir uma tarefa normal e encontrar falhas no caminho. Preencher todas as caixas com sequências aleatórias criaria pressão, mas também tiraria a capacidade de julgar se ação e explicação ainda fazem sentido juntas.

Use a abordagem da Shopify para separar quatro verificações:

• Cobertura: o texto pseudo claramente marcado revela trechos que nunca foram transformados.
• Capacidade: a redação expandida testa se controles e contêineres conseguem crescer.
• Renderização: o sistema de escrita pretendido e a fonte alternativa revelam glifos ausentes ou caixas de linha cortadas.
• Idioma: traduções aprovadas permitem que uma pessoa fluente avalie significado e redação.

Um conjunto prático de testes de pressão para uma interface

Escolha uma página com título, abas, selo de status, duas ações e um erro. Preserve seus valores e destinos enquanto altera apenas o texto em análise.

Vincule o defeito ao texto e ao estado que o produziram. “A ação secundária em francês cobre a ação principal em 390px depois da validação” diz a um desenvolvedor por onde começar. “O francês precisa de mais espaço” não distingue uma largura fixa de botão de uma linha de ações inflexível ou de um erro mal posicionado.

Depois do reparo, repita também o teste com texto curto. Um botão de largura total pode resolver o rótulo mais longo e parecer desconectado em uma tela grande. Uma altura fixa elevada pode acomodar uma tradução e dificultar a leitura rápida dos registros comuns. Prefira crescimento orientado pelo conteúdo e comportamento definido de empilhamento; reserve capacidade fixa para situações com uma restrição real, como uma superfície de um ambiente hospedeiro incorporado.

Antes da revisão de idioma, dê ao tradutor o destino da ação e a frase ao redor. “Open” pode indicar um status ou uma ordem para abrir. Essa ambiguidade não se corrige com um botão mais largo. As verificações visual e linguística devem informar uma à outra sem pedir que nenhum revisor certifique um trabalho que não consegue avaliar.

Mantenha o teste de pressão controlado

Use um título de evento maior, um nome de local maior e um rótulo de ação mais descritivo. Mantenha datas e quantidades de participantes fixas na primeira comparação para que o comprimento do texto seja a variável investigada. Quando a composição funcionar, acrescente formatos localizados de data em uma passagem separada.

Use inglês expandido para encontrar pressão na composição e depois revise traduções reais quanto à naturalidade, ao significado e à renderização própria de cada sistema de escrita.

Escolha uma resposta para cada componente

O mesmo texto maior não deve provocar o mesmo reparo em todos os lugares. Um botão pode crescer; a navegação pode mudar de disposição; um cartão pode precisar de outra linha. Comece pela relação que precisa sobreviver.

Botões: cresça, quebre linha ou empilhe

Botões precisam de uma regra para rótulos maiores. Uma largura fixa pode ser útil em um grupo deliberadamente alinhado, mas fica frágil quando essa largura é tratada como mais importante do que o rótulo. Revise a ação dentro de sua composição antes de decidir se o botão deve crescer, quebrar linha ou mudar de lugar.

Para um par de ações abaixo de um formulário, empilhá-las em uma tela estreita pode ser mais claro do que espremê-las em uma linha. Se uma ação for principal, preserve seu destaque depois do empilhamento. O visitante não deveria deduzir a importância a partir de uma disposição de desktop que deixou de existir.

Um rótulo com quebra de linha não está automaticamente errado. Pode funcionar quando o botão tem altura suficiente, preenchimento equilibrado e ligação clara com o conteúdo sobre o qual age. No entanto, um conjunto de botões minúsculos de duas linhas pode se tornar difícil de percorrer visualmente. Se várias ações precisam de explicações longas, reconsidere se todas devem estar no mesmo grupo compacto.

Evite substituir rótulos significativos por ícones sem explicação só para economizar largura. Um ícone pode ser adequado para uma ação familiar no contexto certo, mas mudar a apresentação introduz um novo problema de reconhecimento. Avalie essa troca deliberadamente, em vez de tratá-la como uma forma neutra de fazer a tradução desaparecer.

Para uma verificação concreta de tamanho, medi três rótulos em inglês na fonte Albert Sans em 32px, com 20px de preenchimento horizontal de cada lado. “View details” precisa de 212px no total; “Review booking details”, de 368px; e “Review your booking details”, de 440px. Um botão fixo de 220px deixa apenas 180px para o rótulo; por isso, o primeiro cabe e os demais exigem uma resposta de composição. Esses rótulos de teste em inglês isolam a pressão de largura; não são traduções. A parte mais escura de cada barra é o texto medido, e a mais clara é o preenchimento. Em uma página estreita, compare a largura resultante com o espaço disponível no grupo de ações antes de escolher crescimento, quebra ou empilhamento.

Navegação: mude antes da colisão

A navegação costuma revelar a expansão cedo porque muitos rótulos disputam uma única linha horizontal. Um cabeçalho que mal comporta sua língua de origem tem pouca capacidade para uma redação maior. Pode precisar mudar de apresentação mais cedo em outro idioma ou usar uma composição que se adapte ao espaço disponível.

Verifique o cabeçalho completo, incluindo marca, seletor de idioma, ação da conta e qualquer link promocional. Revisar apenas os rótulos da navegação pode ocultar a colisão real. Um rótulo de conta um pouco maior pode ser o elemento que aperta todo o restante de forma desconfortável.

Não encurte rótulos de maneira isolada apenas para preservar larguras iguais. Um tradutor pode escolher palavras diferentes para manter o significado, e os rótulos resultantes podem não ser visualmente simétricos. É razoável que um item de navegação ocupe mais espaço se o grupo continuar compreensível e utilizável.

Nas abas, avalie se a quebra de linha cria ambiguidade. Duas fileiras de abas podem deixar menos claro qual conteúdo pertence ao item selecionado. Outro controle ou um tratamento deliberado de rolagem pode ser mais adequado, conforme a tarefa. O essencial é examinar o estado selecionado junto com o conteúdo de destino, não apenas garantir que todas as palavras estejam visíveis.

Cartões: preserve identificação e ação

Cartões repetidos criam pressão para manter todos os itens exatamente na mesma altura. Isso pode facilitar a leitura rápida, mas o método importa. Cortar texto significativo para preservar a grade pode facilitar o alinhamento dos cartões e dificultar a escolha entre eles.

No painel de eventos, suponha que um nome use três linhas e outro apenas uma. A ação ainda pode ficar em uma posição previsível se a composição do cartão distribuir o espaço com cuidado. A área do título deve poder crescer, e a relação entre título, data e ação deve continuar clara.

Decida qual texto pode ser abreviado e como acessar a versão completa. Uma prévia de descrição longa é diferente de um título que identifica o evento. Se dois eventos se tornam indistinguíveis depois do truncamento, o componente perdeu uma informação necessária para a escolha. Reticências não explicam a diferença ausente.

Verifique selos e rótulos de status separadamente. Um status mais longo não deve cobrir o nome do evento nem empurrar a data para fora do cartão. Mover o selo para uma linha própria pode ser melhor do que diminuir sua fonte. Depois da mudança, examine também um cartão com rótulo curto para que o reparo não crie espaço vazio excessivo em todos os demais.

Formulários: teste rótulos, orientações e erros juntos

Composições de formulário são especialmente sensíveis ao comprimento do texto porque vários tipos de conteúdo aparecem ao redor do mesmo controle. Um rótulo identifica o campo, uma orientação explica a entrada esperada e um erro descreve uma correção. Todos podem ficar maiores em outro idioma.

Verifique cada estado com os demais presentes. Um campo que parece adequado só com seu rótulo pode ficar confuso quando uma orientação traduzida e um erro aparecem abaixo dele. O leitor ainda precisa distinguir quais informações pertencem a cada campo e onde continuar depois da correção.

Rótulos e controles lado a lado podem precisar se empilhar quando o rótulo fica longo. Essa é uma escolha estrutural, não um sinal de tradução ruim. Se mantiver a disposição horizontal, dê espaço suficiente ao rótulo e ao controle para cumprirem suas funções. Um rótulo generoso ao lado de um campo estreito e inutilizável não é uma melhoria.

Preserve as distinções das mensagens de erro. “Obrigatório”, “Longo demais” e “Não foi possível salvar” descrevem problemas diferentes. Uma revisão de localização não deve comprimir tudo em uma frase genérica curta só porque a região do erro tem altura fixa. Deixe a região comunicar o problema específico e crescer com a mensagem.

Mantenha números, unidades e nomes em contexto

A expansão não se limita às frases. Datas, moedas, nomes e unidades podem mudar o espaço e a ordem exigidos por um componente. Trate-os como exemplos de conteúdo a revisar com a localidade pertinente, não como valores que o designer deve improvisar de memória.

Uma linha de preço pode combinar valor monetário, período de cobrança e uma ressalva. Se a ressalva quebrar linha, verifique se ainda pertence claramente àquele preço. No exemplo de eventos, um intervalo de datas pode exigir mais espaço do que uma data única. Manter rótulo e valor juntos pode importar mais do que deixar o cartão inteiro uma linha mais curto.

Use nomes representativos fornecidos por pessoas reais, em vez de presumir um número fixo de palavras curtas. Uma composição que só funciona para “Alex Lee” não comprova que nomes maiores ficarão legíveis. Considere onde o nome completo precisa permanecer visível e onde uma representação compacta é aceitável para a tarefa.

Evite concatenar fragmentos na especificação visual como se sua ordem na língua de origem fosse universal. Uma frase montada com número, substantivo e um pequeno sufixo pode exigir outra construção na tradução. Entregue o significado pretendido e o contexto para que o trabalho de idioma produza uma mensagem coerente, em vez de rearranjar pedaços desconexos sem orientação.

As dicas rápidas de internacionalização do W3C abordam fundamentos relacionados, incluindo declaração de idioma, separação de conteúdo e apresentação e cuidado com textos montados a partir de fragmentos.

Reserve espaço vertical, além do horizontal

Um reparo comum é aumentar a largura mantendo todas as alturas fixas. Isso pode ajudar um rótulo e deixar outro cortado quando seu número de linhas muda. Revise o fluxo vertical da seção inteira: um título maior pode empurrar para baixo um subtítulo, um grupo de ações e a seção seguinte.

Permita que a página absorva esse crescimento sempre que a tarefa permitir. Um cartão ficar mais alto costuma ser menos prejudicial do que uma frase essencial desaparecer. Se a altura precisar continuar limitada, defina explicitamente o comportamento alternativo, como mover detalhes secundários para outra visualização mantendo a identificação visível.

Examine o topo e a base dos caracteres realmente renderizados. Uma caixa pode parecer grande o suficiente para as palavras e ainda cortar um acento ou parte de um glifo. Mudar a fonte, o sistema de escrita ou o peso pode revelar esse problema. Uma captura feita com a fonte de origem não é evidência suficiente para outro sistema de escrita.

Não force todos os idiomas a imitar a quantidade exata de linhas da página original. O design deve preservar hierarquia, relações e usabilidade. Algumas variações de altura de seção e de quebra são consequências razoáveis de comunicar o mesmo significado com textos diferentes.

Combine testes de localização com revisão de largura

Uma tradução que funciona no desktop ainda pode falhar no celular. Teste os componentes vulneráveis em visualizações estreita, intermediária e larga e depois examine as larguras em que a composição muda. Mantenha o mesmo idioma selecionado enquanto executa uma tarefa completa para perceber relações que capturas isoladas não revelariam.

Separe as observações em problemas de idioma e de composição. Se a redação parecer pouco natural, precisa de revisão linguística. Se um rótulo bem formulado colidir com o controle vizinho, precisa de trabalho de composição. Às vezes, as duas coisas são verdadeiras, mas classificar o problema evita que designer e tradutor o devolvam repetidamente um ao outro.

Use uma pessoa que entenda o idioma para os julgamentos finais sobre redação e significado. Quem não fala a língua pode identificar texto cortado, sobreposições e caracteres ausentes; não pode confirmar de forma confiável se um rótulo encurtado ainda comunica a ação correta. Registre essa limitação na revisão, em vez de tratar o ajuste visual como aprovação da tradução.

Composições da direita para a esquerda também precisam de uma revisão distinta de direcionalidade. Um teste que apenas acrescenta comprimento a um texto da esquerda para a direita não comprova que ordem, conteúdo com direções misturadas ou controles direcionais funcionam corretamente. Mantenha esse trabalho explícito, sem incorporá-lo a uma afirmação vaga de que todos os idiomas passaram.

Use o OpenDesign para examinar e revisar a composição

O OpenDesign pode apoiar esse trabalho com prévia HTML, visualizações de desktop, tablet e celular e revisões focadas no design. Você pode fornecer texto aprovado como contexto, examinar o resultado e usar comentários ou chat para descrever uma colisão. As edições manuais compatíveis de texto e estilo são úteis para experimentar um ajuste local.

Por exemplo, especifique que o título do evento pode ocupar mais linhas, a data deve continuar inteiramente visível e a ação principal deve permanecer associada ao cartão. Mantenha o texto inalterado enquanto testa o reparo da composição. Isso facilita julgar o resultado, em comparação com pedir um redesenho geral a cada texto longo.

Forneça traduções aprovadas ao julgar a composição final, para que mudanças na redação não escondam uma colisão que ainda precisa de reparo.

Depois de um reparo local, compare novamente o conteúdo original e o expandido. Uma regra que resolve o exemplo mais longo pode deixar rótulos curtos desnecessariamente estranhos. Uma boa flexibilidade atende a uma faixa: textos comuns ficam bem compostos, textos maiores continuam utilizáveis e o motivo de qualquer tratamento excepcional fica claro.

Defina o que significa “pronto para tradução”

Uma passagem útil registra como os componentes vulneráveis se comportam, quais casos de pressão foram testados e quais idiomas reais foram revisados. Inclua restrições não resolvidas, como um widget externo com largura fixa de rótulo ou uma imagem com texto que ainda precisa de uma versão localizada.

Dê contexto aos tradutores para textos ambíguos. O destino de um botão, a explicação disponível ao redor e a distinção entre ações semelhantes podem importar. Se um limite de caracteres for realmente inevitável, informe-o com seu motivo e identifique quem pode decidir se deve mudar. Não transforme silenciosamente toda largura atual de contêiner em uma restrição de idioma.