Skip to content

Sync character naming template from i18n specdev #342

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Sync character naming template from i18n specdev #342

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions manual-of-style/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,19 +210,19 @@ <h5>Character naming template</h5>
<p>Internationalization specifications use (and we recommend the use of) this template for character references:</p>

<pre>
&lt;span class="codepoint" translate="no">&lt;bdi lang="??">&#xXXXX;&lt;/bdi>
[&lt;code class="uname">U+XXXX Unicode_character_name&lt;/code>]&lt;/span>
&lt;span class="codepoint" translate="no">&lt;bdi lang="??">&#xXXXX;&lt;/bdi>
&lt;code class="uname">U+XXXX Unicode_character_name&lt;/code>&lt;/span>
</pre>

<aside class="example" title="Example of a character reference">
<p>Filling in the above template like this:</p>

<pre>
&lt;span class="codepoint" translate="no">&lt;bdi lang="fr">&#x00E9;&lt;/bdi>
[&lt;code class="uname">U+00E9 LATIN SMALL LETTER E WITH ACUTE&lt;/code>]&lt;/span>
&lt;span class="codepoint" translate="no">&lt;bdi lang="fr">&#x00E9;&lt;/bdi>
&lt;code class="uname">U+00E9 LATIN SMALL LETTER E WITH ACUTE&lt;/code>&lt;/span>
</pre>

<p>Produces output in the page like this: <span class="codepoint" translate="no"><bdi lang="fr">é</bdi> [<code class="uname">U+00E9 LATIN SMALL LETTER E WITH ACUTE</code>]</span>.</p>
<p>Produces output in the page like this: <span class="codepoint" translate="no"><bdi lang="fr">é</bdi><code class="uname">U+00E9 LATIN SMALL LETTER E WITH ACUTE</code></span>.</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There should be at least a space character between the unicode character and its name. This would happen with a copy-paste of the code above because there's a CR (or LF, or CRLF) between, which HTML renderers will fold into a space character. If you want the sample code to be exactly the same as that which is used to "produce output in the page", just change my space to a CR/LF/CRLF.

Suggested change
<p>Produces output in the page like this: <span class="codepoint" translate="no"><bdi lang="fr">é</bdi><code class="uname">U+00E9 LATIN SMALL LETTER E WITH ACUTE</code></span>.</p>
<p>Produces output in the page like this: <span class="codepoint" translate="no"><bdi lang="fr">é</bdi> <code class="uname">U+00E9 LATIN SMALL LETTER E WITH ACUTE</code></span>.</p>

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We decided not to add that space, and use a padding instead. See:

Copy link
Member

@TallTed TallTed Jul 23, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ugh. As noted in that VERY LONG discussion, removing this space character is VERY counterintuitive. It's really unfortunate that there appears to be no clever way of treating an inline space character as if it weren't there for the CSS spacing. I do note that the template appears to have a line break following the </bdi> which gets folded into a space char which then increases the spacing due to the CSS. I won't fight it, but yeesh!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's an LF in the <pre> block because we want the code to be clear, rather than having an extra long line. And there's no LF (or space) in the rendered result below.

</aside>

<p>Some notes about the markup used. The <code translate=no>bdi</code> element is used to ensure that example characters that are [=right-to-left=] do not interfere with the layout of the page. The <code translate=no>lang</code> attribute should be filled in with the most appropriate [[BCP47]] [=language tag=] to get the correct font selection (and other processing) for a given context. Examples in East Asian languages (such as Chinese, Japanese, or Korean) or in the Arabic script can sometimes require greater care in choosing a language tag.</p>
Expand Down