TYPOGRAPHY OF CODE

David Durkee1 —  2010 October 26


Presented at the Adobe MAX 2010 conference held at Nokia Theatre L.A. Live.

“David presented some good ideas on how to advance from the current code editors that use same-
size monospace fonts to use richer editors that use fonts, color and sizing to make it easier to navigate
the code. He showed a prototype called DLEdit and while a slow start, this made more and more sense
as he progressed through his demo.” — Jens Brynildsen2

Below is a transcript of the presentation (edited for clarity and with descriptive annotations added).

Displayed on-screen: the BBEdit text editor application with


Pictured: typographic visual display of source code as seen in
 an ActionScript source code file open in a window.
BBEdit (left) and DLEdit (right). Photo by Jens Brynildsen.2

Here’s a very popular programmers’ text editor. It does

I’m David Durkee; I’m on the Flash Pro team. As you were
some code coloring as you can see, but basically we’re
just told, for 28 years Adobe has been bringing the world
still looking at typography that was similar to what you
better typography. In the introduction of PostScript
can do on computers in the 1980s. It’s all one point size.
printing all the way up to the Flash Text Engine3 and the
It’s all monospaced. We use indentation to show
Text Layout Framework4,5 we’ve been all about making
structure. And, sometimes we laboriously put our block
great typography available to everyone. Everyone except
comments in the boxes. But, the editor doesn’t help
for programmers, that is.
much. The structure’s hard to see, so reading through
code is slow, laborious, and takes a lot of concentration. It
really hasn’t advanced much over the years.

I’m here to present a concept called “typography of

code.” This research comes from the Designer Logic
Workgroup in Flash Professional. That’s designer logic,
not Vulcan logic.6

Displayed on-screen: the DLEdit (“Designer Logic Edit”) code editor 


application, which is used in this presentation to demonstrate

"typography of code" concepts.
 TYPOGRAPHY OF CODE

This is an AIR application, built using the Text Layout

Framework as the underlying text engine.

Added code: package fed.starfleet


(typed into a DLEdit source code editor window).
Added code (incomplete comment) between braces:

When you first start typing into it, it doesn’t look too /* The finest ship

different — just some keyword formatting so far — but in the fleet.

typography of code makes it easier to see the structure of

the code at a glance.
The first time you see it is when you type that curly brace
that starts this package. Which I will do right now.
Block comments are shown with a tinted rectangle
underneath to make them stand out. This is a box done
automatically for you — it’s not something you have to
type in with asterisks. And it isn’t just a highlight format
on the text — it’s a box that fits around the whole block of
the comment. You can easily see that I haven’t closed out
the comment yet by the fact that the box is containing
more than it should. So, when I close out the comment,
the formatting comes back and comment is nicely
contained in a pretty box.

Added code: opening left brace.7

The package name is enlarged, and a horizontal rule is

added here that will show you the beginning of the
scope of the package. And then, when I close out the
package with another curly brace, another horizontal rule
is added.

Added code: */ which closed the comment block.

Added code: several new lines and closing right brace.


Added code to package: class Enterprise extends Constitution

with opening left brace.

2
 TYPOGRAPHY OF CODE

Class declaration gets similar formatting treatment, but

also appears when you type the opening brace. Note
here that in addition to putting the name in larger size, it
has moved the word class up above the name of the
class. So, that larger point size name is on the left-hand
margin, is more visible, and is more obvious. We didn’t
add a return to do that, by the way. The text is just how
you typed it.

Added (incomplete) code within ViolateNeutralZone function:


