Conmajia © 2018

1 共勉

研究显示,打字的时候不喜欢在中文和英文之间加空格的人,感情路都走得很辛苦,有七成的比例会在 34 岁的时候跟自己不爱的人结婚,而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。 ——V2EX

中文和英文(及数字)之间要不要加空格,我猜很多人从来都没考虑过这个问题.1 他们一边信奉“细节决定成败”的鸡汤,一边“从来不在意这些细节”. 如果你也是这样的人,emmmmm,turn around and leave.

2 概述

科技类文章通常在中文之间混杂较多的外文词汇或字母,例如“Unity 从入门到精通”、“关于 http 和 https 之间的区别”、“我有学过 українська мова,所以 русский язык 我可以稍微看得懂。”等等. 在阅读网页文字的时候,由于汉字均为全角字符,而外文——尤其是英文——字母多为半角字符,因此容易造成视觉粘连. 对比下面两个例子2

示例 1

在LeanCloud上,数据存储是围绕AVObject进行的。每个AVObject都包含了与JSON兼容的key-value对应的数据。数据是schema-free的,你不需要在每个AVObject上提前指定存在哪些键,只要直接设定对应的key-value即可。

示例 2

在 LeanCloud 上,数据存储是围绕 AVObject 进行的。每个 AVObject 都包含了与 JSON 兼容的 key-value 对应的数据。数据是 schema-free 的,你不需要在每个 AVObject 上提前指定存在哪些键,只要直接设定对应的 key-value 即可。

试试看

你可以先花 1 分钟仔细阅读上面两个例子,然后再给出自己的判断.

中文和英文(及数字)之间的起到的是分词的作用,也有部分 kerning 的作用,所以对于专有名词,例如“歼20”、“豆瓣FM”这种混合词就不能分开,但是“歼20 战斗机”、“豆瓣FM 软件”是可以分开的.

3 争议

正是因为间距直接影响了文字阅读的视觉效果,所以在网页上,中英文之间常常添加空格来进行调整. 但这属于阅读呈现样式的问题,并没有强制性的规范,更多的只是建议. W3C 曾在 2015 年提出过一个《中英文混排建议规范》. 据说汉字委员会也在对此进行讨论,未见下文.

然而手工添加空格,相当于在代码里硬编码文字说明,这是和“样式-内容分离”原则背道而驰的. 但是,就目前的浏览器渲染方式来说,没有人会他妈关心你写的文章阅读起来体验是怎样的. 所以手工添加空格更多的是作者本人为了提升阅读体验的折衷.

4 现状

目前,就网页或计算机软件而言,单一内容来源者倾向于添加空格以提升显示效果,例如大公司的网页或文档. 而不添加空格的通常是论坛、博客或百科类网站,因为这些网站内容由多人提供,无法形成有效规范.

4.1 支持的例子

4.1.1 Microsoft

微软一直是坚定的空格支持者. 图 1、图 2、图 3 分别是 Windows 98 安装界面、MSDN 文档和 Word 编辑界面截图,注意中英文之间的间隔. 在网页上,使用空格分隔,而 Word 中是由软件自动分隔的,不需要手动添加.


图 1 Windows 98 安装界面


图 2 MSDN .NET Core 网页版文档


图 3 Microsoft Word 2016 工作区

4.1.2 \(\LaTeX\) 排版系统

这是科技文献排版系统的事实标准,它的 CJK 宏包支持完美的中英文分词.

4.1.3 Apple 中国

苹果一向以高水准的设计著称,它的中文官方网站所有内容中英文之间均添加了空格,参考图 4 和图 5.



图 4 Apple 中国官网 2018 年首页广告



图 5 Apple 中国官网文章

4.1.4 IBM 中国

IBM 中国官方网站绝大多数网页内容中英文间也添加了空格,参考图 6.



图 6 IBM Hadoop 产品页面

4.1.5 电脑报

图 7 是电脑报 2014 年 5 月 5 日的一篇文章,可以看到中英文间添加了空格.



