中英文混排

需解决问题

  1. 英文单词首字母大写(如果是一个句子则只需要第一个单词首字母大写)
  2. 中英文、数字和中文之间要留有空格
  3. 正文、开头语、结束语、代码块要有一定的格式

使用的工具

  1. 新媒体管家 plus
  2. Markdown here
  3. 小胡子哥的 GitHub 工具
  4. 中英文混排的脚本-shell(设置 minor_space)
  5. Word 自带的工具
  6. Dustland 的 GitHub 工具 text-autospace.js
  7. Martinwu42 的 GitHub 工具 Typeset
  8. Ethantw 的 GitHub 工具 Han
  9. Chrome 的插件:空格之神
  10. Chrome 的插件:pangu.js

基础知识

文字间距:letter-spacing
行间距:line height
首行缩进:text-indent
字号:font-size
颜色:color

em 指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px

一级标题 18px、二级标题 16px、三级标题 15px,颜色 #F0961C

h1, h2, h3 {
  margin: 1.3em 0 1em;
  color:#F0961C;
  padding: 0;
  font-weight: bold;
}

h1 {
  font-size: 18px;
}

h2 {
  font-size: 16px;
}

h3 {
  font-size: 15px;
}

正文字号、项目编号之后的字号都是 15px,颜色 #555555

/* Space paragraphs in a list the same as the list itself. */
li p {
  /* Needs !important to override rule above. */
  margin: 0.5em 0 !important;
  font-size: 15px;
  color: #555555;
}

代码块里的字号 15px,颜色 #555555

table, pre, dl, blockquote, q, ul, ol {
  margin: 1.2em 0;
  font-size: 15px;
  color: #555555;
}

文字间距 1.5、行间距 1.75

emmmm,怎么调整呢?

正文的加粗字 颜色 #AB1942

strong, b{
  color: #AB1942;
}

小技巧

Word 自动抽取所有英文单词

Ctrl+F 查找及替换-更多-特殊格式-任意字母-阅读突出显示-选择全部突出显示

Word 自动更正英文的第一个字母大写

方法一:Office 按钮-校对-自动更正-去掉「句首字母大写」的 √
方法二:全选文字-Shift F3 可以让英文在首字母大写、全大写、全小写之间快速切换

Daft-auto-spacing

项目地址:https://github.com/liaoyuqin/daft-auto-spacing
工具描述:Plain Text 场景下,能在所有的汉子与拉丁字母之间添加一个空格。原本已经有空格的不会再添加额外的空格。

输入法自带中英文输入空格

MAC 端 百度输入法的设置里,可以勾选「在中文与西文词加入空格」
PC 端 搜狗输入法,菜单点击「英文输入」,进入英文输入状态后,输入任何单词,都会自动空格。

用 shell 在中英文间添加空格

要求:ABC中文,变为,ABC 中文,而且中文要包括全角的标点符号。
方法一:mac Perl,echo ABC 中文 | sed's/[A-Za-z]+/&/'
方法二:mac bash,echo ABC中文| sed -E's/[A-Za-z]+/&/'


补充观点

  1. 中英文混排时,中文字符与相邻的英文字符间需要留一定宽度的“空白”,但不是“空格”。这个“空白”应该由排版软件或者浏览器渲染引擎进行优化,而不是用空格符代替 @cdfmr
  2. 真正在意 Typography 的人会加上 1/4 空格符号。@JamesRuan (补充:InDesign 的默认是何止是 1/4 的全角空格宽度,遵从 JIS,约等于一个半角空格。你说的 1/4 空格指的应该是 InDesign 的默认设置,不过你弄混淆了空格的全角半角了。@Daniel65536)
  3. 试过 han.js 的汉拉间隙后还是感觉加空格更实在,不管是手动还是自动。@seki
  4. DesiringClick 曾有过较严肃的讨论:避免使用全形文字与定宽字体,他们并不适合作为文章阅读中使用;阿拉伯数字与符号等视同英文处理。@XerWangerRer
  5. 加空格不对,它违反了内容与样式分离的原则,中英文间距属于样式范畴,但空格是内容,是可被读取为字符的。用 Javascript 完全能查找文章中的中英文并加上间距,说明这是可自动化的。当 HTML标准和浏览器支持更多的文字排版样式后,中英文间距根本不是个问题。@pockry
  6. 实际上中英文之间的间隔本应该交给排版软件来做,让写作者自己手动处理并不是优雅的结果,而是一种无奈之举吧。@mortal

参考资料

@2017-11-28 14:03
Comments
Write a Comment
  • 个人认为中英文之间的空格是应该在输入的时候就录入的,这是两种不同的语言,中文和英文之间就应该如同英文单词之间要空格一样。

    至少目前中文的技术文档基本都都遵守这个约定的。

    PS:使用正则表达式很容易能够在英文和中文之间插入空格。

    • @依韵 正则表达式 我还不熟练 QAQ,另外你说的输入时就要有空格 的确是一种解决方案。但这个场景是我要将拿到的文本变为有空格的,不属于输入阶段。另外 line-height 和 letter-spacing 不敢随意设置。不知道为什么放到微信公众号后台时就不行了,邮件的文本显示都是好的。微信公众号后台有毒~

  • 文字间距 1.5、行间距 1.75

    行间距是行高line-height

    文字间距letter-spacing

  • 我的想法很依韵正好相反,我觉得空格跟间隔是不同的,空格是字符,间隔是空间,意义不同。排版问题应该由显示文章的硬件进行渲染,而不是让输入者担心排版问题 :)