w3c / tr-design

CSS used by W3C specs (this repo is not about the w3.org/TR index page)
https://w3c.github.io/tr-design/src/README
Other
64 stars 29 forks source link

current "Single Codepoint Template" is incorrect and produces poor rendering #347

Open TallTed opened 10 months ago

TallTed commented 10 months ago

I've come here because some advice given here is incorrect, and it led to some problematic markup and rendering in recent drafts and PRs on vc-di-bbs, especially PR#15.

An example of what I consider better markup (though it does not yet fully conform with my suggestion below, which I've based on your existing advice) and rendering is currently seen in the last paragraph of Appendix C. Security Considerations in the latest ED of Turtle 1.2

Here is the markup from your Example 4 (which is regrettably not directly linkable):

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

Example 4 (and the current template) treats the rendered glyph (e.g., é, &#x00E9; in markup) as the "codepoint", but that's not correct. The code point is little more than U+ and the hex address (e.g., U+00E9).

Example 4 (and the current template) treats a combination of the code point and the character name (e.g., U+00E9 LATIN SMALL LETTER E WITH ACUTE) as the "uname", but that's not correct. The character name (e.g., LATIN SMALL LETTER E WITH ACUTE) does not include the code point (e.g., U+00E9).

Also, the glyph will often not be rendered clearly in the bold face of the typically proportional "body" font (e.g., é), though it usually will be rendered clearly in the bold face of the typically monospaced "code" font (e.g., é).

I therefore suggest and request that the template be revised such that it produces the following example (note that there is no reason for bdi to specify French, as the example character is also used in English, and both languages are ltr ... so it could be kept as fr but I think that likely to be more confusing than not, since everything else in the vicinity is English) —

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

That renders (here, without the full W3 CSS, so the colors are missing, among other possibly unexpected visual aspects) as —

é

U+00E9 LATIN SMALL LETTER E WITH ACUTE

I'm happy to add screenshots if that would be helpful.