V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
leopoldthecuber
V2EX  ›  分享创造

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

  •  2
     
  •   leopoldthecuber · 2019-08-30 08:54:31 +08:00 · 8538 次点击
    这是一个创建于 1910 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    相关链接:

    插件作用

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

    比方说 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。

    第 1 条附言  ·  2019-08-30 10:41:49 +08:00

    插件的完整功能如下:

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

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

    49 条回复    2019-09-04 14:02:57 +08:00
    LanAiFaZuo
        1
    LanAiFaZuo  
       2019-08-30 08:56:40 +08:00   ❤️ 1
    举例来说,如果页面上本来有这样一段文字:

    比方说 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
        2
    wangsongyan  
       2019-08-30 08:58:59 +08:00 via iPhone
    @LanAiFaZuo 引号也变了
    bluefountain
        3
    bluefountain  
       2019-08-30 08:59:06 +08:00
    我明白你的插件意思了,就是把引号全自动换成括号是吧。高科技!
    leopoldthecuber
        4
    leopoldthecuber  
    OP
       2019-08-30 08:59:21 +08:00
    @LanAiFaZuo 中英文之间被加上了空格。
    leopoldthecuber
        5
    leopoldthecuber  
    OP
       2019-08-30 09:00:46 +08:00
    插件的完整功能如下:

    - 中文与英文、中文与数字之间添加半角空格
    - 移除多于一个的连续感叹号(比如:「羡慕!!!!」会被格式化为「羡慕!」)
    - 将、、、和。。。。。等不规范的省略号规范化为……
    - 将弯引号 “” ‘’ 替换为直角引号「」『』
    - 将纯数字周围的全角括号替换为半角括号
    - 移除全角标点和英文 /数字之间多余的半角空格
    bluefountain
        6
    bluefountain  
       2019-08-30 09:00:59 +08:00
    @leopoldthecuber 然鹅 LZ 并不知道 V2EX 会自动加空格 XDD
    leopoldthecuber
        7
    leopoldthecuber  
    OP
       2019-08-30 09:02:25 +08:00   ❤️ 1
    @bluefountain 不错,怪不得看不出来变化= =
    slimyy
        8
    slimyy  
       2019-08-30 09:21:19 +08:00
    将弯引号 “” ‘’ 替换为直角引号「」『』


    这个有啥好的? 符合国家标准吗?
    TrembleBeforeMe
        9
    TrembleBeforeMe  
       2019-08-30 09:22:09 +08:00   ❤️ 1
    竖排的直角引号好看在哪儿?为什么很多人对其趋之若鹜
    greatghoul
        10
    greatghoul  
       2019-08-30 09:25:03 +08:00
    同不喜欢直角引号。
    liuxey
        11
    liuxey  
       2019-08-30 09:25:35 +08:00
    没有达到让我想进一步了解的程度
    oszlso
        12
    oszlso  
       2019-08-30 09:27:33 +08:00
    不错,正好有需要
    Spoter
        13
    Spoter  
       2019-08-30 09:29:02 +08:00
    已安装
    luojianxhlxt
        14
    luojianxhlxt  
       2019-08-30 09:40:04 +08:00
    我语文是白学了
    从来不知道我国引号是用「」『』这些玩意儿
    leopoldthecuber
        15
    leopoldthecuber  
    OP
       2019-08-30 09:40:35 +08:00
    @TrembleBeforeMe 不喜欢的话可以在选项里把这一项关掉。所有格式化功能都可以按你的喜好随时打开 /关闭。
    jmc891205
        16
    jmc891205  
       2019-08-30 09:42:53 +08:00   ❤️ 4
    第一次见到有人把直角引号认成括号。。。
    kyuuseiryuu
        17
    kyuuseiryuu  
       2019-08-30 09:46:05 +08:00
    直角引号是竖向书写排版的时候用的吧。
    leopoldthecuber
        18
    leopoldthecuber  
    OP
       2019-08-30 09:50:16 +08:00
    @kyuuseiryuu 还是看个人喜好,确实直排时用得多些。再次声明一下,包括直角引号在内的所有格式化选项都可以按个人口味配置。
    LanAiFaZuo
        19
    LanAiFaZuo  
       2019-08-30 10:03:47 +08:00
    不过话说回来,这个插件可以自动排版格式化文章吗?就是类似把文章里面的各种标签啥的去掉,类似 网络超级编辑工具箱,这个功能。
    PanJiaChen
        20
    PanJiaChen  
       2019-08-30 10:11:58 +08:00
    功能很赞,之前格式化都是放在 VSCODE 里做的。不过有一个小小的建议,chrome 插件能不能增加一个 input 之类的,只格式化一段内容,而非整个页面。经常会有格式化一段内容的场景。
    darmau
        21
    darmau  
       2019-08-30 10:34:45 +08:00 via iPhone   ❤️ 1
    @slimyy 不符合。一些人的自嗨而已
    VENTDOUX
        22
    VENTDOUX  
       2019-08-30 10:36:30 +08:00
    已安装
    leopoldthecuber
        23
    leopoldthecuber  
    OP
       2019-08-30 10:39:50 +08:00
    @PanJiaChen 指的是粘贴一段非当前网页的文本进来,然后对这段文本进行格式化吗?
    dazkarieh
        24
    dazkarieh  
       2019-08-30 11:00:45 +08:00
    已安装,对中英文字排版有洁癖,博客也加了 pangu。之前用过他们的 chrome 插件「为什么你们就是不能加个空格呢?」,嫌弃简陋,一直想找个同类的替代品,楼主这个不错,支持!
    leopoldthecuber
        25
    leopoldthecuber  
    OP
       2019-08-30 11:06:28 +08:00
    @dazkarieh 我也是受了 pangu 的启发
    Felix2Yu
        26
    Felix2Yu  
       2019-08-30 11:12:03 +08:00
    请问能考虑下支持火狐吗
    PanJiaChen
        27
    PanJiaChen  
       2019-08-30 11:44:10 +08:00
    @leopoldthecuber 是的,比如写文档或者干啥的时候。
    leopoldthecuber
        28
    leopoldthecuber  
    OP
       2019-08-30 11:52:27 +08:00
    @PanJiaChen 了解,已加入计划。
    fenx
        29
    fenx  
       2019-08-30 12:04:08 +08:00
    标题有点问题吧,看了下功能这不能叫网页排版「变好看了」,应该是变稍微「规范了」。
    而且在一些口语✍️语境时候很不适合开启这个插件,情绪的表达会不到位。
    leopoldthecuber
        30
    leopoldthecuber  
    OP
       2019-08-30 12:12:27 +08:00
    @fenx 有道理。可能会影响口语化语境中的部分情绪表达(比如这样的感叹号!!!),可以把比如微博、弹幕网站之类的放进黑名单里。
    abmin521
        31
    abmin521  
       2019-08-30 12:31:04 +08:00 via iPhone
    首行缩进呢.....
    code2019
        32
    code2019  
       2019-08-30 12:48:06 +08:00 via iPhone
    @PanJiaChen vue-element-admin 使用者路过
    good1uck
        33
    good1uck  
       2019-08-30 12:56:01 +08:00 via Android
    推荐 Flickar
    efcndi
        34
    efcndi  
       2019-08-30 12:58:02 +08:00   ❤️ 2
    @dazkarieh #24 作为一个有文字洁癖强迫症的人,我是特别厌恶那种手动在中英文之间加空格的行为,每次看到了都忍不住要去删除。本来这玩意属于排版、渲染处理的范畴,就好像 MS Office 自动增大中英文之间的字间距(而不是添加一个空格);但是通过手动添加,就成了内容层面的处理,这里多了不应该存在的东西。

    换作数学语言来描述,一个值为零和一个值为空,虽然对很多人来说,表面上看起来差不多,但实际上二者差了十万八千里。极度厌恶这种“混为一谈”!
    dazkarieh
        35
    dazkarieh  
       2019-08-30 15:18:00 +08:00
    @efcndi #34 我反对在文字创作编辑时手动加间隙,但坚决拥护中英文之间加空隙(包括但不限于空格)隔断。在更智能的通用型排版软件 /方案出现前,我会选择尽量用第三方工具去实现(pangu)或者假装已经实现( chrome 插件)。

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

    这个话题在知乎上已是老生常谈,追溯起来还有 v 站站长 Livid 的一份功劳。
    https://www.zhihu.com/question/19587406
    DaCong
        36
    DaCong  
       2019-08-30 20:13:46 +08:00
    @dazkarieh 确实,这只是一种临时的解决方案。我个人认为,如果排版引擎能够实现在中英文之间加上六分之一或者八分之一空格宽度的空隙,那是最舒服的了。

    这个空隙应当让人觉得有间隔,但是又不会明显地觉察出之间有东西插在其间。
    leopoldthecuber
        37
    leopoldthecuber  
    OP
       2019-08-30 20:17:13 +08:00
    @DaCong iOS 的某些 app 好像会在中英文之间加空隙。
    wql
        38
    wql  
       2019-08-30 20:26:36 +08:00
    @slimyy #8 不符合,我国的国家标准是,当竖排文字时,将弯引号 “” ‘’ 替换为直角引号『』「」。但此方法为台湾省使用。
    yinet
        39
    yinet  
       2019-08-30 21:55:40 +08:00
    引号和括号是作用是不一样的


    4.8 引号

    4.8.1 定义

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

    4.8.2 形式

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


    4.9 括号

    4.9.1 定义

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

    4.9.2 形式

    括号的主要形式是圆括号“( )”,其他形式还有方括号“[ ]”、六角括号“〔 〕”和方头括号“ [ ] ”等。
    dsg001
        40
    dsg001  
       2019-08-30 22:29:13 +08:00
    > 中文与英文、中文与数字之间添加半角空格。移除多于一个的连续感叹号(比如:「羡慕!!!!」会被格式化为「羡慕!」)。将、、、和。。。。。等不规范的省略号规范化为……。将弯引号 “” ‘’ 替换为直角引号「」『』。将纯数字周围的全角括号替换为半角括号。移除全角标点和英文 /数字之间多余的半角空格。

    建议功能:将长段落分割为短段落
    oszlso
        41
    oszlso  
       2019-08-30 23:28:32 +08:00
    建议增加“自动排版”的能力,比如在线用腾讯文档写下的内容,可以一键加空格...
    xfcy
        42
    xfcy  
       2019-08-30 23:41:20 +08:00 via Android
    可是这样不规范了吧(抱歉有略微的强迫症
    我始终觉得中西文之间的空白应该是由样式来控制,而不是加入一个空格,这样改变了原文的内容_(:з」∠)_
    compiler
        43
    compiler  
       2019-08-31 01:04:26 +08:00 via iPhone
    多少对性能有影响吧
    jedihy
        44
    jedihy  
       2019-08-31 06:38:03 +08:00
    直角引号应该是 19 世纪末从日本引入的,从未真正被纳入国家文字标准。
    HeiXiaoBai
        45
    HeiXiaoBai  
       2019-08-31 06:42:10 +08:00 via Android
    所以在看代码时,字符串“ xxx ”会不会也被替换为直角引号?
    leopoldthecuber
        46
    leopoldthecuber  
    OP
       2019-08-31 09:32:38 +08:00
    @HeiXiaoBai 代码中字符串两边的引号是半角的,不会被替换。
    blueset
        47
    blueset  
       2019-08-31 17:06:44 +08:00
    既然要自动加空格的话,直接加一个  1/4 em  的空格或者  1/6 em  的空格应该也不错。
    VENTDOUX
        48
    VENTDOUX  
       2019-09-04 10:42:39 +08:00
    有个 BUG,使用插件后用光标网页选择文字的时候,选择后执行右键会经常少选一个或者直接取消掉,我现在取消掉插件就没有这个问题。
    leopoldthecuber
        49
    leopoldthecuber  
    OP
       2019-09-04 14:02:57 +08:00
    @VENTDOUX 已修复,等待谷歌审核。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1171 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 18:19 · PVG 02:19 · LAX 10:19 · JFK 13:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.