<kbd>タグ内で絵文字の隣にスペースを挿入できません

UX
1

\u003ckbd\u003e:blue_square: any text\u003c/kbd\u003e

は、次と同じように表示されます。

\u003ckbd\u003e:blue_square:any text\u003c/kbd\u003e

\u003ckbd\u003e:blue_square: any text\u003c/kbd\u003e

絵文字とテキストの間には、HTMLコードにスペースが存在するにもかかわらず、目に見えるスペースはありません。

これは\u003ckbd\u003eタグの制限ですか？ \u0026nbsp; や ㅤ などのハッキーなものに頼るか、それを修正するエレガントな方法がありますか？

\u003ckbd\u003e:blue_square:\u0026nbsp;any text\u003c/kbd\u003e

\u003ckbd\u003e:blue_square:\u0026nbsp;any text\u003c/kbd\u003e

\u003ckbd\u003e:blue_square:ㅤany text\u003c/kbd\u003e

\u003ckbd\u003e:blue_square:ㅤany text\u003c/kbd\u003e

2

おそらく、KBDタグに適用されているdisplay: inline-flex;が原因で、要素がより近接していると思われます。

CSSの回避策があるかもしれませんが、確信はありません。

「いいね！」 1
3

white-space プロパティに pre-wrap のような値を追加する解決策もありますが、<kbd> 内に複数の改行がある場合は問題が発生します。

image

次のようになります。

image

別の方法として、絵文字が最初または最後の要素でない場合に、絵文字に自動的に左右の余白を追加することが考えられます。

現在の状態：

image

image

この CSS を追加した場合：

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

image

image

これらの強制的な余白は許容されますか？ 見た目が良くなり、読みやすさも向上しますが、ユーザーが絵文字とテキストの間に余白を持たないことは不可能になります（私としては、強制的な余白を利点と見なすため、喜んで受け入れます）。

「いいね！」 2
4

これについてはよくわかりません。@Designers の意見を見てみましょう。理想的には、inline-flex をもっと…柔軟に教えることができます。

「いいね！」 3
6

これには gap プロパティを使用できると思いますが、問題は kbd を flexbox に変更したことで、要素間の自然なスペースがすべて削除されてしまったことです。

kbd {
  gap: 0.5em;
}

次のような結果になります。

Screenshot 2022-12-08 at 1.06.10 PM

これにより、KBD タグ内の任意の HTML 要素間にスペースが追加され、first/last-child の例外は必要なくなります。

「いいね！」 3
8

これをマージしました。

「いいね！」 4
9

素晴らしい、ありがとうございます！:+1:

ちなみに、gapプロパティについては知りませんでした。常に何かを学ぶのは良いことです。

「いいね！」 3