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)。

接着,创建当前使用主题的子主题。这里需要在wp-content/themes目录下创建一个新文件夹,此处以官方主题twentyeleven为例,比如twentyeleven-child。并在其中创建style.css和function.php文件。

其中,function.php的文件内容为:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css',array( $parent_style ));
}

 

Style.css的内容为:

/*
Theme Name: Twenty Eleven Child
Theme URI: http://wordpress.org/themes/twentyeleven
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2011 theme for WordPress is sophisticated, lightweight, and adaptable. Make it yours with a custom menu, header image, and background -- then go further with available theme options for light or dark color scheme, custom link colors, and three layout choices. Twenty Eleven comes equipped with a Showcase page template that transforms your front page into a showcase to show off your best content, widget support galore (sidebar, three footer areas, and a Showcase page widget area), and a custom "Ephemera" widget to display your Aside, Link, Quote, or Status posts. Included are styles for print and for the admin editor, support for featured images (as custom header images on posts and pages and as large images on featured "sticky" posts), and special styles for six different post formats.
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
*/

 

其中template字段指向的就是父主题的文件夹。创建完成后,测试子主题是否正常工作。

将下载的脚本,在对应子主题的根目录下创建js文件夹,将获得的脚本上传至其中。

再在子主题的function.php末尾添加下面的代码,在wp_enqueue_scripts这一hook中注册这一脚本。

function text_autospace_js () {
    wp_register_script('text-autospace',get_stylesheet_directory_uri().'/js/text-autospace.min.js');
    wp_enqueue_script('text-autospace');
}
add_action('wp_enqueue_scripts','text_autospace_js');

 

现在刷新页面,查看源代码,应该可以看到该脚本已被加载。

接着,在style.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;
}

 

最后,将父主题的header.php复制到子主题目录下,给<html>标签添加class=”han-la”。至此即可完成。现在网页中中西文之间就会有一个空格,已经有空格不会再增加。

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

具体可以在header.php中用类似这样的代码:

<?php if(!preg_match('/Edge/i', $_SERVER['HTTP_USER_AGENT'])){ echo 'class=”han-la"'; } ?>

 

参考文献

http://blog.marksylee.com/%E4%B8%AD%E8%8B%B1%E6%96%87%E6%B7%B7%E6%8E%92%E8%87%AA%E5%8B%95%E6%8F%92%E5%85%A5%E7%A9%BA%E6%A0%BC/

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

http://php.net

 

延伸阅读

http://www.typeisbeautiful.com/2015/05/9230/

http://www.geekpark.net/topics/198213

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

 

发布者

《WordPress中英文混排自动增加空格》上有4条评论

    1. 参考了官方文档以及网上所找的代码,然后自己做了一些修改。

      Google Chrome 49.0.2623.87 Google Chrome 49.0.2623.87 Windows 10 x64 Edition Windows 10 x64 Edition

发表评论

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