Is there a css selector for punctuation or character?

Question

Given the element :

<span>一、對話 Dialogues</span>

One of my font is really unelegant on that side, adding an overly wide space :

Is there a css rule to style only the punctuation 、 ?

NB: I searched the web and found nothing. Currently assume only HTML elements can receive styles. So I have to use JS to get the string, then str.replace('、','<span class="punt">、</span>'), then put back the string with the dedicated html element and class. But I would like to ask the community and create this question, even if dumb, so other users may find this question/answer in the future.

You're right. You need to wrap the punctuation (or, more generally, anonymous inline element) in an HTML element, so that it has "hooks" that the CSS can latch onto. — Michael Benjamin, Mar 16 '21 at 01:21

Hugolpz · Answer 1 · 2021-04-06T20:30:27.973

You could use @Font-face and Unicode range to style your punctuation with an other font.

First, identify your characters' code :

var charcode = '、'.codePointAt(0).toString(16); // "3001"
alert(charcode) // "3001"

Then, load your default font and your support font with unicode range

/* For general characters  *********************************** */
@font-face {
  font-family: 'MyFont';
  font-style: normal;
  font-weight: 400;
  src: local('Font1onPC'),       /* tries to load local font file */
       url('https://fonts.gstatic.com/font.woff2') format('woff2'),
       url('https://fonts.gstatic.com/font.woff') format('woff');
}
/* For special characters  ********************************** */
@font-face {
  font-family: 'MyFont';     /* IMPORTANT: same name*/
  src: local('Font2onPC'),       /* tries to load local font file */
       url('https://fonts.gstatic.com/anotherFont.woff2') format('woff2'),
       url('https://fonts.gstatic.com/anotherFont.woff') format('woff');
  unicode-range: U+3001;     /* IMPORTANT */
}

Should work.

Source : https://jakearchibald.com/2017/combining-fonts/

Alternatively, you could edit that font on this character.

I documented above, but it didn't work for me on Chrome 89. – Hugolpz Apr 06 '21 at 20:29 — Hugolpz, Apr 06 '21 at 20:29

Is there a css selector for punctuation or character?

1 Answers1