安装这个插件，网页排版变好看了

[leopoldthecuber]

最近写了一个用于中文排版格式化的 Chrome 插件：Doctor Jones （琼斯医生），作用是美化你当前正在浏览的网页的中文排版，包括中英文混排。

相关链接：

• 获取插件：Chrome 应用商店
• 插件源码：GitHub 仓库

插件作用

举例来说，如果页面上本来有这样一段文字：

比方说 adobe 的 photoshop 系列，ANSYS、Dassault System、Autodesk 那些 maya 3D Max， 微软的 office 系列、matlab、Mathematica、英伟达的显卡驱动程序、甚至现在用得最广泛的 tensorflow 本 ten.

全都是“面向解决问题的开发”。

经过琼斯医生格式化后，你看到的页面就变成了：

比方说 adobe 的 photoshop 系列，ANSYS、Dassault System、Autodesk 那些 maya 3D Max， 微软的 office 系列、matlab、Mathematica、英伟达的显卡驱动程序、甚至现在用得最广泛的 tensorflow 本 ten.

全都是「面向解决问题的开发」。

更加具体的介绍可以查看这篇专栏，获取插件请点击这里。

Under the Hood

Chrome 插件所依赖的核心是之前写的一个方法，它接收一个字符串和一个配置对象，返回格式化后的字符串。这个方法也发布成了一个 npm 包，地址在这里，具体用法如下：

import dj from 'doctor-jones'

dj('2019 年 8 月') // => 2019 年 8 月
dj('2019 年 8 月', { spacing: false }) // => 2019 年 8 月

它的源码在这里，更加具体的介绍可以查看这篇专栏。

衍生项目

由以上方法还衍生出了一个 webpack loader （源码），作用是将代码中的文本格式化，直观过程可以查看这个动图。

上面三个项目的文档链接在此，也欢迎各位去源码仓库点一波 star。

插件的完整功能如下：

• 中文与英文、中文与数字之间添加半角空格
• 移除多于一个的连续感叹号（比如：「羡慕！！！！」会被格式化为「羡慕！」）
• 将、、、和。。。。。等不规范的省略号规范化为……
• 将弯引号 “” ‘’ 替换为直角引号「」『』
• 将纯数字周围的全角括号替换为半角括号
• 移除全角标点和英文 /数字之间多余的半角空格

以上每个功能都可以按照个人喜好打开/关闭。

[LanAiFaZuo]

举例来说，如果页面上本来有这样一段文字：

比方说 adobe 的 photoshop 系列，ANSYS、Dassault System、Autodesk 那些 maya 3D Max， 微软的 office 系列、matlab、Mathematica、英伟达的显卡驱动程序、甚至现在用得最广泛的 tensorflow 本 ten.

全都是“面向解决问题的开发”。
经过琼斯医生格式化后，你看到的页面就变成了：

比方说 adobe 的 photoshop 系列，ANSYS、Dassault System、Autodesk 那些 maya 3D Max， 微软的 office 系列、matlab、Mathematica、英伟达的显卡驱动程序、甚至现在用得最广泛的 tensorflow 本 ten.

全都是「面向解决问题的开发」。

有差别吗？看着还是一样的啊，就是最后一句变成括号了。

[wangsongyan]

@LanAiFaZuo 引号也变了

[bluefountain]

我明白你的插件意思了，就是把引号全自动换成括号是吧。高科技！

[leopoldthecuber]

@LanAiFaZuo 中英文之间被加上了空格。

[leopoldthecuber]

插件的完整功能如下：

- 中文与英文、中文与数字之间添加半角空格
- 移除多于一个的连续感叹号（比如：「羡慕！！！！」会被格式化为「羡慕！」）
- 将、、、和。。。。。等不规范的省略号规范化为……
- 将弯引号 “” ‘’ 替换为直角引号「」『』
- 将纯数字周围的全角括号替换为半角括号
- 移除全角标点和英文 /数字之间多余的半角空格

[bluefountain]

@leopoldthecuber 然鹅 LZ 并不知道 V2EX 会自动加空格 XDD

[leopoldthecuber]

@bluefountain 不错，怪不得看不出来变化= =

[slimyy]

将弯引号 “” ‘’ 替换为直角引号「」『』


这个有啥好的? 符合国家标准吗?

[TrembleBeforeMe]

竖排的直角引号好看在哪儿？为什么很多人对其趋之若鹜

[greatghoul]

同不喜欢直角引号。

[liuxey]

没有达到让我想进一步了解的程度

[oszlso]

不错，正好有需要

[Spoter]

已安装

[luojianxhlxt]

我语文是白学了
从来不知道我国引号是用「」『』这些玩意儿

[leopoldthecuber]

@TrembleBeforeMe 不喜欢的话可以在选项里把这一项关掉。所有格式化功能都可以按你的喜好随时打开 /关闭。

[jmc891205]

第一次见到有人把直角引号认成括号。。。

[kyuuseiryuu]

直角引号是竖向书写排版的时候用的吧。

[leopoldthecuber]

@kyuuseiryuu 还是看个人喜好，确实直排时用得多些。再次声明一下，包括直角引号在内的所有格式化选项都可以按个人口味配置。

[LanAiFaZuo]

不过话说回来，这个插件可以自动排版格式化文章吗？就是类似把文章里面的各种标签啥的去掉，类似 网络超级编辑工具箱，这个功能。

[PanJiaChen]

功能很赞，之前格式化都是放在 VSCODE 里做的。不过有一个小小的建议，chrome 插件能不能增加一个 input 之类的，只格式化一段内容，而非整个页面。经常会有格式化一段内容的场景。

