From 565e5c9bc7a4ca265fd5eb985fd9a89a7696a393 Mon Sep 17 00:00:00 2001 From: Fuqiao Xue Date: Thu, 24 Jul 2025 20:15:43 +0800 Subject: [PATCH] Add the space between `bdi` and `code` back To reduce confusion. Also reduce the inline padding. See https://github.com/w3c/guide/pull/342#discussion_r2216552608 --- index.html | 12 ++++++------ local.css | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index edaf9a7..28e1a4c 100644 --- a/index.html +++ b/index.html @@ -2683,17 +2683,17 @@

Referring to Unicode characters

For most characters, the template looks like this:

-<span class="codepoint" translate="no"><bdi lang="??">&#xXXXX;</bdi><code class="uname">U+XXXX UNICODE_CHARACTER_NAME_ALL_IN_CAPS</code></span> +<span class="codepoint" translate="no"><bdi lang="??">&#xXXXX;</bdi> <code class="uname">U+XXXX UNICODE_CHARACTER_NAME_ALL_IN_CAPS</code></span>

The bdi element is used to ensure that example characters that are right-to-left do not interfere with the layout of the page. Do not include line breaks or a space between the closing bdi and the following code element; spacing and presentation is controlled by styling.

@@ -2719,15 +2719,15 @@

Referring to Unicode characters

Short sequences of characters should list the character names, separated by +.

-

There are cases where including the character name and additional markup is overly pedantic and detracts from usability, but be cautious about being so informal as to impair meaning. In particular, long sequences will sometimes just list the code points, although the character names should be retained where possible for clarity. An example can be found in this document in the discussion of the composed "family" emoji: ๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘งU+1F468 U+200D U+1F469 U+200D U+1F467 U+200D U+1F467

+

There are cases where including the character name and additional markup is overly pedantic and detracts from usability, but be cautious about being so informal as to impair meaning. In particular, long sequences will sometimes just list the code points, although the character names should be retained where possible for clarity. An example can be found in this document in the discussion of the composed "family" emoji: ๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ง U+1F468 U+200D U+1F469 U+200D U+1F467 U+200D U+1F467

diff --git a/local.css b/local.css index 45994ba..4ef77a7 100644 --- a/local.css +++ b/local.css @@ -9,7 +9,7 @@ .codepoint bdi { line-height: 1em; font-size: 1.25em; - padding-inline: 0.25em; + padding-inline: 0.1em; } .codepoint img {