Welcome to TypeMetal!

Exploring and editing this sample document will help you get to know TypeMetal’s feature set. You can get a new copy of it anytime by choosing “TypeMetal Welcome Document” from the “Help” menu — where you’ll also find a comprehensive user guide.

Inspecting a Document

Use TypeMetal’s “Source Loupe” — available in the toolbar, above, and in the “View” menu — to peek at the HTML behind any part of a document. The Source Loupe follows your mouse movement or typing position to show you the underlying markup, character for character. Toggle the Source Loupe back off when you’re done.

If the floating Source Loupe doesn’t suit you, you can ask for the Source Loupe to be embedded in your document windows instead, using TypeMetal’s “General” preference panel. The embedded Source Loupe lets you select corresponding parts of your document, and open the attribute editor for indicated attributes and elements, by clicking and double-clicking within it.

“Show Blocks” mode (also in the toolbar and “View” menu) illuminates the invisible block-level container structure that comprises much of an HTML document. Click the block handles to select, grasp, and drag block-level elements. Double-click any block that starts with a heading to collapse everything but its heading; double-click again to re-expand the block.

The “Text Size” buttons let you zoom text larger or smaller for comfortable viewing.

The path bar at the bottom of the window shows you the elements that contain the insertion point or selection. Click any segment in the path bar to exactly select the corresponding element or text node. Right-click any segment for a menu of operations you can perform on that node.

Opening Links

Hold while clicking a link to open it. (Did you know you can read TypeMetal’s Help online?)

Quick and Easy Styling

Keyboard shortcuts make the most common inline styling elements a snap to apply. Select some of this text, and try applying

See the “Structure” menu for all the handy shortcuts that are available.

As in other apps, you can use the same keyboard shortcuts while you type, to toggle application of these elements on and off. For example: Type B at an insertion point to toggle strong emphasis on, type some text, type B again to toggle strong emphasis off, and continue typing.

Quick and Easy Linking

Type K to instantly wrap a hyperlink (<a> element) around selected text. TypeMetal will fill in a guess at the link target if it can, based on nearby files and URLs you may have recently copied to the pasteboard. It can also suggest alternatives when you edit the link’s target (“href” attribute).

Inserting Arbitrary Elements

Efficient typing completion puts HTML’s entire element set at your fingertips. As when using the “Quick and Easy Styling” keyboard shortcuts, you can either insert elements as you go, or wrap them around content you’ve already typed.

To wrap selected text, type < to summon the element completion UI, then type a few characters of the name of the element you want, then press return to confirm the completion. For example, type “ab” to ask for an <abbr> element, which marks the contained text as an abbreviation. TypeMetal automatically filters out elements that can’t be applied in the selected context.

If you want to insert a “<” character, instead of inserting an element, just type < twice in succession. If you type “<” characters often (maybe you write about HTML for a living?), you can make < behave like an ordinary keystroke, by unchecking a setting in “TypeMetal” -> “Preferences” -> “General”. You can always use control/ as another way to summon the completion UI.

To insert an element, type < or control/ at an insertion point. TypeMetal puts you inside the element you just completed. After you type what you want inside it, press tab to exit the element and continue typing. (Press esc instead of tab, if you want the insertion point right after the element, without a space between them.)

Working with Lists

] turns a paragraph into a list item. \ toggles a list between bulleted (<ul>) and numbered (<ol>). [ turns the list item back into a paragraph.

To create a list, you might hit return at the end of a paragraph, start typing your first list item, then type ] to turn what you just typed into a list item. Type return at the end of each list item to start a new list item below it. When you’re done, type [ to go back to typing normal paragraphs.

Once you have a list with a few items, you can use ] and [ to indent and outdent list items (creating lists within lists), and control and control to move items up and down in a list.

Editing Element Attributes

Type L to see and edit the attributes for the selected or nearest containing element. The attribute editor works based on typing completion, in the same way as the general element completion UI. Type part of the name of an attribute to add or edit the attribute. For example, you can add a “class” attribute to any element, such as the paragraph that contains this text.

Working with Headings

Some commands can infer their target elements from the insertion point, making it easy to apply them without having to exactly select the desired element first. The commands for working with headings and lists are examples.

1-6 let you instantly turn any paragraph into a heading. Use the same keystrokes to change a heading’s level, and shift0 to turn any heading back in to a paragraph.

Those are the basics!

See “TypeMetal Help” in the Help menu for a complete guide to TypeMetal’s capabilities — including “snippet sets”, which help you develop and apply your own styling vocabulary.

Support is always available at coherencelabs.com. For quick questions, you can also tweet @CoherenceLabs.

We hope you’ll enjoy using TypeMetal!