back to michaelgruen.com

On The Margin

Experiments in Layout

The following content includes severe autobiographical and technical navel gazing around layout and textual composition from the authorship context.

Also note that this page works best on a laptop or desktop monitor. As the title suggests, content sometimes falls on the margins. Like so. Margins do not show up “Reader” mode, which is the point, as you’ll see.

Consider yourself warned.

The Prose Within


Nostalgia

Typewriter, Stylized

Principles

I learned to type on my grandfather’s IBM Selectric. Unlike non-electric hammer-keys, Selectrics feature an embossed metal golfball that simultanoeusly rotates and faceplants onto the page while a black ribbon slides into position at the very last moment to print the desired character.

Replacing a hammer-filled chassis with a single printing element means the keys no longer jam, meaning I never had to de-akimbo the primary firing mechanism, nor having to retype a character because I didn’t hit a key with sufficient force. I may have been young, but even then I understood the importance of flow-state.

Like all good typewriters of that generation, each keystroke is assured, noisy, and permanent. A bell chimes when typist is about to run out of page, a pavlovian invitation to strike an enormous Return key that advances the paper and resets the cursor to the beginning of the line.

Patience

Even the best typists make mistakes.

For less-formal communiqués, corrections call for the Backspace key. Use it to backpadel over the errant word or keystroke and overwrite it with Xs.

My favorite color is blue pink.
                     XXXX

On a Selectric, there is no Delete function.

For formal documents—and in deference to the recipient that this was indeed a “formal” document—one might retype the entire page; or, if paper and/or patience was running low, one would break out the liquid paper (a.k.a. WhiteOut), dab a bit on the paper, let it dry, and then continue on.

Practice

I took typing seriously.

I would create letterhead, business cards (aided by a nearby guided paper slicer), and statements of purpose. Odd for an eight year old, perhaps… though I prefered to think of myself as industrious.

I learned to ensure that the long edges were perfectly parallel with the typewriter’s frame when feeding in a new sheet, otherwise the entire endeavor would be askew; or, worse, a corner of the paper’s trailing end would jam the machine.

The paper would crumple, non-prestine.

Purpose

I had no typewriter access at home.

Then, one day, my dad liberated some 33MHz i386 desktops and a dot matrix printer slated for the office dumpster. On arrival, so too transitioned my serious business I networked the desktops together on a local-area network so I could print from any computer without having to swap out the cables or use a floppy disk.