[darmau]

@slimyy 不符合。一些人的自嗨而已

[VENTDOUX]

已安装

[leopoldthecuber]

@PanJiaChen 指的是粘贴一段非当前网页的文本进来，然后对这段文本进行格式化吗？

[dazkarieh]

已安装，对中英文字排版有洁癖，博客也加了 pangu。之前用过他们的 chrome 插件「为什么你们就是不能加个空格呢？」，嫌弃简陋，一直想找个同类的替代品，楼主这个不错，支持！

[leopoldthecuber]

@dazkarieh 我也是受了 pangu 的启发

[Felix2Yu]

请问能考虑下支持火狐吗

[PanJiaChen]

@leopoldthecuber 是的，比如写文档或者干啥的时候。

[leopoldthecuber]

@PanJiaChen 了解，已加入计划。

[fenx]

标题有点问题吧，看了下功能这不能叫网页排版「变好看了」，应该是变稍微「规范了」。
而且在一些口语✍️语境时候很不适合开启这个插件，情绪的表达会不到位。

[leopoldthecuber]

@fenx 有道理。可能会影响口语化语境中的部分情绪表达（比如这样的感叹号！！！），可以把比如微博、弹幕网站之类的放进黑名单里。

[abmin521]

首行缩进呢.....

[code2019]

@PanJiaChen vue-element-admin 使用者路过

[good1uck]

推荐 Flickar

[efcndi]

@dazkarieh #24 作为一个有文字洁癖强迫症的人，我是特别厌恶那种手动在中英文之间加空格的行为，每次看到了都忍不住要去删除。本来这玩意属于排版、渲染处理的范畴，就好像 MS Office 自动增大中英文之间的字间距（而不是添加一个空格）；但是通过手动添加，就成了内容层面的处理，这里多了不应该存在的东西。

换作数学语言来描述，一个值为零和一个值为空，虽然对很多人来说，表面上看起来差不多，但实际上二者差了十万八千里。极度厌恶这种“混为一谈”！

[dazkarieh]

@efcndi #34 我反对在文字创作编辑时手动加间隙，但坚决拥护中英文之间加空隙（包括但不限于空格）隔断。在更智能的通用型排版软件 /方案出现前，我会选择尽量用第三方工具去实现(pangu)或者假装已经实现（ chrome 插件）。

加空格并非排版行业的规范，只是大多数人（尤其是平面印刷）采取的一种共识性、暂时性的妥协办法，对于不同的平台、不同的软件，如果文字量不多，加空格是成本最低、门槛最低的临时解决方案。

这个话题在知乎上已是老生常谈，追溯起来还有 v 站站长 Livid 的一份功劳。
https://www.zhihu.com/question/19587406

[DaCong]

@dazkarieh 确实，这只是一种临时的解决方案。我个人认为，如果排版引擎能够实现在中英文之间加上六分之一或者八分之一空格宽度的空隙，那是最舒服的了。

这个空隙应当让人觉得有间隔，但是又不会明显地觉察出之间有东西插在其间。

[leopoldthecuber]

@DaCong iOS 的某些 app 好像会在中英文之间加空隙。

[wql]

@slimyy #8 不符合，我国的国家标准是，当竖排文字时，将弯引号 “” ‘’ 替换为直角引号『』「」。但此方法为台湾省使用。

[yinet]

引号和括号是作用是不一样的


4.8 引号

4.8.1 定义

标号的一种，标示语段中直接引用的内容或需要特别指出的成分。

4.8.2 形式

引号的形式有双引号““””和单引号“‘’”两种。左侧的为前引号，右侧的为后引号。


4.9 括号

4.9.1 定义

标号的一种，标示语段中的注释内容、补充说明或其他特定意义的语句。

4.9.2 形式

括号的主要形式是圆括号“（ ）”，其他形式还有方括号“［ ］”、六角括号“〔 〕”和方头括号“ [ ] ”等。

[dsg001]

> 中文与英文、中文与数字之间添加半角空格。移除多于一个的连续感叹号（比如：「羡慕！！！！」会被格式化为「羡慕！」）。将、、、和。。。。。等不规范的省略号规范化为……。将弯引号 “” ‘’ 替换为直角引号「」『』。将纯数字周围的全角括号替换为半角括号。移除全角标点和英文 /数字之间多余的半角空格。

建议功能：将长段落分割为短段落

[oszlso]

建议增加“自动排版”的能力，比如在线用腾讯文档写下的内容，可以一键加空格...

[xfcy]

可是这样不规范了吧（抱歉有略微的强迫症
我始终觉得中西文之间的空白应该是由样式来控制，而不是加入一个空格，这样改变了原文的内容_(:з」∠)_

[compiler]

多少对性能有影响吧

[jedihy]

直角引号应该是 19 世纪末从日本引入的，从未真正被纳入国家文字标准。

[HeiXiaoBai]

所以在看代码时，字符串“ xxx ”会不会也被替换为直角引号？

[leopoldthecuber]

@HeiXiaoBai 代码中字符串两边的引号是半角的，不会被替换。

[blueset]

既然要自动加空格的话，直接加一个  1/4 em  的空格或者  1/6 em  的空格应该也不错。

[VENTDOUX]

有个 BUG，使用插件后用光标网页选择文字的时候，选择后执行右键会经常少选一个或者直接取消掉，我现在取消掉插件就没有这个问题。

[leopoldthecuber]

@VENTDOUX 已修复，等待谷歌审核。