WordPress中英文混排自动增加空白

只是为了好看。

从网页中文排版说起

Web页面从设计之初就没有考虑到中文排版的问题，其原因在于万维网由使用拉丁语系的西方发源，这些语言的文字排版相对简单。以英语为例，词与词之间都有空格进行分隔，阿拉伯数字与英文单词之间自然有空格。但是遇到中文（甚至是整个东南亚的文字），传统的针对于西文设计的Web版式就显得不那么合适了。中文不仅从结构上与英文完全不同，还有自己的一套标点符号系统。例如英文排版中以斜体字表示书籍报刊等名称（在手写中用Italic type（意大利体）），但是中文中却需要用到书名号。甚至连简体中文和繁体中文中对于一些符号的使用也有很大的差异。当然，网页不能说是出版物的一种，但是网页的整体显示效果，尤其是文章类网页的显示效果和排版有很大的关系。

如此一来，要想让网页上的中文文章显示得更为漂亮，必须要有一定的规范和标准。其中有“汉字标准格式”（https://css.hanzi.co/）这一个项目可以优化网页的中文排版。其作者也参与到了W3C对万维网相关排版标准的起草和制定中。（https://www.w3.org/TR/clreq/）。我们也希望这样一个标准能够逐步被推进。

这里不再费更多的笔墨在中文网页排版的各种规则的具体问题上，而是从这些规则中比较重要的中西文混排的问题的解决往下继续进行。

从排版的角度来讲，一些人认为中文字符和西文字符之间应该留有一定的间距。具体来说，其规则是：西文字符或标点与中文字符中间增加间距，而西文字符与中文全角标点之间不增加间距。这么做可以使得人眼在有两种不同类型字符的文章中浏览的时候，有一个更为平滑的过渡，不至于过于突兀。在大多数排版软件中，例如Microsoft Word、LaTeX中，都可以自动地增大中英文之间间距（不是空格）。但是目前为止似乎还没有哪个浏览器能做到这一点（可能有一些插件可以做到），一个办法是在输入的时候手动输入一个半角空格，但是这样的排版需求破坏了原始文本的语义（因为原始文本不存在空格），而且这一操作也不应该由人来手动进行，所以我们自然要寻找一定的自动化方案。

实现WordPress在中英文混排时自动增加空白

对于WordPress这样一个主要为西文环境所设计的博客系统，中文排版需求不太可能成为其要解决的问题。所以只能从一些方法入手自行解决。解决方案也比较简单，利用一些脚本就可以做到。你可以直接套用“汉字标准格式”，其中不仅包括混排空白，还包括其他的一些高级排版。如果你需要一个全套的解决方案，就可以选择“汉字标准格式”。如果你只是需要混排空白，那么可以只使用text-autospace.js脚本。

以下的方法需要你对WordPress有一定程度的了解，并且知道自己正在做什么。下面开始具体的步骤：

首先，获取text-autospace.js这个脚本（https://github.com/mastermay/text-autospace.js）。

由于需要为主题加载脚本，子主题的形式可以避免对原始主题的修改，因此需要创建当前使用主题的子主题，此处以官方主题Twenty Eleven为例。这里需要在WordPress的 wp-content/themes 目录下创建一个新文件夹，比如twentyeleven-child。并在其中创建style.css和function.php文件。在子主题的目录下创建js文件夹，将先前下载到的脚本放置其中，假设其名字为 text-autospace.min.js。

然后，修改function.php的文件内容为：

<?php

function text_autospace_body_class($classes){
	array_push($classes,'han-la');
	return $classes;
}
function text_autospace_js() {
	wp_register_script('text-autospace-js',get_stylesheet_directory_uri().'/js/text-autospace.min.js'); 
	wp_enqueue_script('text-autospace-js'); 
} 
add_action('wp_enqueue_scripts','text_autospace_js');
add_filter('body_class', 'text_autospace_body_class');

style.css的内容为：

/*
Theme Name: Twenty Eleven Child
Theme URI: http://wordpress.org/themes/twentyeleven
Author: the WordPress team
Author URI: http://wordpress.org/
Description: A modified version.
Version: 1.0
Template: twentyeleven
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: twentyeleven-child
*/

@import url('../twentyeleven/style.css');

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

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

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

其中template字段指向的就是父主题的文件夹，并用 @import 引入父主题的CSS。

在个人的测试中，发现在使用TwentyFifteen主题，按以上方法操作后，使用Microsoft Edge浏览器访问文章内容页面，会出现网页崩溃的问题，但在Chrome、Internet Explorer上访问一切正常，暂不明其中的原因。解决方案是增加一个对于Microsoft Edge浏览器User Agent的判断，当使用Microsoft Edge的时候不加class=”han-la”。

之后就可以通过启用新创建的子主题加载脚本，从而实现排版上的空白。

本站目前已经启用了这个脚本，此页面就可以看到效果。然而这一方法仍然存在不完美的地方，由于上面的脚本是在网页加载完成之后对网页上的DOM进行正则替换，所以在加载页面的时候会先加载页面主体再执行脚本，所以可以在网页加载过程中观察到替换行为。不过好处就是对WordPress本身的修改较小。

参考文献

https://mastermay.github.io/text-autospace.js/

https://php.net

 

延伸阅读

https://thetype.com/2015/05/9230/

https://www.geekpark.net/news/198213

https://www.zhihu.com/question/19587406