Não é possível inserir espaço ao lado de um emoji dentro de tags ,

Experiência do Usuário
1

\u003ckbd\u003e:blue_square: qualquer texto\u003c/kbd\u003e

Será renderizado da mesma forma que:

\u003ckbd\u003e:blue_square:qualquer texto\u003c/kbd\u003e

\u003ckbd\u003e:blue_square: qualquer texto\u003c/kbd\u003e

Não há espaço visível entre o emoji e o texto, embora o espaço esteja presente no código HTML.

Isso é uma limitação da tag \u003ckbd\u003e? Existe uma maneira elegante de corrigir isso ou devemos confiar em coisas “hacky” como \u0026nbsp; ou ㅤ, etc.?

\u003ckbd\u003e:blue_square:\u0026nbsp;qualquer texto\u003c/kbd\u003e

\u003ckbd\u003e:blue_square:\u0026nbsp;qualquer texto\u003c/kbd\u003e

\u003ckbd\u003e:blue_square:ㅤqualquer texto\u003c/kbd\u003e

\u003ckbd\u003e:blue_square:ㅤqualquer texto\u003c/kbd\u003e

2

Provavelmente é o display: inline-flex; que está aplicado às tags KBD, forçando os elementos a ficarem mais próximos.

Pode haver uma solução CSS aqui, não tenho certeza.

1 curtida
3

Uma solução é adicionar alguns valores para a propriedade white-space, como pre-wrap, mas isso causará problemas se tivermos mais de uma quebra de linha dentro de <kbd>.

image

Se tornaria:

image

Uma alternativa seria adicionar automaticamente margens esquerda e/ou direita ao emoji se ele não for o primeiro ou o último elemento.

No estado atual:

image

image

Com este CSS adicionado:

kbd {
    // regras atuais
    img {
        margin: 0 .5em;
        &:first-child {
            margin-left: 0;
        }
        &:last-child {
            margin-right: 0;
        }
    }
}

image

image

Essas margens forçadas seriam aceitáveis? Fica mais bonito e aumenta a legibilidade, mas será impossível para o usuário não ter uma margem entre o emoji e algum texto (quanto a mim, ficaria feliz, pois vejo a margem forçada como um benefício).

2 curtidas
4

Não tenho certeza sobre isso, vamos ver o que os @Designers acham. Idealmente, podemos simplesmente ensinar inline-flex a ser mais… flexível.

3 curtidas
6

Acho que podemos usar a propriedade gap para isso? O problema é que mudar kbd para usar flexbox removeu qualquer espaço natural entre os elementos internos:

kbd {
  gap: 0.5em;
}

produz:

Screenshot 2022-12-08 at 1.06.10 PM

Isso adicionaria espaço entre quaisquer elementos HTML dentro da tag KBD e não exigiria exceções para first/last-child.

3 curtidas
8

Acabei de mesclar isto:

4 curtidas
9

Ótimo, obrigado! :+1:

Não sabia da propriedade gap, aliás, é sempre bom aprender algo novo.

3 curtidas