Text junkies, this one's for you.

xScope's Text tool is a general purpose tool to search, examine and format text for software and web development. Unlike other tools which assume you're going to be using text in a traditional publishing environment, this sophisticated tool gives you information specific to development environments.

A Picture's Worth a Thousand Words

Click on one of the highlighted links below and you'll see the text in the tool.

Don't be afraid to play around with text that's put in the text field for you, either. You can just click on the link again to get the original value back.

Handling Input

At the top of the window there's an input field that prompts Enter text for a character search… This field can be used to either search or decipher text. To begin, just enter am into the text field.

In the grid of characters below, you'll see all the Unicode characters with a name that begins with "am". The characters that are dimmed are ones that don't exist in the currently selected font. You can uncheck Dim substitutes in the options panel if you'd prefer to view them at full brightness.

Continue typing until the input field reads ampersand. Yes, there really are seven different ampersand characters amongst the 110,000 Unicode code points!

Deciphering Text

Now append a space character so that the input field shows ampersand . The input field has automatically switched from search mode into decipher mode. In decipher mode, the characters for the text in the input field are shown in the character grid.

So what can be deciphered? Lots!

Try setting the input field to %31%32%33. You'll see "123" in the character grid because the input was interpreted as a URL encoded data. Now try 0xF0,0x9f,0x8d,0x94 and you'll see a 🍔 because those are the UTF-8 bytes for that Emoji code point. Note also that the input is case insensitive.

Here is a complete list of what can be extracted from the input field:

In addition, malformed input is detected and corrected. Have you ever seen something like this on a web page?

Björn spent €100 in Nîmes for a caçòla.

This happens because UTF-8 character data is displayed on a page that uses the default Windows-1252 character encoding. The text tool checks the encoding of the input and performs a conversion when it's not UTF-8. When you check the output field, you'll see that "Björn spent €100 in Nîmes for a caçòla."

The ability to extract Unicode data from NSData output is very handy when working with REST APIs that return NSData. From the Xcode debugger, you can issue the command po myConnectionData and paste the result directly into the Text tool:

<7b226e61 6d65223a 2243484f 434b222c 22697341 7765736f 6d65223a 74727565 7d>

To give you an idea of the flexibility and power of the input interpretation, here is a sample that shows how some of other character formats can be intermixed and parsed:

&Tau;&Eta;&Epsilon;&#160;quick&#xa0;brown U+1F43a 0x20,0x006a,0x75 0x6d 0x70 ed over the lazy \U0001d4ed\u24de\xe2\x92\xa2

They never taught you that at typing school.

Formatting Output

Once you've filled the character grid with data, you may want to export the data in a different format. By default, the output format is set to String which produces data that can be used in any app that accepts text. But when you're dealing with text, it's often neccessary to put it in another format. Here is a complete list of the formats that can be produced in the output field:

To select the format you'd like to use, use the pop-up menu at the bottom of the Text Options panel. For example, if you select Named HTML Entity for the example above, you'll see the input data converted to a format that's perfect for an HTML document:

&Tau;&Eta;&Epsilon;&nbsp;quick&nbsp;brown &#x1f43a; jumped over the lazy &#x1d4ed;&#x24de;&#x24a2;

If you need those same characters for a REST endpoint, you can use the URL Encoding format and get:

%CE%A4%CE%97%CE%95%C2%A0quick%C2%A0brown%20%F0%9F%90%BA%20jumped%20over%20the%20lazy%20%F0%9D%93%AD%E2%93%9E%E2%92%A2

When you just need one character from the grid, you can select it and use ⌘C: the currently selected format will be used for the text that gets copied to the clipboard.

Glyph Layout

The glyph layout view at the top of the options panel gives you an in-depth look at the currently selected character.

The pop-up menu lets you select the font used to render the characters in the grid and layout area. Any currently installed font can be used: use the Text panel in Preferences to select which fonts you want to see in this menu. The preference panel also has presets for the kinds of work you're doing: it's easy to select the default fonts for the Web, UI, iOS and Mac platforms.

The default glyph layout (left) and extra information when mouse is hovering over the view (right)

By default, the glyph layout shows the character without any adornments: it's designed to let you view the glyph with a minimum of distraction.

As you hover over the view, you'll see the font name and a dotted line for baseline. The numbers at the bottom of the view show how much space the character will require on screen. The header at the top of the view shows the name of the font used to render the glyph (which, due to font substitution, may not be the same one as you selected in the pop-up menu.)

The layout, glyph and web modes for the layout view

You can click on the glyph layout to cycle through various measurements: layout, glyph and web. Each of these views is tailored for how you're using the character. The layout view puts the character in the context of a line, the glyph view shows information about the character itself, and the web view shows how that character will fit on a web page.

The pixel values are the font metrics for the glyph at the currently selected point size. The header for each view also changes to show the Postscript font name, the glyph name and the HTML entity name. The measurement at the bottom of the view shows either the size of the character in a line or the size of the stroked glyph.

Character Palette

The character palette is a temporary holding place for characters. If you find yourself using or &frac12; over and over, then the palette is a great place to keep track of the character.

You can add any character from the grid to the palette by double-clicking. Similarly, you can double-click on a character in the palette to append it to the input field.

If you want to put a character from the palette onto the clipboard, you can select it and use ⌘C to copy it in the currently selected format. Characters from the grid and palette can also be added to any text-based application with drag and drop.

To remove a character from the palette, just select it and press the Delete key.

Character Info

Imagine you come across an instance of (U+1434) and have no idea what it is. The Text tool can help you out: just select the character and click on the round info icon in the lower-right corner. A pop-up window will appear with additional information.

