[Dúvida] Altura do hug content

Olá, Daniel

Tudo bem?

Isso acontece porque a caixa delimitadora de textos precisa levar em conta a linha descendente da família tipografia e não apenas a altura x. Ou seja, a caixa delimitadora do conteúdo textual prevê até onde iria a parte inferior dos caracteres minúsculos de letras como g, q, p, j. O texto "Para você" não tem nenhum desses caracteres, de modo que parece haver um espaço perdido.

É possível ajustar manualmente a altura da caixa, mas com isso o espaçamento abaixo da caixa vai ignorar as partes descendentes das letras. Para alterar esse valor, que é automático e específico de cada família tipográfica, é preciso abrir a edição do texto e mudar o campo onde neste print se lê o número 27:

Tenha em mente que essa alteração, dependendo do novo valor, pode fazer com que o texto se misture com a imagem (ou o elemento que estiver abaixo).

Abraços

Obrigado, Felipe!

Nesse caso, o problema é se o texto tiver duas linhas, né? Porque aí dessa forma o entrelinhas vai ficar muito espremido. Existe alguma outra forma? Porque comentei com um desenvolver do time que o espaço entre um elemento e outro era de 4px, mas ele fez em 7px por conta dos 3px a mais do hug. Como podemos explicar isso todas as vezes?

Oi Daniel, tudo bem? O que eu faço é que gosto de usar espaços de entrelinha sempre com múltiplos de 8. Com isso, em um exemplo onde o texto tem 16px de altura, eu deixo a entrelinha 24px. Dessa forma, a caixa do texto, terá com uma linha, 24px de altura, com duas linhas 48px e assim por diante. Para a pessoa de desenvolvimento lidar com isso, basta ela definir no código que a entrelinha tem esse valor, e o tamanho da caixa de texto ficará dinâmica em relação à quantidade de linhas que ocupa.

No exemplo desse print, a caixa de texto tem 48px de altura, isso pq ela tem um texto com duas linhas de entrelinha 24px, portanto 2x24=48px

Espero que tenha ajudado e bons estudos =)

Esse elemento do print foi construído da seguinte forma: acima tenho um texto para título, esse texto tem um tamanho e um tamanho de caixa definido pela entrelinha, abaixo tenho outro texto complementar com 24px de altura para a entrelinha. Esses dois elementos estão em um auto-layout que define um espaçamento também entre esses dois textos.

Portanto nós temos essa possibilidade de compor os elementos, definindo alturas especificas pra ele e espaçamentos entre os elementos no auto-layout

Obrigado pelo retorno, André.

Acho que não consegui me fazer entender direito. Ou pode ser que eu não tenha entendido a explicação.

O espaço ao qual me referi é entre o texto e um elemento à parte, como um botão. Quando aplico o "hug" no texto, este cria um espaço de 3px para baixo na caixa de texto. A distância da caixa de texto até o botão, por exemplo, deve ser de 4px. Mas, por conta do "hug", ele fica com 7px, entende?

Na demanda do time, comentei que o espaçamento vertical entre o texto e o botão deveria ser de 4px. Mas no protótipo existe 7px (3px por causa do hug e 4px pelo espaçamento normal) e ele acabou fazendo com 7px, pois se guiou pelo protótipo.

Minha dúvida inicial é se há alguma outra forma de simplesmente não acrescentar esses pixels "extras" quando acionamos o hug e sem precisar alterar o espaçamento entre as linhas.

Coloco uma imagem aqui pra mostrar melhor. Obrigado.

Estranho, pq teoricamente não deveria existir esse espaço de 3px abaixo do texto, vc pode me enviar um print quando vc seleciona a caixa de texto? sem o auto-layout?

Aí está, André. Depois que aplico o hug content no auto-layout, ele acrescenta esses pixels abaixo do texto.

Bom dia Daniel, tudo bem?

Olha, eu acredito que o correto mesmo, seria como o instrutor Felipe comentou, a caixa deve ser um pouco maior, para conter caracteres que descem para abaixo da linha de X, casos de caracteres como j, ou q. No seu exemplo da esquerda, a caixa delimitadora do texto está muito colada e isso pode gerar problemas em caracteres que comentei. O ideal seria usar a caixa como está no auto-layout mesmo.

Sobre o handoff para o pessoal de desenvolvimento, eu somente comentaria: o espaço entre o texto e a caixa debaixo eh 4px, e o tamanho da caixa de texto vai depender da quantidade de linhas, mas estou usando uma entrelinha de Xpx.

Espero que tenha ajudado

Hum, certo... Pena que isso ainda não é possível. Quando diminuo a altura da caixa, o hug é desabilitado. Espero que o Figma faça essa melhoria em algum momento.

Obrigado pelas orientações.

Abraços

Hmmmm, acho que agora entendi melhor sua dúvida.

Se vc mexer na altura da caixa, o hug eh desabilitado SIM. Isso pq, o Hug contents leva em consideração a altura da caixa, calculando a entrelinha que vc está usando no texto.

Se vc mexer na mão na altura da caixa, obviamente o hug content vai se desabilitar e mudará para fixed height. Isso pq vc mexeu na mao na caixa, ela nao está mais sendo calculada sozinha. Para que fique sempre hug contents, vc nao pode mexer na altura da caixa na mão, deve sempre respeitar a altura que o hug contents calculou.

Se vc tiver mais dúvida, podemos marcar uma videochamada rápida e vc me explica o problema melhor e eu tento ajudar kkkk

Nesse caso, o hug contents calculou sim esse espaço logo abaixo do texto, pq a entrelinha está calculada como AUTO. Se vc brincar com esse valor, vc pode chegar ao resultado que deseja. Tente trocar o espaço de entrelinha de Auto para 16px ou menos por exemplo, provavelmente em algum momento vc vai chegar ao resultado que deseja.

Mas como eu disse, eu recomendo que vc use o exemplo do seu print da direita, com um espaço abaixo do texto, justamente para caberem caracteres que tem elementos abaixo da linha de x, como j ou q.

Puxa, André, se pudermos marcar uma chamada, vou ficar muito agradecido. Aí não fico com nenhuma pulga atrás da orelha. Como podemos proceder com isso?

Vc pode agora? se sim, pode entrar nesse link? https://meet.google.com/sgs-rvqj-mjh?authuser=0

Posso entrar às 10h40. Rola?

Sim, se quiser me manda uma mensagem no whatsapp que a gente combina, pode ser? meu número é (21) 99385-3311