「盘古之白」究竟有多白?
CSS Text Module Level 4终于引入了text-autospace属性,这才算是终结了困扰全体前端开发者和用户的中西文字符间距难题。我用最直白最不绕弯子的话告诉你,根据W3C中文排版需求6.2.2.3条:挤压处理的优先顺序,这个所谓的「盘古之白」(中西间距)初始为四分之一个汉字宽,最小挤压为八分之一汉字宽。后者更多地针对纸质文档和出版级的要求,Web中为了性能考虑,无论标点符号还是中西间距,通常都不挤压。 注 在一些排版风格中,中西间距固定默认宽度(如四分之一汉字宽),被排除在行内调整对象之外,不允许被挤压。 之前很多开发者依赖pangu.js,它会在所有需要添加中西间距的位置放入一个普通空格,即二分之一个汉字宽,严格意义上来说是不对的,而这种做法属于是在早期技术不成熟的前提下不得已而为之。这类做法的第一个问题是美观,因为西文的单词用普通空格隔开,即词间距为二分之一个汉字宽(或最小挤压为四分之一个汉字宽),如果中西间距和西文内部词间距相等的话是非常不美观也不易读的。另一个问题是,用户如果把这类加了空格的文本复制到支持自动中西间距的软件(比如Microsoft Word)中会发现拼写检查不通过,因为软件期望自己动态地拉伸或挤压这些间距以求最美观的效果,不希望你用空格干扰它,而且用户没有一个高效的方法去掉这类不需要的空格而不误伤其他的空格。 有人会说,西文叫「半角」中文叫「全角」(先不提这种称呼是不恰当的),所以要用一个「半角空格」(二分之一个汉字宽)把那些所谓的「半角字符」填充成「全角」以实现不同行的文字间纵横对齐。即使不考虑现代的中文文本除特殊需要外,极少使用纵横对齐(日后会专门写文章介绍哪些属特殊需要),这类人可能忽略了一个问题:一般的中西混排的文章中,西文使用比例字体,不同的字母宽度不同,指望靠一个固定宽的空格填充宽度不定的缝隙不是在缘木求鱼吗?此类情况下正确做法请参见W3C中文排版需求6.2.4条:纵横对齐下的中西文混排处理,即汉字与西文字母或阿拉伯数字间不使用四分之一汉字宽的字距,而是加入大于零、小于等于二分之一汉字宽的弹性空白,使西文所占的空间为汉字的整数倍,确保西文前后的汉字都能纵横对齐。 所以今天的开发者最好使用text-autospace这个新的CSS属性,它已经获得了广泛的支持,具体可以看text-autospace CSS property - CSS | MDN 用起来非常简单,只需要: body { text-autospace: normal; }