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
any DOM transformation technology, I have built the Expand engine -- a macroformat interpreter written
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:
For your browser to interpret a macroformat, your page needs
macroformat definitions. A macroformat interpreter engine and a
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
Then you can bring in the Expand
preferably in the head
of your document:
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:
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:
<div class=onclick>alert('Thank You!');</div>
<div class=body>Press Me!</div>
resulting in the same display:
This is one way to achieve valid HTML source code.
- 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
- 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
Continue on to Authoring with Expand.