w3c / w3c/csswg-drafts

[meta][website] Tofu/weird glyphs on CSS WG website Current Work page

Open
#4,668 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

meta
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

The “Current Work” page for CSS WG on w3.org uses Unicode characters (in the last column of the Table of Specifications) that are showing up poorly in multiple browsers.

The characters (ℹ⃝) are a heavy bold i followed by an enclosing circle, to create an info icon. But in Chrome, they're showing as tofu (unmatched glyphs) for both myself (on Win 10) and @argyleink (Mac, I think) because of no match in the default sans-serif font. On Firefox for me, it's showing up as an i followed by a circle that doesn't enclose it, because they're matching glyphs from different system fonts.

Chrome screenshot
Firefox screenshot

Now, as CSS nerds, we can say this is a problem with the browsers not properly finding fallback glyphs or not properly shaping them…

But as website owners, the important issue is that the content is broken & visitors to the website will have no idea that this is a link to further information about each spec — unless they hover or use an assistive technology that exposes the link title text (which are of the form “Summary of Spec Title”).

Possible solutions:

  • replace the glyphs with an image or inline SVG icon or an ℹ information emoji
  • replace them with “More…”, “About…” or similar short text

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Open the CSS WG “Current Work” page linked in the issue and inspect the last column of the Table of Specifications, where the ℹ⃝ characters are rendered. Replace the broken info glyph with one of the issue’s proposed alternatives, then verify that the link remains understandable across browsers and for assistive technology.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
documentation
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.