前言
在前端开发中，我们常常需要使用一些简单但重要的 typographic 特性来改善用户阅读体验。除了字体选择和排版技巧外，使用正确的短横线也是其中之一。
在英语书写中，短横线通常用来表示连接词（例如：long-term），而在排版中，我们还需要用到其他一些横线类型，例如 en dash 和 em dash。本文将重点介绍 en dash 的使用，以及如何通过使用 npm 包 typographic-en-dashes，来让我们的网站更具专业感。
什么是 en dash？
en dash（或短横线）是一种长 1/2em 的横线，通常用于表示数字或时间段之间的范围或连接。例如：
- 9:00am–5:30pm
- 2015–2019
- New York–Los Angeles
用 en dash 代替连字符或短划线可以提高排版质量，传达更准确的含义。然而在 HTML 中，如果我们直接输入“-”，则会显示为默认的连字符或短划线，这并不是我们所期望的。
在这种情况下，我们可以使用 typographic-en-dashes 这个 npm 包来解决问题。
如何使用 typographic-en-dashes？
typographic-en-dashes 是一个typographic.js的插件，它可以根据你的设置，将 HTML 中所有的“--”替换为 en dash。
- 安装 typographic 和 typographic-en-dashes
npm install typographic typographic-en-dashes
- 使用 typographic-en-dashes 插件
-- -------------------- ---- ------- ----- ----------- - ----------------------- ----- -------- - --------------------------------- ----- ------- - - ------- -------- ------- ------- -- ----- ---- - --- ----------------------------------- ----- ---- - ---- ---------- --- ----------------- ---------------- ---- ------ ------------------- ----- ------------------ -- ------- ---- --------------- -------------- ---- -----展开代码
在此示例中，我们首先引入 typographic 和 typographic-en-dashes，然后通过 use() 方法来使用 enDashes 插件。配置项 options 允许我们将英语作为我们的本地化语言，并设定引号类型。
最后，我们应用插件，将 HTML 中包含的“--”替换为 en dash，并将其存储在 text 变量中。最后，我们使用正则表达式将所有 en dash 替换为默认的短划线。
结论
使用正确的 typographic 符号可以大大提高我们网站的排版质量，增加用户对我们的印象。typographic-en-dashes 是一个简单但又实用的 npm 包，可以帮助我们在网站中使用 en dash，获得更好的设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/73580
