Circling the drain with Drafts

A Mac-only solution isn’t very satisfying anymore, so last night’s post on using Services to create ⓒⓘⓡⓒⓛⓔⓓ, pǝddılɟ, and s̸t̸r̸u̸c̸k̸ ̸t̸h̸o̸u̸g̸h̸ text felt incomplete. Combining the logic of the Python conversion scripts in that post with what I learned about using JavaScript in Drafts 4, I made three new keyboard scripts to convert selected characters in Drafts.

Each script works pretty much as you’d expect. Type in some normal text, select the portion you want converted, and tap the appropriate button. Voila!

Drafts encircler

The script that does the encircling is this:

javascript:
 1:  function encircle(s) {
 2:    var pchars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 3:      , cchars = "ⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙⓚⓛⓜⓝⓞⓟⓠⓡⓢⓣⓤⓥⓦⓧⓨⓩⒶⒷⒸⒹⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉⓊⓋⓌⓍⓎⓏ⓪①②③④⑤⑥⑦⑧⑨"
 4:      , count  = pchars.length
 5:      , regex  = new RegExp('[' + pchars + ']', 'g')
 6:      , trans  = {}
 7:      , lookup = function(c) { return trans[c] || c; };
 8:    
 9:    for (var i=0; i

The structure of the encircle function is pretty much stolen wholesale from one of the answers to this Stack Overflow question. It takes advantage of a feature of JavaScript familiar to old Perl programmers: the replace method can take a function as the replacement argument. That function, lookup, is defined in Line 7 and the trans object it uses to replace characters is built in Lines 9–11. The regular expression that serves as the first argument to replace is built in Line 5 from the string of all convertible plain characters. Line 16 gets the selected text from the draft, converts it, and replaces the selection with the converted text.

The key that applies this script is built by tapping the pencil icon at the end of Drafts’ custom key strip, tapping the + button to add a new key, choosing the Script option, and then entering the label, name, and script. When you’re done, a new key with that label will appear in the strip.1

Creating the Encircle script key

The flipping script is built the same way.

javascript:
 1:  function flip(s) {
 2:    var pchars = "abcdefghijklmnopqrstuvwxyz,.?!'(){}[]"
 3:      , fchars = "ɐqɔpǝɟƃɥıɾʞlɯuodbɹsʇnʌʍxʎz'˙¿¡,)(}{]["
 4:      , count  = pchars.length
 5:      , regex  = new RegExp('[' + pchars.substring(0, count-1) + '\]]', 'g')
 6:      , trans  = {}
 7:      , t      = s.toLowerCase()
 8:      , lookup = function(c) { return trans[c] || c; };
 9:    
10:    for (var i=0; i

Apart from the two strings that define the conversion, there are a few other differences between this script and the encircler:

  1. The regular expression in Line 5 had to be handled more carefully. The closing bracket character had to be escaped (double escaped, actually) so it would close off the character class prematurely.
  2. Because there aren’t good upside-down versions of all the capital letters, everything is converted to lowercase first. That’s done in Line 7.
  3. To look decent in the flipped condition, the order of the letters has to be reversed. That’s done by creating an array of characters in Line 13, reversing it in Line 14, and then joining them back together in Line 15.

Finally, there’s the strikethrough script.

javascript:
 1:  function strikeout(unstruck) {
 2:    var s = String.fromCharCode(824)
 3:      , a = unstruck.split('');
 4:    if (a.length > 0) {
 5:      return a.join(s) + s;
 6:    }
 7:    else {
 8:      return '';
 9:    }
10:  }
11:  
12:  setSelectedText(strikeout(getSelectedText()))

This one doesn’t do any replacing, because there aren’t “stuck out” versions of all the letters. Instead, it puts the COMBINING LONG SOLIDUS OVERLAY character (decimal 824, hex 0338) after every character in the string. The combination appears as a character with a diagonal line through it.

It should be easy enough to use these scripts as guidelines for creating other conversions. sᴍᴀʟʟ ᴄᴀᴘs, for example, seems like something Than Tibbetts should be all over.

Because these key definitions seem fairly simple and robust, I’ve uploaded them to the Keyboard Extensions section of the Drafts Actions Directory. You can install them from there if you don’t want to go through the character-building2 exercise of making them yourself.


  1. Yes, one screenshot shows the label as Ⓐ, and the other shows it as ⓐ. I changed the name between screenshots and didn’t feel like going back and redoing the earlier one. ↩

  2. I have no shame. ↩

  • By n Dr. Drangn
  • Translator

  • Recent Articles

    • The FCC says that 50% of wireless 911 calls are butt-dials
    • Huawei Ascend Mate 7 Hands On (Photos)
    • Oppo VR headset might lunch with Oppo N3 on October 29
    • Who To Follow On Twitter, According To Marc Andreessen
    • Fitbit Surge is a fitness ‘superwatch’ for $250
    • 2014 Camera & Photo Gear Gift Guide
    • Social Gaming points to a Changing Scene
    • Field hockey team’s offense falters in rare scoreless affair
    • Conference woes persist for winless women’s soccer squad
    • Bears sweep weekend with strong five-set wins
    • Hrithik Roshan’s ‘Bang Bang’ creates Box Office Record
    • ASCIIfying
    • So Long #Gamergate. What Did You Teach Us?
    • Talon for Twitter with Material Design available for Android 5.0 Lollipop
    • Weekly Nikon news flash #285
    • When my Android Phone will get Android Lollipop Update?
    • Microsoft fitness band to launch in the coming weeks
    • This Weekend in the App Store — the best free apps, new apps and app updates
    • BYD outs world’s largest battery electric vehicle
    • How I was arrested by the authorities for over optioning my site