喜欢在中英文间插入空格的博主都知道,WP有一款插件叫“空格爱好者”(Space Lover),由软件作者Tunghsiao Liu编写。整体代码简洁明了,以preg_replace与正则表达式来判断和添加中英文间的空格,达到悦目的效果。

当然插件也不是完美无缺,毕竟自动插入空格后会导致复制文本时带入额外空格,以及中英文间的空格过宽且无法单独自定义。

还有个偷懒办法是直接设置letter-spacing: 0.15rem,但所有文本都相应宽了。

改进方法:

  • 正则表达式将' '替换为'<span class="space"></span>'
  • CSS中设置.space {margin:0 0.1rem;}

代码举例:

$content = preg_replace('~(\p{Han})([a-zA-Z0-9\p{Ps}\p{Pi}])(?![^<]*>)~u', '\1'.'<span class="space"></span>'.'\2', $content);

效果:

WP默认,字间太局促
单独设置letter-spacing,但其它文本字间也宽了
激活插件后中英文间加宽,但带入额外空格,空格过宽且无法单独自定义
插件正则内空格修改为<span class="space">后去除了额外空格且可自定义宽度

注:<span>会出现在浏览器标签页中,有洁癖者慎加。

共有 26 条评论

  1. Jack

    上海

    好棒,居然还有这样的插件!强迫症狂喜

    一年前 Microsoft Edge 110 · iPhone iOS 16.3

    回复

    • S

      江苏

      @Jack 哈哈哈

      一年前 Microsoft Edge 110 · Mac OS X 10.15

      回复

  2. 木頭人

    广东

    已复制粘贴,感谢。

    一年前 Google Chrome 110 · Windows 10

    回复

    • S

      江苏

      @木頭人 不客气。

      一年前 Microsoft Edge 110 · Mac OS X 10.15

      回复

  3. 不亦乐乎

    福建

    我是习惯性在输入英文和数字的时候两边敲一下空格。

    一年前 Microsoft Edge 110 · Windows 10

    回复

    • S

      江苏

      @不亦乐乎 这是个好习惯,就是对懒人不适用

      一年前 Microsoft Edge 110 · Windows 10

      回复

  4. 网友小宋

    河南

    中文输入好像会有点间隙吧!英文没有

    一年前 Microsoft Edge 110 · Windows 10

    回复

    • S

      江苏

      @网友小宋 Windows下有一丢丢,Mac下没有。

      一年前 Microsoft Edge 110 · Windows 10

      回复

  5. 木瓜园

    江苏

    😄,我现在是手动加space

    一年前 Safari 13 · iPhone iOS 13.6

    回复

    • S

      江苏

      @木瓜园 手动就有点累,有违懒惰之宗旨。😄

      一年前 Microsoft Edge 110 · Windows 10

      回复

      • 木瓜园

        江苏

        @S 是的,手动麻烦。
        能否换个思路,发日志的时候处理,在写入系统之前替换,不用每次读取做替换,性能会有提升。

        一年前 Safari 13 · iPhone iOS 13.6

        回复

        • S

          江苏

          @木瓜园 这应该不难,甚至写个比如bat脚本线下处理都行。

          一年前 Microsoft Edge 110 · Windows 10

          回复

          • 木瓜园

            江苏

            @S 我准备踩坑试试

            一年前 Google Chrome 110 · Windows 10

            回复

  6. 小熊

    四川

    这还有个博客

    一年前 Microsoft Edge 110 · Windows 10

    回复

    • S

      江苏

      @小熊 一直是俩。

      一年前 Safari 16 · Mac OS X 10.15

      回复

  7. Betty

    上海

    几天没来,是不是换字体了?

    比起要装个插件,我还是觉得手动方便。

    Ps:去掉狂粉这种功能棒棒哒的,简洁的评论区看着不好吗?哈哈

    一年前 Google Chrome 110 · Mac OS X 10.15

    回复

    • S

      江苏

      @Betty 哈哈,版式是不是似曾相识?都是抄你的。

      一年前 Safari 16 · Mac OS X 10.15

      回复

      • Betty

        上海

        @S 哈哈哈,我说这么优越的版式也像致敬我之作,哈哈

        上次来发现你常规的竖排留言者信息区突然变横排,我就估摸着你在复刻的道路上感叹 Betty 可真懂设计之美,咩哈哈哈

        一年前 Google Chrome 110 · Mac OS X 10.15

        回复

        • S

          江苏

          @Betty 嗯,我一直等着你哪天发现了来告诉我。

          一年前 Safari 16 · Mac OS X 10.15

          回复

  8. Justin

    广东

    我已经习惯手敲空格了,用了插件或自定义代码自动化反而觉得不太习惯……

    一年前 Google Chrome 110 · Mac OS X 10.15

    回复

    • S

      江苏

      @Justin 手敲万一经常忘记怎么办……岂不是不对称了。

      一年前 Safari 16 · Mac OS X 10.15

      回复

      • Justin

        广东

        @S 这种情况在我身上很少发生,就算是发生了也不是什么大事,看到了就改呗~

        一年前 Google Chrome 110 · Mac OS X 10.15

        回复

        • S

          江苏

          @Justin 强迫症会死,哈。

          一年前 Safari 16 · Mac OS X 10.15

          回复

  9. JiaYin

    上海

    太高级了,强迫症很喜欢,但我不会,算了。

    一年前 Google Chrome 110 · Windows 10

    回复

    • S

      江苏

      @JiaYin 可以直接装插件不改也挺好。

      一年前 Microsoft Edge 110 · Windows 10

      回复

       

发表评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注