I’m an avid NPR listener also follow a number of their programs and people on Twitter. I really dig their [quotable](https://github.com/nprapps/quotable) tweets. Here’s a sample of a recent one:
Minn. state senators cannot look other senators in the eye during floor debate. @ailsachang http://t.co/SfQBq4yyHQ pic.twitter.com/DNHGEiVA9j
— NPR News (@nprnews) May 8, 2015
I asked @brianboyer & @alykat (two member of the _awesome_ NPR Visuals team) if they had a workflow for this (they publish quite a bit of open source tools) and, well [of course they did](https://twitter.com/hrbrmstr/status/596656939720962048).
After poking around a bit, I determined that the workflow would be great for something like NPR but was a bit overkill for me and also did not meet all of my requirements. I really only needed something that would:
– work from the command-line (on OS X)
– take a JSON file for the quote
– generate an SVG (for blogging) and PNG (for tweeting)
Thus, [quotebox](http://github.com/hrbrmstr/quotebox) was born.
For the time being, `quotebox` is a python script that lets you pass in a JSON config file with quote components and spits out some files to use in blog posts & tweets. I can see it morphing into more, but for now you can create a quote file like:
{ "quote" : "Making these quotes by hand is fine & NPR Visuals web app is cool, but this has some advantages, too.", "source" : "Data-Driven Security co-author Bob Rudis on making “NPR-like quoteboxes” at the command-line.", "logo" : "ddsec.png" }
which will generate:
or (SVG version):
The script auto-adds “smart” quotes and an em-dash plus base64 encodes the logo file to a data URI so you can easily use the SVG file without needing to bring along the associated logo asset. The SVG itself has a couple (at least to me) interesting components. First, it uses the [Lato](https://www.google.com/fonts/specimen/Lato) font from Google Fonts via `defs`:
<defs> <style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lato:300,900');</style> </defs>
It then uses two `foreignObject` tags for the main quote and the attribution line. Here’s an example:
<foreignObject x="25" y="25" width="590" height="165"> <body xmlns="http://www.w3.org/1999/xhtml" style="background: white; font-family: Lato; font-weight:900; font-stretch:normal; font-size:36px; line-height:36px; text-indent:-16px; margin-left:20px; color:#333333"> <p>“Making these quotes by hand is fine & NPR Visuals web app is cool, but this has some advantages, too.”</p> </body> </foreignObject>
Like most SVG elements, you have full precision as to how you place and size the `foreignObject` and this object contains XHTML, so all text or graphics in them can be fully styled. Not every browser or command-line rendering engine supports this, but the latest Chrome & Safari browsers do along with the >=2.0.0 of [phantomjs](http://phantomjs.org/).
Once the SVG is built, the script uses phantomjs to render the resultant png file. You now have two assets (SVG & png) that can be used wherever you like, but posting it as a Twitter image post will require the use of png.
### Requirements & Usage
You’ll need python, [Pillow](https://python-pillow.github.io/) and [phantomjs](http://phantomjs.org/) to run the script and just need to execute
python quotebox.py test.json
to generate `test.svg` and `test.png`. On OS X I was using
python quotebox.py test.json && open test.svg && open test.png
to test out the image generation & conversion.
Note that many (most?) folks should use the NPR Visuals [quotable](https://github.com/nprapps/quotable) instead of this since it has full workflow management. This script was created primarily to oversimplify local usage (I don’t work in a newsroom) and play with SVG.
The python is not bullet proof (no error checking, lack of use of tempfiles/dirs) but it’s a decent basic foundation.
### Future work
There will definitely be command line switches for some options (quotes or no quotes) and possibly an extension to the JSON config file for fonts and colors. I’ll think supporting grabbing a logo from a URL is needed and automagic resizing to a series of constraints. I can also envision spinning up a quotebox app on Heroku or Google Apps and bridging it to a bookmarklet, but fork away and PR as you see fit. The creativity & ingenuity of the community knows no bounds.
