Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: .heti-adjacent-half style should not appear on Chrome #124

Open
MrAMS opened this issue Dec 19, 2024 · 11 comments
Open

Bug: .heti-adjacent-half style should not appear on Chrome #124

MrAMS opened this issue Dec 19, 2024 · 11 comments
Labels
bug Something isn't working

Comments

@MrAMS
Copy link

MrAMS commented Dec 19, 2024

The .heti-adjacent-half class style should not appear on Chrome(Version 131.0.6778.139) or you will get this result:

image

So my solution is to add @-moz-document url-prefix() and _::-webkit-full-page-media, _:future, :root .safari_only to apply .heti-adjacent-half CSS rules to Firefox-or-Safari only.

image

The reason why I do not use specific CSS rules to Chrome only is that it is better not to add this rule instead of adding it.

@MrAMS
Copy link
Author

MrAMS commented Dec 19, 2024

I have created a PR

@sivan
Copy link
Owner

sivan commented Dec 19, 2024

我刚用131.0.6778.205试了一下,并没有复现。请问有没有演示页面,或许跟字体有关?

@sivan sivan added the bug Something isn't working label Dec 19, 2024
@MrAMS
Copy link
Author

MrAMS commented Dec 19, 2024

的确有可能与字体有关,我使用了自定义的font-stack:

"JetBrains Mono", "Ubuntu Mono", "Times New Roman", "Noto Serif CJK SC", "Noto Serif CJK TC", "Noto Serif CJK HK", "Noto Serif CJK JP", "Noto Serif CJK KR", "Microsoft YaHei", "Heti Song", serif, $_font-stack-symbol !default`

你可以在这里,为.heti-adjacent-half添加margin-inline-end: -0.5em;样式以获得复现

@MrAMS
Copy link
Author

MrAMS commented Dec 19, 2024

目前排查发现bug与Noto CJK(思源宋体)有关
复现:
image
我做了一个小实验,在不同字体下观察<span style="font-size: 100px">。</span>的样式,类似这个帖子
这是Noto Serif CJK SC的结果
image
这是SimSun的结果
image
看来这个bug有可能是由于Chrome预先减少了思源宋体的空隙而造成的问题,我提议可以在我的解决方案前再加上一个CSS选择器特判思源宋体以处理这个问题,更好地支持思源(Noto CJK) 系列字体

@MrAMS
Copy link
Author

MrAMS commented Dec 19, 2024

在这个commit中,我按照上述思路进行了实现,并在Chrome上验证了bug修复效果,同时在演示网站上增加了“思源宋体按钮”

@sivan
Copy link
Owner

sivan commented Dec 20, 2024

了解,但是如果访客本身没有安装思源宋体,这样处理相当于去掉了本来该有的样式,然后使得fallback字体也受到影响了?

如果是这样,个人倾向暂不处理。如果能结合字体检测适时应用.heti--noto-sans对应的代码倒是可以完美解决,但似乎又有些细碎了(不同的字体可能都会造成类似情况、不同类型的负面影响)。

@MrAMS
Copy link
Author

MrAMS commented Dec 21, 2024

首先,确实为了适配更多的字体(例如思源宋体)可能需要更多的dirty work,heti是否要支持更多的字体(诸如思源宋体)还是取决于项目作者您。不过鉴于早在3年前就已有关于支持思源宋体的issue,而且思源宋体安装较为广泛,我认为还是存在一定的必要。

其次,我又注意到另外一个bug,heti(原始版本,非本fork版本)在一个没有安装Heti Hei但用户安装了思源宋体的系统上(如Ubuntu等Linux),选择heti--sans(即Heti Hei)时,Chrome会自动为这样的标点符号匹配为字体Noto Sans CJK JP,从而导致了与此issue类似的问题
image
换句话说,即便heti选择不提供思源宋体字体选项,在没有安装Heti Hei但安装了思源宋体的Chrome用户眼中,使用heti--sans也会严重影响排版效果。

然后,有关处理的方案,我十分赞同您的思路,确实应该根据实际选择的字体来应用我那样的处理方法,但是根据这篇帖子来看,似乎办不到根据实际字体渲染不同的样式。因此,我还是觉得我的处理办法相对更加妥当,理由如下:

  • 对于思源宋体(以及其他有可能出问题的字体),与其错误添加样式margin-inline-end: -0.5em(即暂不处理目前的heit),不如不添加,因为错误地添加margin-inline-end: -0.5em带来的结果是灾难性的,而不添加带来的结果则是难以察觉的轻微瑕疵
  • 开发者使用heti--noto-sansheti--noto-serif意味着开发者应该明白此样式在没有安装思源宋体用户上的表现效果,类似于,使用heti--sans样式意味着开发者应该明白此样式在没有安装Heti Hei用户上的表现效果,这是开发者的责任

另外,其实我认为可能还有另外一种解决办法的思路:Chrome特殊处理自家的思源宋体应该是有某种机制的,由于个人能力有限,不太了解等宽字体等等一系列字体概念,没有明白背后的真正原因,如果能定位到背后的真正原因,应该会有更加优雅,更加普遍的解决方案。

最后,再次感谢作者百忙之中的维护和审阅

@sivan
Copy link
Owner

sivan commented Dec 21, 2024

其次,我又注意到另外一个bug,heti(原始版本,非本fork版本)在一个没有安装Heti Hei但用户安装了思源宋体的系统上(如Ubuntu等Linux),选择heti--sans(即Heti Hei)时,Chrome会自动为这样的标点符号匹配为字体Noto Sans CJK JP,从而导致了与此issue类似的问题

看起来也是因为Heti Hei指定的系统字体族走到Noto Sans导致的。把Heti Hei里的Noto Sans也去掉,倒是能粗暴的避免。

晚些我再找时间测测思源字体的符号表现方式,如果是字体层面处理了标点挤压问题,就不用在heti里单独处理了。我再看看有没有更好的解决方式,能让各种系统都使用最好看的内置中文字体渲染。谢谢🙏

@sivan
Copy link
Owner

sivan commented Dec 21, 2024

@MrAMS 问题已经在最新的master中修复,Chrome在v123起增加了对CJK标点挤压的text-spacing-trim属性的支持,并且默认开启,因此影响了部分字体的渲染方式。解决方式是在heti-adjacent标签中还原了之前的渲染方式,通过heti实现标点挤压。

后续等该属性得到更广泛的支持且主流系统中文字体全部支持该属性所需的特性后,会移除相关代码实现。

@MrAMS
Copy link
Author

MrAMS commented Dec 21, 2024

无敌,很优雅的解决方案,请问需要我基于您现在master再提一个pr来支持思源宋体吗?您希望在演示页面显示思源宋体按钮吗?

@sivan
Copy link
Owner

sivan commented Dec 21, 2024

@MrAMS 可以微调一下现在的pr,不需要把思源单做一套配置选项,直接加到Heti Song里吗?跟lib/fonts/_hei.scssHeti Hei一样,这样演示页选择「宋体」时,在你的系统下应该直接就能看到思源宋的效果了。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants