[css-text] Glyph substitution

[romainmenke]

Recently ran into several similar issues:

• A project where the branding/client liked the visual appearance of Æ, when the actual text content should have been ae.
• A project where a single character from the brand name was omitted and a space was rendered : f o, when the actual text content should have been foo.

When solving this with actual character replacements we are creating problems for accessibility, SEO, how text breaks and wraps,...

Content editors also find it hard to consistently apply the "special" notation.

The alternative is to solve this in font files with glyph substitutions. This works really well and avoids all the issues mentioned above.

But adding custom substitutions is technically complex and not always feasible depending on the font file formats. (or impossible with hosted fonts, like google fonts) It is not something that can be easily and quickly done by a frontend/css developer.

---

This made me wonder if this could be solved with CSS?

• Is this something that is useful for more people than just me?
• Is this implementable?

---

Syntax might require an at rule to be able to set and reuse multiple properties. I imagine this also makes it possible to optimize things in implementations when these substitutions are globally defined.

@glyph-substitution Æ_as_ligature_for_a_e {
  type: ligature;
  substitute: a e;
  by: Æ;
}

@font-face {
  font-family: 'Some Font';
  /* regular descriptors for some font face */

  glyph-substitution: Æ_as_ligature_for_a_e;
}

.foo {
  font-family: 'Some Font';
}

every name/keyword is made up, I haven't done enough reading on this to suggest meaningful naming here

---

• more on gsub

[Crissov]

Maybe @text-transform would be the right solution. #3132

[romainmenke]

@Crissov Thank you for this link! I searched through existing issues, but I was focussed to much on glyph and didn't check text-transform.

---

The API seems about right and the same as required for glyph substitution. But these are two different things.

The @text-transform proposal would replace characters. Which would affect how the result is exposed in the Accessibility tree, copy/paste, ...

This issue is about glyph substitutions only.

[fantasai]

There was an earlier proposal for a property called text-replace, see https://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#character You can search for discussion about it on www-style. IIRC there were a bunch of problems with it...

[romainmenke]

There was an earlier proposal for a property called text-replace, see https://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#character You can search for discussion about it on www-style. IIRC there were a bunch of problems with it...

The problems with the older proposal for text-replace seem focussed on the syntax and that is was replacing text, not glyphs.

Minutes from the link above : https://lists.w3.org/Archives/Public/www-style/2008Sep/0074.html

---

Glyph substitution is a different feature than text replacement.

Text replacement can be done by changing the text or with JavaScript. Adding it to CSS would add one more way to do that but that is not what I am proposing here.

Glyph substitution is only possible in font files at this moment. Adding it to CSS would make the feature more accessible to more developers.

I've created a small demo to illustrate text/character transforms vs. glyph substitutions.

https://romainmenke.github.io/glyph-substitution-demo/text-transform-vs-glyp-substitution/

in this example I am using a simple ligature substitution

there might be other cases/examples that illustrate the differences and happy to add any to the demo

---

I've also updated the made up syntax at the top. I think it makes more sense if @glyph-substitution is something that has an effect on @font-face and not directly on elements.

[Alohci]

FWIW, I've wished on a number of occasions that glyph substitution was a thing. And yes, definitely glyph substitution, not character substitution.

[astearns]

I am in favor of adding glyph substitution to CSS, and I agree that it adding it to @font-face is likely the way to go, since particular substitutions are always font-specific.

[Crissov]

I’ve done this for a thesis in LaTeX a couple of years ago and was really glad it was possible there. It is a pretty niche use case though.

Would you expect this to work with glyph names, which can differ quite a bit despite harmonization efforts like AGL?

[romainmenke]

Another example :

Some fonts have alternate numerals, I don't think it's possible today to have dynamic content, either from a CMS or from backend data and have numbers take on the appearance of these alternate numerals.

items 0 items ⓪

item 1 item ❶

With glyph substitution this would be trivial.