[Resolved] change high level comma globally on the site
This thread is resolved. Here is a description of the problem and solution.
Problem: If you're experiencing issues with extra spacing around apostrophes when using the 'Noto Sans SC' font, this is due to the font treating certain punctuation characters as CJK punctuation, which follows different spacing rules used in East Asian typography. Solution: To address this, we recommend adding the following CSS rule to your theme's CSS or Customizer → Additional CSS:
/* Remove extra spacing around quotes/apostrophes for Noto Sans SC */<br />body {<br /> font-feature-settings: "halt" 1, "palt" 1;<br />}
This CSS uses OpenType font features to adjust the spacing behavior specifically for punctuation, which should resolve the issue while keeping your preferred font.
If this solution does not apply to your case, or if it seems outdated, we highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If further assistance is needed, please open a new support ticket at WPML support forum.
This is the technical support forum for WPML - the multilingual WordPress plugin.
Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.
If WPML and its add-ons are not up to date on your site, please update them to the latest versions and check if the problem persists.
Otherwise, our Advanced Translation Editor experts need to investigate the problem you reported. Therefore, if you need further help with this, please share the access details to your site with me. I'm enabling a private message for the following reply. Privacy and Security Policy
We have strict policies regarding privacy and access to your information. Please see: https://wpml.org/purchase/support-policy/privacy-and-security-when-providing-debug-information-for-support/ **IMPORTANT**
- - Please back up the site files and database before providing us access. --
-- If you have a staging site where the problem can be reproduced, it is better to share access to the staging site.--
I'm Prosenjit from the WPML Development team, and I'll be happy to help you resolve this issue.
Thank you for sharing the link to the problematic page. I've investigated and can see the extra space appearing right after the curly single quote symbol ('). After digging deeper, I found that your site is using "Noto Sans SC" as the default font family, and this is what's causing the spacing issue.
There's a known behavior with CJK fonts (Chinese, Japanese, and Korean), particularly:
- Noto Sans SC (Simplified Chinese)
- Noto Sans TC
- PingFang SC
- Source Han Sans
These fonts treat certain punctuation characters, such as U+2019 ('), U+2032 (′), and other "curly" or "prime-like" characters, as CJK punctuation, which follows different spacing rules used in East Asian typography.
CJK typography applies:
- Ideographic spacing rules
- Different kerning behavior
- Proportional width vs. full-width glyph behavior
Because you're using Noto Sans SC, WordPress renders curly apostrophes using the CJK glyph, which has built-in spacing as part of the font's design. So the "extra space" is actually part of the font's glyph metrics, it's not caused by CSS or WPML.
This is why:
"doesn't" displays correctly with normal Latin fonts
"doesn't" becomes "doesn ' t" with Noto Sans SC
I tested this locally without WPML active, and the result is exactly the same, confirming it's a font behavior issue. You can see the test in this video: hidden link
To fix this, one option would be to switch to a Latin variant of Noto Sans, but I understand that Noto Sans SC has formatting that looks great on your site. If you'd like to keep using Noto Sans SC while removing the extra space after apostrophes, you can add this simple CSS rule:
Add this to your theme's CSS or Customizer → Additional CSS:
css/* Remove extra spacing around quotes/apostrophes for Noto Sans SC */
body {
font-feature-settings: "halt" 1, "palt" 1;
}
This CSS uses OpenType font features to adjust the spacing behavior specifically for punctuation, which should resolve the issue while keeping your preferred font.
I hope this explanation helps clarify what's happening and that the CSS solution works well for you. If you have any questions or need further assistance implementing this, please don't hesitate to reach out. I'm here to help!
