Skip to content
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

Jump to bottom

Add .uname and .codepoint to style characters inline #323

Merged
merged 29 commits into from
Sep 13, 2023
Merged

Add .uname and .codepoint to style characters inline #323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
58513ab
Add `.uname` and `.codepoint` to style characters inline
aphillips Mar 28, 2023
f878706
Address @r12a's comment.
aphillips Mar 29, 2023
12dfbe6
Fix .uname to use font-variant
aphillips Mar 30, 2023
c09aebd
Update the styles and readme
aphillips May 14, 2023
3fa4350
Changes to address comments
aphillips May 31, 2023
96f694d
Changes after 2023-06-01 I18N telecon
aphillips Jun 1, 2023
96768c1
Address @fantasai's comments
aphillips Jun 2, 2023
8c8e200
Add `.uname` and `.codepoint` to style characters inline
aphillips Mar 28, 2023
b7398dc
Address @r12a's comment.
aphillips Mar 29, 2023
1f8eb5d
Fix .uname to use font-variant
aphillips Mar 30, 2023
553fb49
Update the styles and readme
aphillips May 14, 2023
80bb7f6
Changes to address comments
aphillips May 31, 2023
634fccb
Changes after 2023-06-01 I18N telecon
aphillips Jun 1, 2023
ed13602
Address @fantasai's comments
aphillips Jun 2, 2023
6a46907
Clean up README for unicode codepoints section
fantasai Jun 16, 2023
814718f
Add background for codepoint rendering
fantasai Jun 16, 2023
230b94e
Update styles per I18N teleconference.
aphillips Jul 11, 2023
6e78a75
Fixing the line-breaks in the templates
aphillips Jul 21, 2023
d149e9e
Revision to match changes in INTERNATIONAL-SPECS
aphillips Jul 25, 2023
9a1eb92
Resolve issues and address @r12a's comments
aphillips Jul 27, 2023
796b4ea
Add info about adjusting the style for a given language.
aphillips Jul 27, 2023
fbff75a
Address @r12a's comment.
aphillips Jul 31, 2023
eff33b6
Fix one instance of `span` needing to be `code`
aphillips Aug 10, 2023
9141330
Fix indentation.
aphillips Aug 21, 2023
ada41bc
Fix line-breaking for first paragraph of unicode-codepoints section.
aphillips Aug 21, 2023
b2985e7
Ensure I18N styles use tab rather than space indents
aphillips Aug 21, 2023
5180f2e
Add space between `bdi` and `code`
aphillips Aug 30, 2023
6611bbc
Fix examples to have spaces
aphillips Aug 30, 2023
163a0be
Unicode codepoint: README clean-up and drop img support
fantasai Sep 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
114 changes: 104 additions & 10 deletions src/README.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!doctype html><html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sample W3C Specification</title>
<link rel="stylesheet" href="W3C-WD.css">
Expand Down Expand Up @@ -138,7 +138,7 @@ <h2>Table of Contents</h2>
Change Marks</a>
<li><a href="#inline"><span class="secno">2.4.2</span>
Recommended Inline Markup</a>
<li><a href="#unicode-codepoints"><span class="secno">2.4.2</span>
<li><a href="#unicode-codepoints"><span class="secno">2.4.3</span>
Unicode Codepoint Template</a></li>
</ol>
<li><a href="#misc"><span class="secno">2.5</span>
Expand Down Expand Up @@ -926,12 +926,106 @@ <h4 id="inline">
A future revision of the site-wide styles may incorporate some of the more
common distinctions.

<h4 id="unicode-codepoints">
<span class="secno">2.4.3</span> Unicode Codepoint Templates</h4>

<p>The stylesheet includes support for the character template
used in Internationalization specifications;
see <a href="https://www.w3.org/International/i18n-activity/guidelines/editing#codepoints">I18N Editing Guidelines</a>
and <a href="https://www.w3.org/TR/international-specs#char_ref_template"><cite>Best Practices for International Specifications</cite></a>

<h5 id="unicode-codepoint-simple">
<span class="secno">2.4.3.1</span> Single Codepoint Template</h5>

<p>For visible characters, the single-codepoint template looks like this:

<pre>
<!-- -->&lt;span class="codepoint" translate="no">&lt;bdi lang="??">&#x<var>XXXX</var>;&lt;/bdi>
<!-- -->&lt;code class="uname">U+<var>XXXX</var> <var>UNICODE NAME IN ALL CAPS</var>&lt;/code>&lt;/span>
</pre>

<p>For invisible characters (such as control characters) or for whitespace,
the character and its surrounding <code>bdi</code> element
should be omitted:

<pre>
<!-- -->&lt;span class="codepoint" translate="no">
<!-- -->&lt;code class="uname">U+<var>XXXX</var> <var>UNICODE NAME IN ALL CAPS</var>&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">&#x<strong>00E9</strong>;&lt;/bdi>&lt;code class="uname">U+<strong>00E9</strong> <strong>LATIN SMALL LETTER E WITH ACUTE</strong>&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>.
</aside>

<p>The <code>lang</code> attribute on <code>bdi</code>
should be filled in appropriately
to get the correct font selection 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.
For certain languages,
it may be necessary to style the <code>bdi</code> element
with a <code>font-family</code> and <code>font-size</code>
in the spec’s local style sheet.

