The Source Loupe

TypeMetal frees you from having to edit HTML pages in source code form, but also gives you the means to view a page’s HTML source whenever you want. When combined with TypeMetal’s HTML formatting settings model and focus on streamlined markup, the result is full control over the elegant HTML you produce, without the temptation to constantly fuss over the character-by-character details.

Showing the Source Loupe

Anytime you wish, you can summon a TypeMetal document window’s “Source Loupe”:

• Press Command+Option+U or
• Choose View → Show Source Loupe from the menus, or
• Click the “Source Loupe” button in an HTML window’s toolbar

Each HTML window has its own Source Loupe. As you mouse over your document, or type and edit, the Source Loupe tracks your position, and shows you the HTML markup that corresponds to your current mouse position or typing location. This provides a very handy way to confirm that your typing, pasting, or drag-and-dropping has produced the HTML markup you want it to.

When shown, a Source Loupe either floats above its window, or is embedded within it, according to the “Show Source Loupe” setting in TypeMetal’s General settings panel. The embedded Source Loupe offers a few additional capabilities:

• You can adjust its height, and show or hide it, by dragging the splitter that separates it from the content area.
• You can also show and hide it by double-clicking the splitter.
• You can scroll it, to browse the HTML markup for your entire document.
• You can click and drag to select the corresponding range of your document’s content.
• You can click an element’s start or end tag to exactly select the element.
• You can double-click an element’s start or end tag to open the attribute editor for the element. (If you double-click an “attribute=value” expression within the element’s start tag, the attribute editor will open itself with that attribute already focused for editing.)

Hiding the Source Loupe

To hide the “Source Loupe”, do the same:

• Press Command+Option+U or
• Choose View → Show Source Loupe from the menus (to uncheck it), or
• Click the “Source Loupe” button in an HTML window’s toolbar

The HTML window’s Source Loupe disappears until you summon it again.

You can also double-click an embedded Source Loupe’s splitter, or drag the splitter all the way down to the top of the path bar, to close the Source Loupe.

Grabbing Portions of Your File’s HTML Source Code

You can obtain the HTML source code for any part of your document, using the Copy as HTML Source Code and Copy Interior as HTML Source Code commands that appear in the Edit menu, and in the path bar’s and content area’s context menus.