图 7 电脑报文章

4.2 部分支持或不支持的例子

4.2.1 亚马逊

亚马逊中国的页面相当任性,空格添加与否完全视工程师的个人喜好.

例如图 8 展示的个人帐户菜单,“我的Prime会员”、“我的 Kindle Unlimited”和“您的 Amazon Drive”三个菜单项不管从空格的应用还是从遣词手法,风格迥异,很难说它们出自同一个工程师之手.



图 8 亚马逊中国网站“我的帐户”菜单

4.2.2 百度百科、维基百科

百科类网站特点在于共同编辑. 在享受集体智慧的同时,也无法要求实现统一的阅读效果.

4.2.3 博客园

博客园的主要用户群体是软件工程师,俗称码农.

这个群体的特点是很少在意措辞,讨厌写文章,不擅长交流——不管是口头还是书面. 因此,码农在写文章的时候,完全不考虑读者的感受,只管自己瞎鸡吧写. 打开博客园首页,几乎没有看到在中英文间添加空格的文章,参考图 9.



图 9 博客园首页

当然,我也是写开心就好,而且禁止评论.

5 造成这种情况的原因

简单来说,就如这段引文所讲.

毕竟不算大众需求:

  1. 只有部分国家的人需要
  2. 这些国家的普通用户恐怕大部分都不在意这些空格

6 现有的解决方案

6.1 CSS

正如我前面说的,将中英文分开,本质上是内容呈现样式的问题,和内容本身是无关的. 遗憾的是,尽管 CSS 3、CSS 4 标准均有 text-autospace 的相关内容,然而在目前的技术和现实环境下,只有微软的 Internet Explorer 支持 -ms-text-autospace 特性,可以为中英文间自动添加空格(微软在文字处理方面一直领先业界).

6.2 浏览器插件

在多数浏览器均不支持的情况下,一般使用 js 插件或者其他语言写成的插件完成. 比如 text-autospace.js3为什么你们就是不能加个空格呢?4(Chrome/FireFox 插件)等.

The End. \(\Box\)



  1. 因我写作的内容常有数学公式,习惯使用英文句点“.”代替中文句号“。”,但引用的文字均按照原文使用中文句号.↩

  2. Chinese Copywriting Guidelines,阅读原文.↩

  3. GitHub/text-autospace.js,demo.↩

  4. GitHub/pangu.js,view on GitHub.↩

转载于:https://www.cnblogs.com/conmajia/p/space-in-webpages.html