if (reason == “Kobayashi

demonstrating “red alert” text styling.

When you first start typing a string literal, it shows it in red

to alert you to the fact that you haven’t closed it yet. It’s
kind of like a red alert.6 But, when I close the string, it
turns it to green, and you know that you’ve done it right.

Added code within the Enterprise class:


public function Enterprise(captain:String)

with accompanying opening and closing brace pair.

Function header also gets special formatting treatment

with the arguments in a slightly larger point size than the
rest of the text, as well as the name being quite large. This
is probably the most important formatting we do because
finding functions is key to reading and understanding
code. With this formatting, they act like the section
headings in a long word processing document.

Added code: quotation mark, closing the string literal.

Also, when I open the interior scope under the if

statement, curly braces in this function are no longer
balanced, so you lose the horizontal rule at the end of the
function.

Added code: public function

ViolateNeutralZone(reason:String):void

with accompanying opening and closing brace pair.




 Added code: opening left brace.

3
 TYPOGRAPHY OF CODE

Here are the two text editors side by side. The code
typography version gives you a good overview of the
structure of the file. Picture trying to find something in
one versus the other.

Added code: closing right brace.

And, when you close that block, the horizontal rule is

restored, so you know again that things are balanced. You
get a lot of visual feedback from this that things are right
or wrong.

Pictured: DrawHotspotUnderlay function in DLEdit.

Here’s the DrawHotspotUnderlay function — it stands

right out there because of the large point size of the
function name.

Pictured: DrawHotSpotUnderlay function in BBEdit.

When I scroll through it in this brand X editor,8 it’s there,

but it takes a little longer to notice because it’s kind of in
the middle — it’s floating in a sea of noise, and
everything’s the same size.

Now, if you don’t like the formatting choices that we’ve

made, we do allow you to choose your own.

Pictured: “Placeholder.as” (source code file) open in DLEdit.

Pictured: “Style” pop-up menu on the DLEdit window.

4
 TYPOGRAPHY OF CODE

Pictured: “Designer Logic XL” style in DLEdit.

Pictured: “Library Computer” style in DLEdit.

You can go from something very standard that still has a

little bit of the formatting (“Plain” style selected), to
something a little more out there (“Emacs” style selected),
to this one which I rather like — and I think our host will
enjoy (“Library Computer” style selected). As you can see,
we offer infinite diversity in infinite combinations.

And, I’d just like to really quickly show you what this could
look like built into the Flash application. This is a
prototype. This is the code typography in a HUD9 that is
showing a preview of the code snippet.

Pictured: “Plain” style in DLEdit.

Pictured: “Emacs” style in DLEdit.



 Pictured: preview of code snippet in a HUD.

5
 TYPOGRAPHY OF CODE

Thank you for your time, and I hope the Federation6 6. There was a Star Trek theme for the Adobe MAX 2010 conference, so
various minor remarks in reference to Star Trek were made throughout
accepts my proposal. ▣ this presentation. (Such remarks may seem rather peculiar without
knowing this context.)


7. In U.S. English, the term “brace” refers to what is also known as a “curly
bracket”. In the presentation, both terms were used interchangeably.
1. David Durkee, DWDurkee, LLC (accessed 2014 December 17)
 But, for consistency, this edited transcript uses the term “brace”
http://www.dwdurkee.com/ throughout.
2. Jens Christian Brynildsen, “Adobe Max Sneak Peeks”, Flash Magazine 8. David never mentioned BBEdit by name in the presentation. However,
(2010 October 27) http://www.flashmagazine.com/news/detail/ audience members could clearly see the name of the application in
adobe_max_sneaks_livenotes/ the on-screen demonstrations.
3. Adobe, “flash.text.engine”, ActionScript 3.0 Reference for the Adobe 9. “Heads Up Display (HUD): The HUD gives quick access to common
Flash Platform (accessed 2018 April 3) https://help.adobe.com/en_US/ commands related to the current action or currently selected object.” —
FlashPlatform/reference/actionscript/3/flash/text/engine/package- Adobe, “User interface”, Adobe Flash Catalyst CS5.5 (accessed
detail.html 2018 April 3) https://help.adobe.com/en_US/flashcatalyst/cs/using/
4. Adobe, “Text Layout Framework Technology Center”,
 WS46537afc5008d12d-22e1d8812381cd77f5-7fff.html
Adobe Developer Connection (accessed 2010 November 24)
 Video recordings by audience members:
https://www.adobe.com/devnet/tlf.html
 • https://youtu.be/mG0lyGekGDs (uploaded by 윤진상)
5. Adobe, “Text Layout Framework”, Open @ Adobe (accessed
2018 April 3) https://sourceforge.net/adobe/tlf/home/Home/  • https://youtu.be/r2JePjrDggE (uploaded by Jonathan Campos)