I had to find books and paper manuals to pull this off. My parents were not (and still are not) technical, so they were of no help—and it would be another six or so years before we had home Internet. (At the time, it was barely available at school or the library!

Some kids like to talk to themselves or create imaginary friends, but I was that cool kid that had a three-way chat going between my three home computer network that only I used.

To be honest, I still do shit like this.
from ink ribbons to silicon. I was now digital, baby!

Whenever we visited my grandparents, I would always find my way to the typewriter for a bit. Now, instead of writing missives, notes, and work performance, I made kid-art.

Play

With computers at home to do “work” on, typewriters were now for play.

(Recall that I am not even aged double-digits yet.)

My grandfather kept a ream of the cheap stuff handy for my creations. He also showed me a thing or two, including a few WWII-era memes Kilroy was here. he had learned to key out.

                                      \!!!/
+--------------------------------oOOo-(O O)-oOOo--+
|     _   _   _____   _     _      ___ (_) __     |`
|    | | | | | ____| | |   | |    / _ \   /  \    ||
|    | |_| | |  _|   | |   | |   | | | |     /    ||
|    |  _  | | |___  | |__ | |__ | |_| |    |     ||
|    |_| |_| |_____| |____||____| \___/     .     ||
|                                                 ||
+-------------------------------------------------+|
`--------------------------------------------------`

And we played hangman. I suppose we could have played with pen and paper, but I enjoyed the mechanics of moving the carriage—back, forth, up, down—as the game went on. Ding!

    _____
   |    |
   |    O                 tried: R S T L N U O P Y
   |   /|\
   |    |
   |   /
 __|__         __ __ __ __ __ __ __
/_____\
                  N           T  Y

As I grew up—and weary of hangman—he eventually upgraded to a newer electronic typewriter By recollection, he had many typewriters on hand, including the IBM WheelWriter and a Smith Corona. (I think.) As a lawyer, tinkerer, and technology enthusiast, he typed a lot. with a toggle that turned the backspace into a bonified delete key. (For the youngin’s out there, the Backspace and Delete keys do different things!)

Satisfying the thunk of a weighted-ball keypress can be, the delete function was even better. A built-in “correction ribbon” rubbed out all errant ink with a horrifyingly delightful screech only a high-voltage stepper-motor greatly straining the fibers of a very unhappy piece of paper can make.

While high-quality paper could take the abuse of multiple erasures in a single spot, thinner stock This was the kind of “printer paper” you might use in a printer or a copier would rip right through.

I loved the mechanism so much I found myself typing out full paragraphs just to go back and erase them all. I used so much correction ribbon that my grandfather hid his supply whenever we came over.

“Sorry, we just ran out!”

Pragmatics

As much as I enjoyed the mechanical screeches of mistakes undone, these models were supremely precise and professional. Some came with electronic screens that buffered a line or two on an LCD Matrix to preview what the typewriter was going to type before the inky wheel dutifully stamped-out each committed line to the page in perfect tempo.

The carriage feed automatically thwarted any unauthorized listing, actively re-centering paper as it rolled. Unlike the Selectrics or the Smith Coronas before it, it was near-impossible to trick the spacebar mechanism on a half-press to create a half-space. Each fixed-width character found its authorized spot in a perfect grid, each line on its neat perpendicular row.

Reflection

Tall Monitor Computer

Am I having a moment where I am feeling nostalgic on having simpler relationships with technology? While simultaneously excited about the future and annoyed by where Big Tech has left us, this screed centers on typesetting… in case you were wondering.

You bet I am!

Paradigms

Computers are in the information and knowledge business.

Before the Internet (and networks, generally) became the principal conduit for any and all human knowledge, this meant that computers were actually in the business of making documents because that’s how people consumed information.

When the madfolk at Xerox PARC invented the desktop monitor, it was shaped, unsurprisingly, like how paper documents are normally-read in portrait, not landscape, sized about the same. The history of paper size standardization is surprisingly rich. Going back as early as the 1700s as an academic exercise, standard sizes started to emerge based on how the French taxed paper. And, as recently as the mid-1900s, mass adoption of paper standards finally hit its stride to support the mass-availability of home and office on-site printing requirements. While text fits to a page, it floods on a screen.

The physics are different. It would feel odd to read this website in an 8.5⨉11” PDF, wouldn’t it?

Production

Graphical word processors (like WordPerfect, ClarisWorks, and Microsoft Word) and page layout tools (like QuarkXPress, PageMarker, and InDesign) made quick work to obsolete typewriters. People could now fix mistakes before committing them to paper. Mulitple copies no longer required a visit to the copier nor having to manage making carbon copies. That’s when you would feed multiple pages through a typewriter, putting carbon transfer paper between each page, so each keystroke would type through all pages. This is the origin for why you CC (Carbon Copy) other people in e-mails.

If you wanted to be taken seriously, you needed to print things out, to “publish”. The document was de facto default cat’s pajamas. To underscore importance, you might even laminate it!

And then, for those who make documents—read: everybody in the knowledge work business—progress here just… stopped.

Other than to return an online order, I cannot remember the last time I used my printer. In 2012, Gartner reportedly concluded that the average office employee printed half as many pages as they did in 2005. In 2005, 50% of the “Developed World” was online. 72% by 2012. Today over 90% of the world “surfs the web”.

This is all to say: we are well into a post-paper Microsoft Powerpoint assumes a digital experience. While it still supports standard sheet sizes, note how far away the selection is from default. Powerpoint Document Format

Meanwhile, Google Slides doesn’t even bother to include paper sizes. Google Slides Page Format
information age, except when catering to diehards or on ceremony.

Parameterization

HTML, first available in late 1991, has matured over the years to its latest incarnation, HTML5, which was released in 2014. In case you lost count, that was years ago.

HTML has lot going for it, powering the modern marvel that is the storage and dissemmination of (almost) all information across (almost) all digital screens. As written communications benefit from textual styles, HTML makes it easy to link to other content, bold and italicize words, drop in #Headings, and all that jazz.

And yet, getting the words to format Unless you are willing to wrestle with stylesheets, use proprietary document formats (MS Word, Pages, Google Docs), or LATEX, that’s just what you get… a tradeoff between flexibility and precision.

Granted, the basics get you 90% of what you might want to do anyway, but it’s that other 10%.

Typerwriters had that nailed.

HTML has many elemental tags you can use to format your text with a bit more panache. But HTML is meant for, well, online documents. There’s a clear benefit in keeping the text and the format instructions explicitly separate.
(at least for this English-writer) beyond the left-to-right, top to bottom, is an astonishingly frustrating exercise in HTML-land.

After nearly thirty years writing this way on “the web”, I suppose I’m left wanting more.

Perfunctoriness

While HTML reads great rendered in the browser, it is quite annoying to proofread HTML source code with its markup littered throughout.

<bold>Don’t</bold> <em>believe</em> me?
How <em>about</em> <bold><em>now!?</em></bold>

Those who work on the web might be better at this than others… but the cognitive overhead is undoubtedly more expensive than reading through simplier prose or through a super-thin, contextually friendly syntax, like Markdown.

**Don’t** _believe_ me?
How _about_ **_now!?_**

This ⇧ generates the above HTML which, when rendered, looks like this:

Don’t believe me?
How about now!?

Big legibility improvement. Limited still by its simplicity.

Pruning

When banging out text, I often let the runons run on.

Trim the fat later—rewrite when necessary.

Keep it lean.

It is nonetheless with great sorrow that I drown those run-on fatty-fat kittens for the sake of readability. Even if these sojourns don’t make the final print, I find the tangents interesting, colorful, and worthy of my time.

Sometimes, though, I want to eat my cake and for you to have it, too, If you thought to yourself “Isn’t the expression You can't have your cake and eat it, too.?”, you would be correct.

But, I think it better to mention the “eating” before “having” because it explains the situation more clearly: when you eat something, it presupposes ownership. It would be odd to have a cake and not eat it because eating a cake in the point of having a cake in the first place.)

Ted Kaczinski thought so too, a preference that contributed to his apprehension.

This is an example of a high-calorie fact I might normally cut.
and make use of the summary tag.

It looks like this in practice, and if you click here or on the triangle to the left…

It will unfurl itself with additional content.

How about that?

Note the triangle is now pointed down. Click it again to hide this section as I suspect this little bit has added very little value to your day.



Fun indeed! But writing HTML by hand is a chore… If HTML is used inline with markdown, the markdown-to-HTML processor won’t perform its syntax magic inside the <summary> tag so all formatting inside of it (links, paragraphs, styles) needs to be re-typed in pure HTML. Lame. especially if you’re trying to compose text at the same time.

Click to see the summary HTML code
<details>
  <summary><em>It looks like this in practice, and if you click
here or on the triangle to the left…</em></summary>

<p>It will unfurl itself with additional content.</p>

<p>How about that?</p>

<blockquote>
  <p>Note the triangle is now pointed down. Click it again to
hide this section as I suspect this little bit has added very
little value to your day.</p>
</blockquote>

<p><br /></p>

</details>


Less fun!

Thus, most of us cope with markdown pseudo-WYSIWYG mediocrity.

Possibility

If you think I’m down on markdown, you would be mistaken. It is (at the time) an amazingly innovative, lightweight syntax that’s human readable, human writable, and easily transmogrofied into HTML, PDF, or any place that marked-up text might be rendered.

Many folks have created their own flavors and dialects and extensions to suit their needs.

Maybe I should do the same. (Spoiler: I won’t, but bear with me.)

Action

Infinity Computer

Late Summer 2019, I attended a full day seminar put on by quantitative visual innovator and information design theorist Edward Tufte who, between lessons of sparklines Michael—note to self: Implement sparklines as a markdown extension. and thoughts on the human reaction to various visual stimula, hawked lesser-used formatting to improve comprehension.

That is to say, he is
precisepersnickety
about .

As you may have gleaned, he will occasionally employ unconventional structures in his textbooks. Unconventional, yes, but immediately understood.

In his seminar, he seem to express genuinely disastisfaction with how word processors processed words as further reason why he takes it upon himself to lay out everything using various products to ensure his work is just so.

Progression

Most text editors I write in support markdown; or, in a proprietary format Google Docs, for one. that can easily convert into markdown. As a technologist, I produce a lot of boilerplate (alas necessary) technical documentation… often in source code repositories as markdown.

There are countless times I have wanted to employ such artfully-crafted sentences in my work. And notes in the margin to provide additional context for those who need it, tucked neatly away as to be avoided by the already enlighted and/or disinterested.

And now I can
employabuse
margin notesnon-standard layoutstacked sentences
as
desiredneeded
in-situ.

Because I wrote my website a markdown-compatible app for that.

(
SorryNot Sorry
)

Persistance

On the web, pulling off universally-consistent formatting is a tricky to do: differing browser engines, operating systems, display settings, and device form factors all have different opinions about how HTML should be rendered.

Web design is a best-effort enterprise. The network layer of the web also relies on best-effort delivery. This approach works out very well for the most part, as delivery guarantees can lead to network gridlock, wasted resources, and paradoxically less reliable.

Giving authors control over their layouts (and making it easy for non-technical, HTML-native folks to do), doubly-so. While one might consider using PDFs for consistency, the content within is not as portable (the “P” of Portable Document Format) as the name might suggest. Nor is it easily editable, nor responsive to the screen on which it is viewed.

It is also more computationally expensive than HTML.

As I try to ensure my content is durable and designed to last, keeping my writing as close to plaintext as possible is highly desireable.

Markdown is plaintext, and will thus outlast every other format in existence. Proprietary products, like Adobe’s suite of layout tools, will come and go at the publisher’s whims. And, if my experience with Adobe’s periodic auto-updates is any indication, an upgrade might leave me unable to develop images like I used to… like I wanted to… because a feature was deprecated without notice or ability to rollback.

Open standards are a good thing.

It is the default output format of every commercial LLM (e.g., Claude, ChatGPT) popular today. The web chat agents will often auto-format the markdown for you, but if you ask it nicely (i.e., click the “copy” button), you can paste the results and see the raw output as markdown.

It is as close as plaintext can get to WYSIWYG without having to reinvent modern computing.

And it is used literally everywhere.

Proprietary

While I’m generally in support of open-sourcing work that others might find valuable, I don’t intend on making any of layout shorthands publicly available for three reasons:

  1. I would want to do a better job on the code before making it available as a matter of pride,
  2. Because the code itself really isn’t the point, and
  3. I don’t want to.

This site is built by a static site generator called jekyllrb, an early player in the Jamstack trend. Rather than run my own server that has to think about how to respond to each request, a JamStack doesn’t think about anything at all. It just serves up flat files efficiently without prejudice or care. There’s really no attack surface or /admin page to futz around with. Everything happens in the source code and nothing on the server.

This is different than how blogging software like WordPress works in that there’s nowhere to “log in” and no compute server to “compromise”.

Security™.
Jekyll got a lot right, but it is a bit slow to compile against alternatives. For years I was eager to switch to a faster framework (like Hugo) so I could preview my work in near-real-time them. Waiting for pages to generate slowed down my flow, wasting meaningful time.

But, in the last handful of years, laptops have gotten so fast that regenerating this entire site, which used to take five to ten seconds, now updates itself about as quickly as it takes to alt-tab between my code editor and the most recent in-browser build.

Compilation is no longer the bottleneck in the workflow.

I am.

No need to change for now.

Prompting

Thanks to Zed’s Zed is a code/text editor that is built with speed in mind. It is wicked-fast, and the company has prioritized fully-configurable LLM-integrations within the application.

It is where I have been spending most of my coding hours, and where I build and maintain this site.
tight LLM integration, it takes less time to prompt-build a custom Jekyll plugin or component to achieve the layout I’m looking for than trying to find (and learn) a library to do it.

Rather than
maintainworry about
my own markdown
libraryextensiondialect
, I can keep plainext portable and, if ever needed, rebuild the marginal feature on whatever future framework best suits.

Need a component? Generate a component. A component like this margin note. It is quick to do and takes almost no time at all.

Do the LLMs generate the best code? No—gosh, no! But, it does not need to be good. It just needs to be good enough for the scope of its use. And if it needs to be improved or rebuilt, these small, lightweight, and specific plugins are trivially-easy I confess, sometimes the LLM needs a bit of spoon-feeding to get it right. But the time cost is still very, very reasonable. to rebuild whenever—if ever—it is time to migrate.

Probabilism

Trying to build for the margins in the context of forever and for everyone is unnecessary.

Another way to think about it: that which will last has already been built. That which is optional and trivial can be trivially rebuilt with current technology where it would previously be a laborious chore.

Growing up, typewriters were for play.

WantPut
the text
here?there!

Computers, once again, are now feeling that way.


← The Human DNS