I’m a bit obsessive, when it comes to my work. I like to craft things with attention to detail that goes beyond the strictly necessary, to produce results that are aesthetically pleasing to me. Whether it’s Objective-C source code, HTML, CSS, or anything else of the sort, I strive for elegant simplicity, clarity of structure, expression and presentation, and pleasing formatting down to the last character. All of this has made me a difficult customer to please, and set a very high bar for the app I ventured to create.

It seemed to me there had to be a better way to write content for the Web — especially in an era when CSS-styled HTML offers nearly unlimited possibilities for beautiful, flexible layout and styling. Tinkering with raw HTML markup might always be the way to go for building page templates, but producing a site’s content — articles such as this one — accounts for a great deal of what we do, and sometimes even an HTML expert and inveterate angle bracket nudger can be forgiven for wanting to escape markup mechanics for a bit and just write.

I’ve been especially interested in supporting the ways that authors can semantically extend HTML to annotate documents with useful, stylable meaning. This potential — expressed as the freedom to qualify any standard <element> with “class” and “id” attributes — was quite deliberately designed into HTML, and we routinely take advantage of it to style our work using CSS. But developing, maintaining, and consistently applying a CSS-triggering semantic vocabulary without a little help from our writing tools is challenging. I’ve used Markdown to great benefit for years — it’s an elegant shorthand that produces pleasingly streamlined HTML — but Markdown starts to lose its elegant simplicity when saddled with semantic markup extensions.¹

It seemed possible to create a dedicated HTML editor that lets authors work with fully styled content — much as one would in a word processor — without having to sacrifice the kind of control over markup quality that someone like me insists on. There was no fundamental technical reason why it couldn’t be done (though there would be many technical challenges to tackle along the way). The main hurdle, it seemed, would be overcoming the precedent and expectation that most “WYSIWYG” HTML editors had established to date: seemingly unavoidable loss of control over markup structure, and inelegant results that were unsuited to professional use.

This led to some bedrock principles that would guide TypeMetal’s design and development:

• Produce exactly the markup the author requests — yielding minimal, modern, streamlined, standards-compliant HTML that isn’t burdened by formatting annoyances or needless extra baggage.²
• Adapt to the author’s formatting preferences, without making the temptation to obsess over markup formatting a constant distraction.
• Make the user’s semantic extensions (“class” and “id” vocabulary) first-class peers to the standard HTML element set.
• Provide guidance as the user writes, to ensure valid, standards-compliant results.
• Help in ways that are actually helpful, when there is little doubt about the author’s intent (automatically creating and splitting <p>aragraph elements, for example) — but for the most part, don’t meddle or make inflexible assumptions.

It also led to the design of TypeMetal’s “Source Loupe”, which is as much a means for earning trust as it is a useful tool. I knew there needed to be a convenient way for someone like me to peek at the HTML that their writing in TypeMetal’s visual UI was producing, without overly shifting the focus away from content and back to the HTML markup syntax that we’re striving in some way to escape.

Easily summoned and dismissed with a familiar ⌥⌘U, TypeMetal’s Source Loupe does exactly that, while also providing a handy way to inspect HTML that you may have inherited. Tracking the insertion point or mouse pointer over your fully rendered page, the Source Loupe highlights the corresponding HTML markup fragment with character-level precision, leaving no doubt as to what will be written to the saved HTML file. (The Source Loupe’s content is generated by exactly the same code path as the file’s final HTML, and thus produces the same result — taking your HTML formatting preferences and all other relevant factors into account.)

If what you see in the Source Loupe differs in any way from what you intend, TypeMetal’s Path Bar and Block Mode stand ready to help you grasp and manipulate the individual HTML elements and subtrees that need editing. TypeMetal’s insertion point positioning has been carefully crafted to understand the important distinction between a position at the edge of an element’s interior and the equivalent-looking position just outside the element. And TypeMetal gives special attention to whitespace — cleanly condensing it when appropriate, while offering the means to insert explicit non-breaking spaces, and to easily convert spaces between breaking and non-breaking, where desired. When it comes to the formatting of your HTML markup — something many of us have very particular preferences about — TypeMetal’s HTML formatting preferences model combines flexibility with “set it and forget it” convenience, making it easy to produce markup you can take pride in without having to constantly obsess over markup typesetting.

All this is designed to produce a writing instrument of exacting precision — a trustworthy tool that’s right at home on a meticulous HTML craftsman’s workbench, while offering the same ease of use, convenience, and content-focused experience to casual content authors. That’s a wide range of users to design for, but there turned out to be no inherent contradiction in striving to please most everyone. TypeMetal’s unifying principle — that we’re crafting clean, streamlined HTML whose styling and layout are to be determined by CSS stylesheet rules, instead of attempting an auto-code-generating drag-objects-around-arbitrarily-on-a-canvas experience — is what makes that possible. TypeMetal is a WYSIWYG HTML editor that breaks free of the conventional limitations of its genre, yielding professional-grade results and the degree of control and precision that those of us who love well-written markup insist on.

TypeMetal is available now on the Mac App Store. It was praised by this month’s MacFormat magazine as “a great value” and “an excellent addition to the toolkit of any web designer or writer for online publications”. There’s a free demo build you can try to get a firsthand feel for what they mean, and you can learn even more about TypeMetal by browsing its product page and online User Guide.

1. For example: The “Discount” parser extends Markdown with a “pseudo-protocol” syntax, to allow writing [some text](class:thing) to get <span class="thing">some text</span> in the HTML result. It’s a workable partial solution, but is limited to generating <span> elements, and a Markdown document laden with many such annotations quickly starts to lose its elegant, near-plain-text readability. An author who wants to be able to focus on content at this point is better served by a writing tool that gets markup mechanics out of the way.
2. TypeMetal adds only two custom metadata elements to an HTML files’s <head>, to enable association of a snippet set and per-file HTML formatting preferences (if any). Beyond that, TypeMetal tries to help out by auto-creating <p>aragraphs, but otherwise leaves you in the driver’s seat and strives to stay out of your way.