The name "macroformat" is meant to suggest that this type of microformat applies to situations where the desired style is more complex than CSS can handle on its own, and that a macroformat engine defines a form of macro language in computer science terms -- a way of defining reusable textual components and a processor that expands them. So macroformats are "microformat macros".

The Dojo Ajax toolkit uses a microformat-like sublanguage for page authors to use to create Dojo widgets on a page.

Note that the main heading, the two-column layout and this sidebar were all created with macroformats.

Quick Links


Macroformats apply the microformat approach for representing semantic information in HTML to represent style information. Where microformats have been used express information such as personal contact information (the hcard microformat), macroformats communicate display style information between the page designer and the browser, in effect extending the capability of CSS. Since macroformats are machine-readable, they can be translated by browsers scripts into HTML and CSS to realize a designer's intentions. Macroformats could also be used as a tool for displaying semantic microformats as well, where CSS alone does not achieve all that might be desired.

While macroformats could be interpreted by custom JavaScript code or any DOM transformation technology, I have built the Expand engine -- a macroformat interpreter written in cross-platform JavaScript -- that makes it simple for designers to build their own macroformats and use them in Web pages. It can translate simple CSS class declarations into complex HTML that implements them, and it can accept a more complex group of HTML attributes and elements, combining information from each into the final display. Expand has been optimized for performance and small size to allow me to experiment freely with it.

The input language is in the microformat language family, so your page can be valid HTML. You can use custom attributes (not part of the HTML standard) to carry information, but Expand always lets you communicate the same information in valid HTML.

Note: the Expand engine is not an attempt to define a universal syntax for microformats. It just tries to support a rich-enough family of microformats to build some things I have found useful.

Using the Expand Macroformat Engine

To use an already-defined macroformat you just write a fragment of HTML. For example, to style a title like the one on this page you could use a CssCorners macroformat like this:

  <ins class=CssCorners><h1>Macroformats</h1></ins>

For your browser to interpret a macroformat, your page needs macroformat definitions. A macroformat interpreter engine and a macroformat definition. In JavaScript you can interpret macroformats any way you like, but the Expand engine lets you author macroformats using your HTML and CSS skills and create libraries to use in any web page. To set up a page for Expand, you install the engine on your web server, bring the engine into your page by invoking its script. Define specific macroformats by loading a library or defining it in your page, then use it as above.

This description omits the type attribute from <script> tags, assuming that the page declares the default script type as text/javascript with:

  <meta http-equiv="Content-Script-Type" content="text/javascript">
Then you can bring in the Expand engine, preferably in the head of your document:
  <script src="/path/to/expand.js"></script>

To use a library of predefined macroformats, after bringing in your macroformat engine, import a macroformat library that defines macroformats you wish to use by calling require, i.e.


The Expand engine translates invocations of of macroformats, leaving others alone. <Ins> tags are convenient because at block level they contain block-level content, and at inline level they contain inline content. Any <ins> tag not defined as a macroformat is left for CSS to interpret as usual, so their normal meaning is not pre-empted. If the engine cannot interpret a macroformat, it leaves it unchanged, and browsers will display its contents using CSS, usually with text underlined.

Using Expand Engine Tags

Expand Engine macroformats are named by the class attribute of the main tag. In the simplest case, just write an ins or other tag with a class. In most cases though, macroformats have parameters, which you can supply either with attributes of your main element, or through additional HTML nested inside the main element.

For example a custom button with a label might be invoked by:

  <ins class=Button1 onclick="alert('Thank You');">Press Me!</ins>
resulting in a display like this:
Press Me!

Anywhere you can use an attribute as a parameter to the macroformat, you can use a nested element instead. The element's class name plays the part of the attribute name, and the element's inner HTML plays the part of the attribute value. Many macroformats have a body. This can be provided either by the actual body of the INS element, or through a nested element with class="body".

For example, the previous example could also be written as:

  <ins class=Button1>
   <div class=onclick>alert('Thank You!');</div>
   <div class=body>Press Me!</div>
resulting in the same display:
alert('Thank You!');
Press Me!

This is one way to achieve valid HTML source code.

Technical Notes

Reducing display flash
The engine transforms microformats when the document body has loaded. This can result in a display "flash" as the document is first displayed with the original tags and then redisplayed after expansion. This can be greatly reduced in a few different ways. One mild expedient is to remove underlining from the default display of the INS tags. A much more effective way is to use a microformat such as Delay. This expands into its body, so it removes itself from the page. By giving the ins tag a style of display: none, nothing inside it will display until microformat expansion time.
Processing pre tags in Safari
Due to a weakness in the implementation of innerHTML of pre tags in Safari, if that is the browser the engine currently transforms all pre tags to div tags with style="white-space: pre;" and class="pre". Fortunately Safari has support for the white-space: pre style.

Continue on to Authoring with Expand.