完美解决WordPress实现中英文自动排版

为什么要使用中英文排版?

一直以来都想使用中英文排版,因为受森胖(一名强迫症设计师)影响。早在很早以前,他就对魅族、锤子等官网的文字排版格式提出了诸多问题,其中一个就是中英文混排的问题。作为一个处女座的我也注意到,当中英文混排时,在英文前后加入一个空格后,文字的可读性更好。请参照:中英文混排时中文与英文之间是否要有空格?

最近经常去V2EX闲逛,发现V2EX的中英文排版是自动的。于是,开始在网上寻找如何让WordPress自动排版的,找到唯一的一个文章,但是方法已经失效,而且是2013年的文章,寻找了大约半小时无果,果断在V2EX发帖。晚上回家看到竟然有2个收藏,1个回复,看来还是有人关注这个排版问题。心情激动看到回复者给了一个git项目地址,果断点开参阅,虽然不是WordPress专属,但是给出了js代码和css样式,那肯定能在WordPress上实现了。

WordPress中英文排版实现方法

根据git项目提供的方法,折腾了半天搞定了。这里还是给出git项目地址:https://github.com/zizhengwu/daft-auto-spacing,也在这里感谢作者满足了我这个处女座的愿望。
其实移植到WordPress上最傻瓜的方法就是调用js和css就行了,无赖不会代码,且用的木风的主题,所以还是用傻瓜方法吧。

1、只需在html标签中添加class="han-la"即可

2、你还需要添加如下的css样式:

html.han-la hanla:after {
	content: " ";
	display: inline;
	font-family: Arial;
	font-size: 0.89em;
}

html.han-la code hanla,
html.han-la pre hanla,
html.han-la kbd hanla,
html.han-la samp hanla {
	display: none;
}

html.han-la ol > hanla,
html.han-la ul > hanla {
	display: none;
}

3、添加js文件
下载地址:http://pan.baidu.com/s/1gdi3sjx,将下载的js添加到head标签中。

最后刷新主页吧,空格自动加上,简直完美!

评论 (13)
  1. 沙发
    林木木 2015-09-23 11:00

    php 的过滤不行吗?

  2. 板凳
    antior 2015-11-10 15:43

    请问typecho怎么用这个呢?我改了但是没有正确应用上。
    我的博客:blog.antior.cn

    • 回复
      Noisky 2017-01-20 15:45
      @antior typecho 可以用这个达到效果 https://github.com/mastermay/text-autospace.js 具体效果可看我博客
  3. 地板
    antior 2015-11-10 15:47

    百度盘下载的有乱码……

    • 回复
      曾先生 2015-11-10 17:08
      @antior 不好意思,typecho没接触过不知道!至于百度JS文件乱码可以查看我博客源代码里面的JS文件。http://7xj7pm.com1.z0.glb.clouddn.com/wp-content/themes/Arbitrary/script/text-autospace.js
  4. 4 楼
    themebetter 2016-01-20 07:22

    最近木有更新了呀?博主

  5. 5 楼
    wu先生 2016-01-22 14:19

    无折腾不博客哈。

  6. 6 楼
    whuted 2016-02-13 03:51

    好早之前的文章了,不过还是挺有用的学习了!等更新!

  7. 7 楼
    Yusky 2016-02-21 03:07

    小曾曾.我就是来围观一下.

  8. 8 楼
    Yusky 2016-03-23 13:17

    妈蛋。半年了还不更新。