句子长度着色

我认为我和许多其他人一样，对这条推文产生了同样的“哇哦，太酷了”的反应。

句子的艺术。迷人 pic.twitter.com/K91GEZTnKm

— Lucy Foulkes (@lfoulkesy) 2016年3月30日

当然，优秀的写作不仅仅是句子长度的多样性，但这是一个极好的可视化，说明了一个极好的观点。能够在我们的写作中看到这种东西，并在编辑时按需查看，并不会有任何坏处。

在 发布推文表示我不确定如何最好地处理这个问题后，很多人纷纷加入进来，分享了他们对此的看法。

---

Dave 在 一条推文中尝试了一下。他的想法本质上是

1. 循环遍历所有段落。
2. 通过在句号处分割整个字符串来创建一个句子数组。
3. 将每个句子包装在一个 span 中，并使用一个数据属性来表示该句子中有多少个单词。

然后可以在 CSS 选择器中使用这些数据属性来进行着色。这个想法在编写时并没有完全奏效，但我能够将这个想法扩展成一个可行的概念，尽管稍微冗长了一些。

查看 Chris Coyier 的 CodePen 上的 句子着色器 (@chriscoyier) 在 CodePen 上。

请注意，此演示

• 几乎没有考虑任何边缘情况。请注意那里连字符单词的失败。诸如“Mrs. Robinson”之类的词将是此演示未处理的明显边缘情况。
• 效率不高。

---

在我们继续之前，有人多次指出，那条推文中显示的 UI 非常像 Hemmingway App。

确实如此。我想知道它是否是一种隐藏功能或其他什么？我无法找到任何在其中四处查看的句子长度着色器功能。不过，它以有用的方式突出显示了其他内容。

说到出于有用的其他目的突出显示句子，Tone Analyzer 正在进行一项实验。

还有一个 Angular JS 库 可用于对任意长度的文本进行着色。

---

Pim Derks 创建了一个实际的书签 来完成这项工作！非常酷。

我将在这里发布以备后用

javascript:(function()%7Bvar%20colors%20%3D%20%5B'%23faf5cb'%2C%20'%23fcd2fa'%2C%20'%23c7f4c9'%2C%20'%23a7f3f1'%5D%3B%5B%5D.slice.apply(document.querySelectorAll('p%2C%20dt%2C%20dd%2Cli')).forEach(function(n)%7Bvar%20s%20%3D%20n.innerHTML.split('.%20')%3Bs.forEach(function(s)%7Bvar%20words%20%3D%20s.split('%20')%2Clength%20%3D%20words.length%3B%7D)%3Bvar%20r%20%3D%20''%3Bs.map(function(s)%7Bvar%20l%20%3D%20s.split(%22%20%22).length%2C%20c%3Bswitch(l)%7Bcase%201%3Acase%202%3Ac%20%3D%20colors%5B0%5D%3Bbreak%3Bcase%203%3Acase%204%3Acase%205%3Acase%206%3Ac%20%3D%20colors%5B1%5D%3Bbreak%3Bcase%207%3Acase%208%3Acase%209%3Acase%2010%3Acase%2011%3Acase%2012%3Ac%20%3D%20colors%5B2%5D%3Bbreak%3Bdefault%3Ac%20%3D%20colors%5B3%5D%3Bbreak%3B%7Dr%20%2B%3D%20'%3Cspan%20style%3D%22background-color%3A'%20%2B%20c%20%2B%20'%22%3E'%20%2B%20s%20%2B%20'.%20%3C%2Fspan%3E'%3B%7D)%3Bn.innerHTML%20%3D%20r%3B%7D)%7D)()

我能够使其工作

我还取消了 URL 编码，并将其放在我的 Pen 的一个分支中，以便您可以更轻松地查看代码（有一些小错误，例如在末尾重复句号）

查看 Chris Coyier 的 CodePen 上的 句子着色器 (@chriscoyier) 在 CodePen 上。

---

Brandon Brule 尝试了一下

查看 Brandon Brule 的 CodePen 上的 突出显示句子长度 (@brandonbrule) 在 CodePen 上。

我确实喜欢在 JavaScript 中应用样式或范围特定的类。[data-wc] 方法很难，因为您必须非常明确。您 无法真正执行 [data-wc>10]。

---

Antoinette Janus 也做了一个非常棒的版本。

查看 Antoinette Janus 的 CodePen 上的 文本荧光笔 (@acjdesigns) 在 CodePen 上。

---

Jonathan Williamson 创建了一个带有文本区域的演示，着色是分开的，并在键入时更新。

查看 Jonathan Williamson 的 CodePen 上的 Gary Provost (@jon-w1) 在 CodePen 上。

---

最初的推文都是关于句子长度变化的美感。写作感觉和阅读时的美感。它实际上与颜色或可视化无关，这仅仅是为了解释信息。但颜色也挺漂亮的。

在另一项先前艺术中，Sanne Peters 做了一些 可视化的诗歌，将单词映射到颜色，以便您可以看到它们并阅读它们。

---

还要记住，我们对“帮助文本的书签”并不陌生。几年前，我们处理了一个可以帮助您了解可读性理想行长 应该落在何处的书签。

查看 Chris Coyier 的 CodePen 上的 书签，使 45 到 75 个字符之间的文本变为红色。 (@chriscoyier) 在 CodePen 上。

---

这就是活跃的推文线程带来的好处！