<p class="note"><span class="marker">Note:</span>
The <code>bdi</code> element is used
to ensure that example characters that are right-to-left
do not interfere with the layout of the page.

<p class="note"><span class="marker">Note:</span>
Although the elements of this template
are shown on separate lines in this section (for readability),
you can put the entire sequence on one line
with just a regular space (U+0020) between
the closing <code>bdi</code>
and the opening <code>code</code> tag.

<h5 id="unicode-codepoint-sequence">
<span class="secno">2.4.3.1</span> Multiple Codepoint Template</h5>

<p>Short sequences of characters should list the character names,
separated by unstyled <code>+</code> signs.

<aside class="example" title="Example of a code point sequence">
<p>This example:
<span class="codepoint" translate="no"><bdi lang="hi">&#x0928;&#x093f;</bdi>
<code class="uname">U+0928 DEVANAGARI LETTER NA</code>
+
<code class="uname">U+093F DEVANAGARI VOWEL SIGN I</code></span>
uses the following markup:

<pre>
<!-- -->&lt;span class="codepoint" translate="no">
<!-- --> &lt;bdi lang="hi">&amp;#x0928;&amp;#x093f;&lt;/bdi>
<!-- --> &lt;code class="uname">U+0928 DEVANAGARI LETTER NA&lt;/code> +
<!-- --> &lt;code class="uname">U+093F DEVANAGARI VOWEL SIGN I&lt;/cdode>
<!-- -->&lt;/span>
</pre>
</aside>

<p>For long sequences, it is okay to just list the code points
without the character names,
although the character names should be retained where possible for clarity.
An example can be found in the discussion of the composed “family” emoji
(<span class="codepoint"><bdi lang="en">👨‍👩‍👧‍👧</bdi><code class="uname">U+1F468 U+200D U+1F469 U+200D U+1F467 U+200D U+1F467</code></span>)
in <a href="https://www.w3.org/TR/international-specs#char_term_def"><cite>Best Practices for International Specifications</cite></a>.

<h3 id="misc">
<span class="secno">2.4</span>
<span class="secno">2.5</span>
Miscellaneous</h3>

<h4 id="overlarge">
<span class="secno">2.4.1</span>
<span class="secno">2.5.1</span>
Overlarge Elements</h4>

<p>The style sheet currently imposes for readability a maximum measure of 50em.
Expand Down Expand Up @@ -1285,15 +1379,15 @@ <h4 id="justify-symbols"><span class="secno">3.4.2 </span> Handling Symbols and
Therefore, the UA may reassign specific characters
or introduce additional levels of prioritization
to handle <a href="#justification-opportunity">justification opportunities</a> involving symbols and punctuation. </p>
<p class="example" id="example-d012ef7c"> For example, there are traditionally no <a href="#justification-opportunity">justification opportunities</a> between consecutive
U+2014 Em Dash ‘—’,
U+2015 Horizontal Bar ‘―’,
U+2026 Horizontal Ellipsis ‘…’,
or U+2025 Two Dot Leader ‘‥’
<p class="example" id="example-d012ef7c"> For example, there are traditionally no <a href="#justification-opportunity">justification opportunities</a> between consecutive
<span class="codepoint" translate="no"><bdi lang="en">&#x2014;</bdi><code class="uname">U+2014 EM DASH</code></span>
<span class="codepoint" translate="no"><bdi lang="en">&#x2015;</bdi><code class="uname">U+2015 HORIZONTAL BAR</code></span>
<span class="codepoint" translate="no"><bdi lang="en">&#x2026;</bdi><code class="uname">U+2026 HORIZONTAL ELLIPSIS</code></span>
or <span class="codepoint" translate="no"><bdi lang="en">&#x2025;</bdi><code class="uname">U+2025 TWO DOT LEADER</code></span>
characters <a href="#biblio-jlreq">[JLREQ]</a>;
thus a UA might assign these characters to a “never” prioritization level.
As another example, certain fullwidth punctuation characters
(such as U+301A Left White Square Bracket ‘〚’)
(such as <span class="codepoint" translate="no"><bdi lang="ja">&#x301A;</bdi><code class="uname">U+301A LEFT WHITE SQUARE BRACKET</code></span>)
are considered to contain a <a href="#justification-opportunity">justification opportunity</a> in Japanese.
The UA might therefore assign these characters to a higher prioritization
level than the opportunities between ideographic characters. </p>
Expand Down
17 changes: 17 additions & 0 deletions src/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,8 @@
* It's better to design things to fit into a narrower measure if possible.
*
* - js-added ToC jump links (see fixup.js)
*
* - .uname and .codepoint for character names and examples
*
******************************************************************************/

Expand Down Expand Up @@ -1362,6 +1364,21 @@ Possible extra rowspan handling
font-weight: bold;
}

/** Unicode characters and character sequences *******************************/

.codepoint bdi {
line-height: 1em;
font-size: 1.25em;
padding-inline: 0.25em;
}

.uname {
font-family: Arial, monospace;
font-size: 0.75em;
letter-spacing: 0.03em;
color: brown;
}

/** Outdated warning **********************************************************/

.outdated-spec {
aphillips marked this conversation as resolved.
Show resolved Hide resolved
Expand Down