Uma barra mais estreita que a janela

Todas as páginas do nosso painel deslizavam de lado com uma janela de 768 píxeis. Oito píxeis a mais em inglês, trinta e oito em romeno. Estava assim havia algum tempo, em nove línguas, em todas as rotas. Esses números vêm de uma varredura em duas notações de moeda; uma leitura isolada anterior do mesmo cabeçalho dava três.

A causa está numa frase com que é fácil concordar e que é falsa: o cabeçalho dobrava o seu conteúdo pela largura da janela.

A janela não é a barra

A partir do ponto de quebra médio, a barra lateral fica ao lado do cabeçalho em vez de atrás de um menu compacto, e custa dezasseis rem. Numa janela de 768 píxeis, portanto, a caixa de conteúdo do cabeçalho tem 464 píxeis. Nem 768, nem 736.

As duas regras que deviam ter impedido o transbordo, esconder o nome da conta e encolher a cápsula de ligação até um ponto, estavam ambas escritas contra o ponto de quebra pequeno: 640 píxeis de janela. Isso é 128 píxeis antes do sítio onde a barra lateral aparece e leva os seus dezasseis rem. Entre esses dois números há uma faixa em que o cabeçalho julga ter espaço de sobra e na verdade tem menos do que em qualquer largura inferior, porque a 640 a barra lateral ainda estava escondida.

Isto não é um problema do Tailwind nem um ponto de quebra colocado um degrau abaixo. É um erro de categoria. Uma consulta de suporte responde ao tamanho da área visível. A pergunta que o cabeçalho precisa de ver respondida é quanto espaço lhe coube, e até haver consultas de contentor não havia forma de a fazer.

Meça o que a linha pede, não o que ela faz

Neste ponto a tentação é subir um pouco o ponto de quebra e ver o resultado. Isso produz um número que funciona na máquina de quem o subiu.

Uma linha flexível encolhe os filhos até à sua largura mínima de conteúdo antes de algo transbordar, portanto o que se vê no ecrã é o sintoma final e não a medição. Uma linha pode estar muito acima do seu orçamento e ainda assim parecer bem, até ao momento exato em que um filho já não consegue encolher. O número pelo qual se guia é o que a linha pede quando nada a limita: clone-a, ponha-a na largura máxima de conteúdo e leia-a, em todas as línguas.

Feito a 768 píxeis na notação monetária mais larga, sobre nove línguas, as parcelas saem assim.

Daí saem dois limiares, ambos formulados contra a caixa de conteúdo do cabeçalho em vez da janela. Mostrar o nome da conta precisa de 524 píxeis, portanto começa aos 34 rem, com vinte píxeis de folga. Mostrar a cápsula em vez do ponto precisa de 622,8, portanto começa aos 40 rem, com dezassete. Abaixo do limiar do nome a linha pede 422,3 píxeis, o que cabe folgadamente nos 464 que recebe.

O agradável em fazer uma pergunta de contentor em vez de uma pergunta de janela é o que acontece depois sem mais uma linha. Quando a barra lateral se dobra num carril, essa mesma janela de 768 píxeis deixa 656 píxeis de cabeçalho, e o nome e a cápsula voltam sozinhos. Nada sabe do carril; a barra limitou-se a medir-se outra vez.

A língua com zero píxeis de transbordo

A varredura que apanhava esta classe de defeitos mede a largura do documento contra a da área visível. Em nove línguas informou transbordo em toda a parte, de oito a trinta e oito píxeis, exceto em francês, que informou zero.

O francês não estava bem. A cápsula de ligação tinha passado para uma segunda linha dentro de uma barra de sessenta e quatro píxeis de altura com os elementos centrados, portanto o texto ficava em silêncio meio fora da sua própria caixa enquanto o documento continuava exatamente tão largo como a janela. Nenhuma varredura de transbordo vê isso, porque nada transbordou.

É a mesma forma de um defeito anterior no nosso sítio de marketing, onde um título de uma só palavra dentro de um mosaico encolhido pintava por cima do vizinho e a largura da página nunca mudava. Texto que sai da sua caixa não alarga o documento. A verificação tem portanto de ser a outra: a margem direita do texto contra a margem interior da caixa onde deveria estar, mais o número de caixas de linha que ocupa. Numa barra de altura fixa, mais do que uma caixa de linha já é por si um defeito.

Duas formas de a medição mentir

O aparelho de medição levou duas tentativas, e ambas as falhas apontavam na mesma direção: para um resultado verde que nada significa.