You'll see that it's a part of the Unified Canadian Aboriginal Syllabics code block and that there's a note about it being Inuktitut. If you're curious enough, you'll copy that text and use it for a search where you'll learn that it's one of the principal Inuit languages of Canada. And most importantly, you now know there's more than one POO in Unicode. 😃

The character info can also be helpful for characters you already know about. For example, if you're using &middot; to represent multiplication, the info view will let you know that U+22C5 (&sdot;) is a better choice.

The info window updates as you select different characters in the grid. To close the pop-up, click on its icon again.

Related Characters

Next to the character info, is a related character pop-up. This view shows characters that are related to the one that's currently selected. For example, if you show related characters for A you'll see variations with diacritics (like Å) as well ligatures and glyphs (like and ).

Any of the characters in this view can be double-clicked and added to the character palette. They can also be dragged as text to another app or the input field.

To close the pop-up window, click on the related characters icon again.

Advanced Searches

The search feature in the input field is designed to be as simple as possible. As you become comfortable with the feature, you'll probably want to do more complex searches.

To help get you started, you can use some canned searches from the menu that's presented when you click on the magnifying glass icon in the upper-right corner of the Text window. These searches will help you find commonly used characters divided into categories for HTML entities, languages, and symbols.

The advanced searches begin with a single character that's triggers a specific type of search:

Format Description
?text Search for character names matching text
&text Search for HTML entities matching text
#nnn Show code block nnn
#text Search code block names for text
/path Show file at path

By default, searches only work with one word. But if you're looking for something with multiple words, like "LATIN CAPITAL", you can accomplish it by prefixing the search with a question mark. For example, try ?latin capital and compare it to latin capital.

Sometimes you may not want the input interpretation that's performed automatically. For example, you can see the characters in &amp; by using a search of =&amp; instead of &amp;.

Speaking of entities, you can search for them by prefixing the search with an ampersand. If you're like me and never able to remember if it's &copy; or &copyright;, just do a search for &cop. If you want to see all entities with names, just enter a single & in the input field.,

The hash prefix is the most powerful search prefix. It lets you treat the 110,000 Unicode code points as if they had a hash tag. For example, if you enter the search #latin, over 1,000 characters that contain Latin in the code block name (including supplements and extensions) will be displayed. Which sounds like a lot until you realize there are over 76,000 Chinese, Japanese and Korean characters (#cjk),

If you know a code block by number, you can also do a search for that. For example, #25 will return all the beautiful Tamil characters.

Finally, the Text tool can open files that contain Unicode text. For example, if you enter /User Guides And Information/ENERGY STAR.pdf into the input field, the characters in the PDF file will be loaded and displayed in the character grid. Only files that are 100KB or smaller will be displayed. Note also that no characters in the file are deciphered.

The file mode is very handy for doing quick conversions of file data. For example, imagine that you have a file in /tmp/configurationhell.xml that you need to put on the web. You can load it into the character grid using drag and drop, then select Named HTML Entity in the format menu so all the characters like "<" are converted to "&lt;". Then it's just a matter of pasting the result into your HTML document and uploading.

Shell Integration

Much of the text that we deal with comes from the command line. xScope's text tool can be configured to display standard input.

Create a shell script called xscope wherever you keep your utility scripts. The contents of the file should be:

#!/bin/sh
 
parameter=""
if [ -z "$1" ]; then
	echo "usage: `basename $0` [  | - ]"
elif [ "$1" = "-" ]; then
	parameter=`cat /dev/stdin`
else
	parameter="$*"
fi
 
if [ ! -z "$parameter" ]; then
	open "xscope:text=$parameter"
fi

With this script installed, you can now do things like:

$ date | xscope -
$ cat /tmp/tickling.log | xscope -
$ xscope something phishy about go𝗈gle.com
$ xscope $'\xf0\x9f\x8d\x94'

Other Features

The controls to the left of the input and output fields let you paste and copy the entire contents of the fields. This is handy if you're dealing with a large amount of text.

The input field has full support for Undo (⌘Z) and Redo (⇧⌘Z). If you've been viewing the examples in this tutorial, try using the keys to go back and forward through the search history.

Drag and drop is fully supported. Both the input field and character grid can be used as drop targets: a drag to the input field gets deciphered, one to the character grid does not. Characters can be dragged out of the character grid or palette after being selected (the current setting in the format menu is used at the destination.)

The foreground and background colors for the character grid and glyph layout view can be adjusted. When you're working with specific colors for an app or website, this can be helpful when selecting fonts and/or characters.

Font Awesome Support

Beginning with the 4.1 release, the Text tool fully supports Font Awesome. This font gives you scalable vector icons that can be customized using CSS. The glyphs can also be used as icons in documents and native apps.

To get started, download the font and install it on your Mac. Then restart xScope and open the Text panel in Preferences to enable the new FontAwesome Regular font. To view the glyphs in the font, select the same font in the Text tool window and click on the magnifying glass icon to select Symbols > Font Awesome.

If you want to search for these glyphs, you'll need to import a description of each icon. These descriptions are contained in a file called icons.yml. It can be downloaded from the GitHub repository.

Once you have the icons.yml file on your Mac, you can load it using the Import Font Awesome button at the bottom of the Text preferences panel. After the import finishes, you can search for the icons by name.

When you search, you'll get different results depending on whether or not you use the fa- prefix at the beginning. A search for camera will return all camera glyphs while a search for fa-camera will only show ones in Font Awesome. A search for fa- also shows all available icons.

Note that the Font Awesome name is added as an alias to each glyph. The name appears in the Info pop-up window under Aliases (and can be copied and pasted into your development environment.) Similarly, the output format can be set to Aliases, making it easy to copy/paste or drag and drop selected icons into your code.