No se puede insertar espacio junto a un emoji dentro de las etiquetas <kbd>

UX
1

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

Se renderizará igual que:

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

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

No hay espacio visible entre el emoji y el texto, aunque el espacio está presente en el código HTML.

¿Es una limitación de la etiqueta \u003ckbd\u003e? ¿Hay alguna forma elegante de solucionarlo o deberíamos recurrir a trucos como \u0026nbsp; o ㅤ, etc.?

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

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

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

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

2

Probablemente sea display: inline-flex; lo que se aplica a las etiquetas KBD, forzando que las cosas estén más juntas.

Puede que haya una solución CSS aquí, no estoy seguro.

1 me gusta
3

Una solución es añadir algunos valores para la propiedad white-space, como pre-wrap, pero causará problemas si tenemos saltos de línea adicionales o múltiples dentro de <kbd>.

image

Se convertiría en:

image

Una alternativa sería añadir automáticamente márgenes a izquierda y/o derecha al emoji si no es el primer o último elemento.

En el estado actual:

image

image

Con este CSS añadido:

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

image

image

¿Serían aceptables estos márgenes forzados? Es más bonito y aumenta la legibilidad, pero será imposible para el usuario no tener un margen entre el emoji y algún texto (en mi caso, estaría contento ya que veo el margen forzado como un beneficio).

2 Me gusta
4

No estoy seguro de esto, veamos qué piensan los @Designers. Idealmente, podemos simplemente enseñar a inline-flex a ser más… flexible.

3 Me gusta
6

Creo que podemos usar la propiedad gap para esto. El problema es que cambiar kbd para usar flexbox eliminó cualquier espacio natural entre los elementos internos:

kbd {
  gap: 0.5em;
}

produce:

Screenshot 2022-12-08 at 1.06.10 PM

Esto agregaría espacio entre cualquier elemento HTML dentro de la etiqueta KBD, y no requeriría ninguna excepción para first/last-child.

3 Me gusta
8

Acabo de fusionar esto:

4 Me gusta
9

¡Genial, gracias! :+1:

Por cierto, no conocía la propiedad gap, siempre es bueno aprender algo.

3 Me gusta