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!
I wrote up a codepen that grabs sections of words to create a sort of text encoding/decoding effect here: http://codepen.io/Scientifik/pen/NAyjpa I’m sure it wouldn’t be that hard to add a highlight-color class to each section.
A while ago I did something similar for a dev challenge at work: give a certain amount of words the same color based on total sentence length, go back and forth in these colors (so color 1, 2, 3, 2, 1, 2) and start with color 1 at the beginning of a sentence. http://codepen.io/tomschalken/pen/RoZzMe
Thank you so much for this blog.
very clearly mentioned.
I love this. It’s a great visual tool for content writers.
Also, with a tiny little extra bit in that bookmarklet you can clean up the extra full stops dotted around the place:
http://codepen.io/fatmedia/pen/gLGqYr
I wanted to get the look back stuff working as I think that’s quite an important part of it (and not replicated well in any of the versions posted). It probably won’t cover many edge-cases but I think it covers a few.
Here’s a version that does the ‘lots of short sentences’ check and sets the whole section in red when hit (and some end of line character checking for things like ‘:’).
http://codepen.io/fatmedia/pen/QGqoGo
I ended up creating two constructors, one that parses the paragraph into an array of sentences, and another that adds the wrapper to the sentence based on its length.
http://codepen.io/alexstandiford/pen/LbOpOy
I came up with a quick one using React. http://codepen.io/anon/pen/KNyaPr?editors=0010
Nice visualisation. But i.m.h.o not useable for real world situations. Splitting a text in sentences can get quite difficult. For example there are more delimiters for a sentence than a dot. Examples are ? ! . And how to deal with abbreviations like e. g.
I was working on a small test project where I needed splitting sentences. I ended in natural language processing when going further to multilanguage situations.
I don’t want to have to look at
var
insideif
in the very first pen and other js-beginners shouldn’t see that too. (http://stackoverflow.com/a/1162756)http://codepen.io/anon/pen/YpYLNL?editors=0010