空格在科技类文章中对阅读体验的影响相关推荐

  1. 借“技术文章如何写作才能有较好的阅读体验”,说我们要认真的对待博客和技术.

    最近也在思考如何更好的规范大家写博客的习惯和看博客的态度,不想看到标题党.占位和各种水贴回复,对自己和他人一点益处都没有,丁点收获都木有,搞这些有毛用. 在酷勤上看到这篇文章,主体突出了我们做技术写技 ...

  2. 【字符统计】统计输入的文章中文字、数字、空格和特殊字符的个数并打印的简单python程序

    问题描述如下: 输入一段文章,统计出文章中文字(字母).数字.空格和特殊字符的个数.利用isalpha(),isdigit(),isspace()函数进行实现. 程序代码如下: tmpStr = in ...

  3. UC HD 1.5:提高在iPad上的阅读体验

    在iPad上浏览网页,由于大部分网页在设计过程中都按照大尺寸显示屏幕对网页进行设计,因此用屏幕尺寸相对较小的iPad进行浏览总是让网页显得拥挤.而针对这一情况而开发出的文摘阅读类的App数不胜数. 此 ...

  4. 9月推荐 | 从近1000篇Python文章中精选Top10

    作者 | MyBridge 译者 |王天宇 编辑 | Jane 出品 | AI科技大本营 [导读]我们从过去一个月近 1000 篇有关 Python 的文章中,精心挑选出了最热门的 10 篇(前 1% ...

  5. php 随机在文章中添加锚文本_seo网站优化技巧之:8种优质锚文本的做法

    众所周知,质量最高的外链就是锚文本形式的外链,这种外链又称为锚链,当锚文本中嵌入了我们的目标关键词之后,这种锚链的权重传递效率最高.锚文本链接的质量高低,对关键词排名及网站权重的影响非常大. seo网 ...

  6. 网站文章中如何设置关键词才更有利于SEO优化?

    文章内容在网站优化中占据重要的分量,文章内容的高质量会非常有助力网站排名提升,更能给网站带来更多的流量.那么在网站优化中,如何设置文章内容的关键词才能更利于网站SEO优化? 一.文章的关键词要有合适的 ...

  7. vue seo关键词设置_网站文章中如何设置关键词才更有利于SEO优化?

    文章内容在网站优化中占据重要的分量,文章内容的高质量会非常有助力网站排名提升,更能给网站带来更多的流量.那么在网站优化中,如何设置文章内容的关键词才能更利于网站SEO优化? 一.文章的关键词要有合适的 ...

  8. Alibaba Code代码索引技术实践:为Code Review提供本地IDE的阅读体验

    作者:曲径     阿里研发基础设施团队 Code Review在研发流程中非常重要,但Web界面中Code Intelligence能力的缺失改变了原有的代码阅读习惯,又增加了阅读成本.本文将介绍阿 ...

  9. 微信公众号发送小程序卡片_如何在公众号文章中添加小程序卡片

    在公众号中添加小程序卡片可以给阅读者更好的文章阅读体验,腾讯地图+小程序可以在文章内容中提供位置卡片和路线规划卡片,适用于各类含有地点信息的文章推文. 绑定腾讯地图+小程序的方法如下: 第一步:公众号 ...

  10. 统计一篇英文文章中26 字母出现的概率

    统计一篇英文文章中26 字母出现的概率 //统计英文文章中26 字母出现的概率 #include <stdio.h> void main() { float number[26]={0}; ...

最新文章

  1. python 添加类属性
  2. 以“不变”方能应“万变”,以“有心”必能筑“无界”
  3. java 数据结构 迷宫_JAVA数据结构与算法之递归(一)~ 迷宫问题
  4. php函数find的用法,fleaphp fleaphp crud操作之find函数的使用方法
  5. Unity Timeline自定义轨道 DefaultPlayables源码剖析
  6. python实战笔记之(8):下载知乎视频
  7. ERC20重要补充之approveAndCall
  8. 淘宝新上架的产品如何在站内SEO优化
  9. matlab光学几何光学模拟,matlab在几何光学仿真 实验中的应用.doc
  10. 物理系统之碰撞检测——碰撞器
  11. 已解决ValueError: 4 columns passed, passed data had 2 columns
  12. 牛客网wannafly挑战赛13-E(线段树)
  13. imx6 添加matrix keypad
  14. r语言lm函数找不到对象_R语言错误的提示(中英文翻译)
  15. SQL语句大全 作者:阿多
  16. java后台判断请求来自移动端访问还是PC端访问
  17. 《浪潮之巅》阅读笔记之一
  18. 您的企业适合导入APS系统吗?跟着小编来了解一下吧(上)
  19. 【Docker】镜像安全扫描工具clair与clairctl
  20. R5reloaded 快速入门指南

热门文章

  1. hive udaf_Hive 混合函数 UDTF UDF UDAF详解
  2. 【JAVA】Collections.sort()实现动态数组自定义排序
  3. java maven本地库导入本地包
  4. PHP7.1 狐教程
  5. Tomcat启动报:The Server time zone value 'XXXXX' 乱码问题解决
  6. 阶段3 2.Spring_04.Spring的常用注解_3 用于创建的Component注解
  7. 牛客寒假算法基础集训营2 A 处女座的签到题及一丢丢nth_elemen容器的简单用法...
  8. MongoDb学习(四)--Repository
  9. 如何设置修改 Windows 7 开机启动项
  10. Mybatis-实现逆向代理