zoukankan      html  css  js  c++  java
  • 空格在科技类文章中对阅读体验的影响

    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 中是由软件自动分隔的,不需要手动添加.

    ![](https://images2018.cnblogs.com/blog/407692/201802/407692-20180223204322972-520339539.jpg)
    图 1 Windows 98 安装界面
    ![](https://images2018.cnblogs.com/blog/407692/201802/407692-20180223203324393-929626657.png) 图 2 MSDN .NET Core 网页版文档
    ![](https://images2018.cnblogs.com/blog/407692/201802/407692-20180223203503331-1409647904.png) 图 3 Microsoft Word 2016 工作区
    ### 4.1.2 $LaTeX$ 排版系统

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

    4.1.3 Apple 中国

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

    ![](https://images2018.cnblogs.com/blog/407692/201802/407692-20180223203515410-1395574145.png)

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

    ![](https://images2018.cnblogs.com/blog/407692/201802/407692-20180223203619092-1190276178.png)

    图 5 Apple 中国官网文章

    ### 4.1.4 IBM 中国

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

    ![](https://images2018.cnblogs.com/blog/407692/201802/407692-20180223203841483-1435935505.png)

    图 6 IBM Hadoop 产品页面

    ### 4.1.5 电脑报

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

    ![](https://images2018.cnblogs.com/blog/407692/201802/407692-20180223203850841-2103516276.jpg)

    图 7 电脑报文章

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

    4.2.1 亚马逊

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

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

    ![](https://images2018.cnblogs.com/blog/407692/201802/407692-20180223003254351-270979237.png) 图 8 亚马逊中国网站“我的帐户”菜单
    ### 4.2.2 百度百科、维基百科

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

    4.2.3 博客园

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

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

    ![](https://images2018.cnblogs.com/blog/407692/201802/407692-20180223204109443-2048662779.png)

    图 9 博客园首页

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

    5 造成这种情况的原因

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

    毕竟不算大众需求:

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

    6 现有的解决方案

    6.1 CSS

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

    6.2 浏览器插件

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

    The End. (Box)


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

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

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

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

  • 相关阅读:
    1063. Set Similarity
    A1047. Student List for Course
    A1039. Course List for Student
    最大公约数、素数、分数运算、超长整数计算总结
    A1024. Palindromic Number
    A1023. Have Fun with Numbers
    A1059. Prime Factors
    A1096. Consecutive Factors
    A1078. Hashing
    A1015. Reversible Primes
  • 原文地址:https://www.cnblogs.com/conmajia/p/space-in-webpages.html
Copyright © 2011-2022 走看看