Sentence Length Colorization
I think I had the same wooahhhhh coool reaction as so many others did when this tweet was going around:
The art of sentence length. Swoon pic.twitter.com/K91GEZTnKm
— Lucy Foulkes (@lfoulkesy) March 30, 2016
Certainly, good writing is more than just varied sentence length, but this is a fantastic visualization that makes an excellent point. It wouldn’t hurt to be able to see this kind of thing in our own writing, in an on-demand fashion while editing.
After tweeting that I wasn’t quite sure how best to go about it, a bunch of folks chimed in with their takes on how they would do it.
Dave took a crack at it within a single tweet. His idea is essentially:
- Loop through all paragraphs.
- Make an array of sentences by splitting the whole string on periods.
- Wrap each sentence in a span with a data attribute of how many words in that sentence.
The data attributes could then be used in CSS selectors to colorize. The idea didn’t quite work as written, but I was able to extrapolate that idea into a working concept, if slightly more verbose:
See the Pen Sentence Colorizer by Chris Coyier (@chriscoyier) on CodePen.
Note that this demo:
- Doesn’t take into account almost any edge case. Note the hyphenated word fail there. Things like “Mrs. Robinson” would be an obvious edge case this doesn’t deal with.
- Isn’t particularly efficient.
Before we get too far here, It was pointed out several times to me that the UI shown in that tweet looks an awful lot like Hemmingway App.
Indeed it does. I wonder if it’s some kind of hidden feature or something? I wasn’t able to find any sentence length colorizer feature poking around in there a bit. It highlights other things in useful ways though.
And speaking of highlighting sentences for useful alterior purposes, Tone Analyzer is an experiment to do that:
There is also an Angular JS lib that can be used to colorize arbitrary lengths of text:
Pim Derks created an actual bookmarklet to do the job! Very cool.
I’ll post here for posterity:
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)()I was able to get it to work:
I also un-URL Encoded it, and dropped it here in a fork of my Pen so you can take a look at the code more easily (has some minor bugs like doubling up periods at the end):
See the Pen Sentence Colorizer by Chris Coyier (@chriscoyier) on CodePen.
Brandon Brule took a crack at it:
See the Pen Highlight sentence length by Brandon Brule (@brandonbrule) on CodePen.
I do like applying either styling or range-specific classes in JavaScript. The [data-wc] approach was hard because you have to be very explicit. You can’t really do [data-wc>10].
Antoinette Janus has a nicely-done take as well:
See the Pen Text Highlighter by Antoinette Janus (@acjdesigns) on CodePen.
Jonathan Williamson created a demo with a textarea and the colorization is separate and updated as-you-type:
See the Pen Gary Provost by Jonathan Williamson (@jon-w1) on CodePen.
The original tweet was all about the beauty of varied sentence length. Beauty in how the writing feels and reads. It wasn’t really about the colors or visualization of it, that just served to explain the message. But the colors were kinda beautiful too.
In another bit of prior art here, Sanne Peters did some visualized poems that maps words to colors so you can see them as well as read them:
Also remember we’re no stranger to Boomarklets That Help With Text™. A few years ago we tackled one that helped show you where an ideal line length for readability should land:
See the Pen Bookmarklet to make the text between 45 and 75 characters turn red. by Chris Coyier (@chriscoyier) on CodePen.
And that is what an active tweet thread can bring!
Sentence Length Colorization is a post from CSS-Tricks