Um clone na largura máxima de conteúdo tem de ser medido dentro do contentor. O nosso era acrescentado ao corpo do documento, que fica inteiramente fora do cabeçalho, portanto a consulta de contentor nunca correspondia e o clone era desenhado na sua forma estreita: 394,8 píxeis onde a linha verdadeira pedia 515,3. Lido como um antes e um depois, aquilo parece exatamente uma reparação bem-sucedida. É a mesma armadilha de medir em euros enquanto o cliente vê dólares, ou de medir uma página cujos dados nunca chegaram: o número não está errado, é a resposta a outra pergunta.

A segunda é mais baça e ainda assim vale a pena saber. Uma verificação de sintaxe do guião de varredura passa por cima de um acento grave sem escape dentro de um modelo, portanto uma sonda pode subtilmente não ser a sonda que se escreveu enquanto o ficheiro é analisado sem problemas.

Por isso a varredura ganhou um modo de prova que pendura no cabeçalho elementos partidos de propósito, um bloco demasiado largo para a barra, um botão demasiado estreito para o seu rótulo e uma linha de texto que sai da sua própria caixa, e exige que a sonda os assinale a todos. Exige também que o botão de conta exista sequer. Um scanner que não encontra nada não se distingue de um scanner que não olha, e a única maneira de os separar é dar-lhe algo para encontrar.

Contra o código por reparar, a varredura produziu setenta e quatro resultados vermelhos em noventa e oito verificações. Contra a reparação, em ambas as moedas, 2033 em 2033.

Cortar sem partir o botão

Três decisões menores da reparação são exatamente do género que alguém reverte mais tarde ao arrumar, por isso estão escritas onde estão as classes.

O corte vive num elemento dentro do botão, não no botão. Pôr overflow: hidden no próprio botão recorta a sua área de clique e o seu anel de foco, o que transforma uma correção estética num defeito de acessibilidade por teclado.

O nome acessível mantém-se inteiro. Cortar é uma escolha de apresentação; um leitor de ecrã deveria receber o nome completo da organização, portanto o rótulo leva-o por inteiro.

E exatamente uma coisa nessa linha pode encolher. Sem fixar os botões de ícone, o modelo flexível reparte o encolhimento por todos, e obtêm-se três botões de ícone esmagados em vez de um nome que corta com limpeza. Encolher é uma decisão sobre quem cede, e se não a tomar, toma-a o motor de composição por si, por igual, o que quase nunca é o que alguém quer.

Mais uma coisa a saber antes de recorrer a isto: um contentor cria também uma fronteira de contenção de composição, o que faz dele o bloco contentor de tudo o que esteja fixo por baixo. Aqui isso não muda nada, porque os menus e gavetas envolvidos são diálogos nativos na camada de topo, e porque a barra já levava um filtro de fundo com exatamente o mesmo efeito. Foi verificado abrindo-os e não deduzido, e se a resposta tivesse sido outra, o contentor teria de ir para outro sítio.

O que levanta a última restrição: o contentor tem de ser declarado na única função que constrói todos os cabeçalhos, porque o cabeçalho de administração monta o mesmo menu de conta. Uma consulta de contentor sem contentor nunca corresponde, em silêncio. Declare-a num sítio e esqueça o outro, e o nome da conta desaparece de uma secção inteira do produto sem deixar rasto em registo nenhum.

O que registaríamos

1. 01Uma consulta de suporte responde a uma pergunta sobre a área visível. Se um componente partilha a sua largura com uma barra lateral, essa é a pergunta errada, e a resposta erra exatamente pela largura da barra.
2. 02Guie-se pelo que uma linha pede, não pelo que ela faz. O modelo flexível encolhe primeiro os filhos, portanto o ecrã mostra-lhe o sintoma final.
3. 03Meça o clone dentro do contentor. Fora dele a consulta não corresponde e mede-se a forma estreita, o que se lê como uma correção.
4. 04Zero píxeis de transbordo pode ser o caso partido. Texto que sai da sua caixa não alarga o documento; verifique o texto contra a sua própria caixa e conte as caixas de linha.
5. 05Dê ao scanner algo para encontrar. Um modo de prova que planta defeitos conhecidos é a única forma de distinguir «nada de errado» de «não está a olhar».
6. 06Corte num elemento interior. Recortar o botão recorta o anel de foco, e o nome acessível deveria ficar inteiro.
7. 07Escolha qual elemento encolhe. Deixado a si, o modelo flexível reparte a dor por igual por tudo.

Para que fique claro o que isto é: a reparação está construída, medida em nove larguras, nove línguas, cinco rotas e ambas as moedas, e a funcionar. Não foi medida numa compilação de produção, portanto aqui nada se diz sobre deslocamento de composição, e usou-se um único nome de organização todo o tempo.

Do trabalho de plataforma na Provibr. A página cujo transbordo começou isto está em sem ligação ao lado de um título que diz ligado, e o que nove línguas fazem a um conjunto de controlos de tamanho fixo está em dezasseis mil chaves e nove línguas.