🈳 空格在科技类文章中对阅读体验的影响

Conmajia ? 2018
Feb. 22, 2018

1 共勉

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

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

2 概述

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

示例 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 Ulimited”和“您的 Amazon Drive”三个菜单项不管从空格的应用还是从遣词手法,都很难说它们出自同一个工程师之手.


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

4.2.2 百度百科、维基百科

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

4.2.3 博客园

博客园的主要用户群体是软件工程师,俗称码农. 这个群体的特点是很少在意措辞,讨厌写文章,不擅长交流——不管是口头还是书面. 因此,码农在写文章的时候,几乎不会考虑读者的感受,自己写得开心就好,沾沾自喜. 打开博客园首页,几乎没有看到在中英文间添加空格的文章,参考图 9.


图 9 博客园首页

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

5 造成这种情况的原因

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

毕竟不算大众需求:a. 只有部分国家的人需要 b. 这些国家的普通用户恐怕大部分都不在意这些空格,加之标准化遥遥无期,浏览器实现的优先级自然低了

6 现有的解决方案

6.1 CSS

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

6.2 浏览器插件

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

The End. \(\Box\)


  1. 因我写作的内容常有数学公式,习惯使用英文句点“.”代替中文句号“。”,但引用的文字均按照原文使用中文句号.?
  2. 出自《汉字标准格式》,阅读原文.?
  3. Chinese Copywriting Guidelines,阅读原文.?
  4. GitHub/text-autospace.js,demo.?
  5. GitHub/pangu.js,view on GitHub.?

原文地址:https://www.cnblogs.com/conmajia/p/space-in-webpages.html

时间: 2024-10-23 02:54:03

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

关于阅读体验的手记

文字阅读要素: 字体.字号,行长,间距,背景 字体:衬线字体.非衬线字体 衬线字体:字体的粗细不均,有在一些地方做了一些修饰.如:宋体 非衬线字体:字体的粗细一致.如:微软雅黑 非衬线体饱满醒目,常用做标题或者用于较短的段落. 在过去,普遍认为有笔触装饰的衬线体,可提高辨识度和阅读效率,更适合做为阅读的字体.多用于报纸.书籍等印刷品的正文.非衬线体饱满醒目,常用做标题或者用于较短的段落. 为什么有很多人在正文里用衬线字体,如宋体,因为他即时在12px.14px像素的时候,仍然相当清晰美观,便于阅

《三联生活周刊》2017年17期:3星。电子版阅读体验远超纸版。如果雄安的土地制度实验成功了,“北上广深”的房价也就被釜底抽薪了。

家附近的报刊亭都被拆了,被迫看电子版三联.发现阅读体验远超纸版.主要有以下两个方面的好处:1:看图片的体验,电子版好过纸版.当然前提是在电脑上或平板上看,kindle是黑白的,看图片效果比较查:2:可以做笔记,笔记可以永久保存:3:检索方便. 目前电子版的缺陷是滞后两期,导致时效性太差,只能当作纸版的长尾. 本期雄安的几篇文章比较有深度.总体评价3星. 以下是本期中一些重要的信息的摘抄: 1:研究人员调查分析了美国11个城市10年中举办马拉松赛事前后心脏病患者的死亡率后发现,那些在赛事举办时发生

优化 Markdown 在 Notepad++ 中的使用体验

选择一个强大而好用的文本编辑器,是进行 Web 开发和编程必不可少的一部分,甚至对于通常的写作,一个舒服的文本编辑器也会让你写起文字来觉得优雅而潇洒.Sublime Text 是一款不错的编辑器,简洁且跨平台,但对新手来说配置起来有些麻烦,对于通常使用 Windows 的用户来说,Notepad++ 或许是一个更好的选择.Notepad++(NPP),顾名思义,就是一个加强版的记事本了,虽然只多了两个加号,但功能甩系统记事本可不是一里两里. Notepad++ 本身除了作为一款强大的编辑器外,主

也谈WordPress获取文章中首张图片

从第一次接触WordPress开始,在前台首页需要调用文章中的图片以实现在首页显示图片文章,就看到网络上流传甚广的一个函数: 1 function catch_that_image() { 2 global $post, $posts; 3 $first_img = ''; 4 ob_start(); 5 ob_end_clean(); 6 $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i'

解决WordPress在文章中插入图片时默认插入中等格式图片的问题

如题所示,我使用的是WordPress自带的编辑器进行编辑,而且为了保护版权开始给自己的图片添加文字水印.本来每次上传的时候都可以通过插件自动地给图片添加上水印,但是比较恶心的是把图片插入到文章中之后自动生成了一个中等尺寸的图片,而这个新的小图片是没有水印的.解决这个问题也很简单,只需要在后台的"设置" –> "多媒体"里进行简单的设置就可以了 如上图所示,只需要把媒体选项里的所有选项都设置成0就可以了

js查找一篇英文文章中出现频率最高的单词

下面这个函数是js查找一篇英文文章中出现频率最高的单词(由26个英文字母大小写构成),输出该单词及出现次数,不区分大小写,主要是正则的运用: function counts(article){ article = article.trim().toUpperCase(); var array = article.match(/[A-z]+/g); article = " "+array.join(" ")+" "; var max = 0,wor

ASP.NET/C#获取文章中图片的地址

前几天修改一个网站的布局的时候需要把简单的新闻列表修改为图文结合+新闻列表,不过这新闻的数据库非常简单,图片是在编辑器里面和HTML一起存入数据库中的content字段的,所以工作简化到从一个字符串里面获取图片的地址并输出.在HTML的图片标签一般如下格式所示:<img src="" alt="" title="" width="" height="" />,这就相当于编程中的一个结构体啊,里面

Android中socket初体验

最近要做一个Android的项目,用到socket和服务器之间交互,研究了一个小demo.主要遇到了以下几个问题: 1.客户端创建socket对象时一直失败NetworkOnMainThreadException,查了一下,原因是4.0之后在主线程中执行http请求会报这个错.解决办法是将代码放到了一个新线程中,问题就解决了. 2.服务器接收到客户端信息后反馈给客户端信息,将该信息表示在客户端UI上时报“android.view.ViewRoot$CalledFromWrongThreadExc

转:多篇文章中的设计模式-------策略模式

DRY原则和设计模式 前两天在做统计程序时,需要读取linux中的日志文件,在网上查了下,就有了结论,于是,根据需要,我写下了这样的代码: [java] view plaincopy public class dealFile { public static void dealContent(String[] commands){ BufferedReader reader=null; try{ Process process = Runtime.getRuntime().exec (comma