Kann keinen Leerschritt neben einem Emoji innerhalb von kbd kbd kbd Tags einfügen

UX
1

\u003ckbd\u003e:blue_square: beliebiger Text\u003c/kbd\u003e

Wird dasselbe gerendert wie:

\u003ckbd\u003e:blue_square:beliebiger Text\u003c/kbd\u003e

\u003ckbd\u003e:blue_square: beliebiger Text\u003c/kbd\u003e

Es gibt keinen sichtbaren Abstand zwischen dem Emoji und dem Text, obwohl der Abstand im HTML-Code vorhanden ist.

Ist das eine Einschränkung des \u003ckbd\u003e-Tags? Gibt es eine elegante Möglichkeit, dies zu beheben, oder sollten wir uns auf Hacks wie \u0026nbsp; oder ㅤ usw. verlassen?

\u003ckbd\u003e:blue_square:\u0026nbsp;beliebiger Text\u003c/kbd\u003e

\u003ckbd\u003e:blue_square:\u0026nbsp;beliebiger Text\u003c/kbd\u003e

\u003ckbd\u003e:blue_square:ㅤbeliebiger Text\u003c/kbd\u003e

\u003ckbd\u003e:blue_square:ㅤbeliebiger Text\u003c/kbd\u003e

2

Es ist wahrscheinlich display: inline-flex;, das auf KBD-Tags angewendet wird und die Elemente näher zusammenzwingt.

Es gibt vielleicht eine CSS-Umgehungslösung, bin mir aber nicht sicher.

1 „Gefällt mir“
3

Eine Lösung wäre, einige Werte für die white-space-Eigenschaft hinzuzufügen, wie z. B. pre-wrap, aber dies würde Probleme verursachen, wenn wir weitere mehrzeilige Zeilenumbrüche innerhalb von \u003ckbd\u003e hätten.

image

Würde werden:

image

Eine Alternative wäre, dem Emoji automatisch links und/oder rechts einen Rand hinzuzufügen, wenn es nicht das erste oder letzte Element ist.

Im aktuellen Zustand:

image

image

Mit diesem hinzugefügten CSS:

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

image

image

Wären diese erzwungenen Ränder akzeptabel? Es ist schöner und erhöht die Lesbarkeit, aber es wird für den Benutzer unmöglich sein, keinen Rand zwischen dem Emoji und etwas Text zu haben (ich persönlich wäre glücklich, da ich den erzwungenen Rand als Vorteil sehe).

2 „Gefällt mir“
4

Ich bin mir da nicht sicher, mal sehen, was @Designers dazu meint. Idealerweise können wir inline-flex einfach beibringen, … flexibler zu sein.

3 „Gefällt mir“
6

Ich denke, wir könnten die gap-Eigenschaft dafür verwenden? Das Problem ist, dass das Ändern von kbd zur Verwendung von Flexbox jeglichen natürlichen Abstand zwischen den Elementen entfernt hat:\n\ncss\nkbd {\n gap: 0.5em;\n}\n\n\nproduziert:\n\nScreenshot 2022-12-08 at 1.06.10 PM\n\nDies würde Abstand zwischen allen HTML-Elementen innerhalb des KBD-Tags hinzufügen und keine Ausnahmen für das erste/letzte Kind erfordern.

3 „Gefällt mir“
8

Ich habe das gerade zusammengeführt:

4 „Gefällt mir“
9

Super, danke! :+1:

Ich kannte übrigens die gap-Eigenschaft nicht, es ist immer gut, etwas Neues zu lernen.

3 „Gefällt mir“