Impossibile inserire uno spazio accanto a un emoji all'interno dei tag <kbd>

UX
1

<code><kbd>:blue_square: any text</kbd></code>

Renderizzerà allo stesso modo di:

<code><kbd>:blue_square:any text</kbd></code>

:blue_square: any text

Non c’è spazio visibile tra l’emoji e il testo, sebbene lo spazio sia presente nel codice HTML.

È una limitazione del tag <code><kbd></code>? Esiste un modo elegante per risolverlo o dovremmo affidarci a soluzioni “hacky” come <code>&nbsp;</code> o <code>ㅤ</code> ecc.?

<code><kbd>:blue_square:&nbsp;any text</kbd></code>

:blue_square: any text

<code><kbd>:blue_square:ㅤany text</kbd></code>

:blue_square:ㅤany text

2

È probabilmente display: inline-flex; che viene applicato ai tag KBD, forzando gli elementi ad avvicinarsi.

Potrebbe esserci una soluzione CSS qui, non sono sicuro.

1 Mi Piace
3

Una soluzione è aggiungere alcuni valori per la proprietà white-space, come pre-wrap, ma causerà problemi se abbiamo più interruzioni di riga all’interno di <kbd>.

image

Diventerebbe:

image

Un’alternativa sarebbe aggiungere automaticamente margini sinistro e/o destro all’emoji se non è il primo o l’ultimo elemento.

Nello stato attuale:

image

image

Con questo CSS aggiunto:

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

image

image

Questi margini forzati sarebbero accettabili? È più carino e aumenta la leggibilità, ma sarà impossibile per l’utente non avere un margine tra l’emoji e del testo (per quanto mi riguarda, sarei felice dato che vedo il margine forzato come un vantaggio).

2 Mi Piace
4

Non sono sicuro, vediamo cosa ne pensano i @Designers. Idealmente potremmo semplicemente insegnare a inline-flex ad essere più… flessibile.

3 Mi Piace
6

Penso che possiamo usare la proprietà gap per questo? il problema è che cambiare kbd per usare flexbox ha rimosso qualsiasi spazio naturale tra gli elementi interni:

kbd {
  gap: 0.5em;
}

produce:

Screenshot 2022-12-08 at 1.06.10 PM

Questo aggiungerebbe spazio tra qualsiasi elemento HTML all’interno del tag KBD e non richiederebbe alcuna eccezione per first/last-child.

3 Mi Piace
8

Ho appena unito questo:

4 Mi Piace
9

Fantastico, grazie! :+1:

Tra l’altro non conoscevo la proprietà gap, è sempre utile imparare qualcosa di nuovo.

3 Mi Piace