Layout Master 1.1, from Western Civilisation, is software of a kind I really like: it does one thing and does it splendidly. Like its earlier companion program, Style Master, which I reviewed in TidBITS-501, that one thing has to do with authoring and editing Cascading Style Sheets (CSS), the supplement to HTML that is increasingly becoming the way to dictate the formal details of your Web pages. The two programs completely overlap with respect to the area of CSS with which they deal: Layout Master handles just Position, Background, and Border properties; Style Master handles all of CSS, including those three. So in theory, you could work on your CSS using Style Master alone; but you wouldn’t want to, because Layout Master lets you edit Position properties in the only way that makes intuitive sense – visually.
Historical Interlude — If you already know all about CSS, you can skip this section of the review. Its purpose is to explain what CSS is, to put it in some historical perspective, and to summarize the pros and cons of its use.
In the early days of the Web, HTML was a very small language; there were almost no rules. This fact had two major consequences. First, HTML was inadequate to sketch more than the most basic structure of a Web page, which could consist only of successive paragraphs of text interspersed with occasional images; there was almost no capability for the author to dictate the style and positioning of any of that text. Thus, it was hard to make a Web page look interesting or even good; indeed, one could only guess how a page would look, since user-defined settings in any individual’s browser could easily foil one’s attempts at rational or aesthetic design.
Second, browser developers made up for this inadequacy by innovation; in essence they simply forced the evolution of HTML by unilaterally introducing their own contributions. In some cases, these innovations were good: Netscape’s invention of the TABLE and FONT tags, for example, made webmasters of every stripe breathe a sigh of relief. But these innovations were implemented erratically, leading to a situation where it was almost impossible to determine how a page would render among the different browsers and platforms (even different versions of the same browser). Webmasters spent their time cursing and writing ever more convoluted workarounds as they tested and retested pages under all conceivable conditions.
The reaction to this situation has been a gradual but massive technical and cultural effort to move the Web towards standards, offering well-defined rules as to what constitutes HTML and as to what a browser’s responsibilities are when interpreting it. The World Wide Web Consortium has become the de facto clearing house for rationalization of standards, clarifying the rules for different versions of HTML and related languages, and providing tools for automated validation so that webmasters can know definitively whether their pages are legal HTML or not. Just as important, new browsers such as Mozilla are aimed explicitly at complying with those standards. Of course, if you’re still using an older browser you don’t reap the benefits of this situation, but personally I think it’s splendid. I no longer worry about testing my pages with every browser; it has taken me years of wrangling to bring those pages up to the standard, but I now just validate them as "HTML 4.01 Transitional," and if an older browser can’t deal with that, I don’t care – and I suspect that many Web authors feel the same.
We come now to the place of Cascading Style Sheets in all this. The CSS specification was developed and presented in two stages, now called CSS1 and CSS2. (And CSS3 is in the works.) As usual, I simplify for pedagogical purposes, so no letters please…
CSS1 is chiefly about aspects of character and paragraph formatting: font, size, alignment, leading, paragraph margins. CSS2, aside from some media-oriented and linguistic innovations that don’t concern us here, chiefly refines the "visual formatting model" for Web pages. This means that you get to isolate elements of the page – a word, an image, a paragraph, a whole lot of paragraphs, whatever – and dictate where on the page they should go. Positioning that was previously the domain of tables and frames, or was downright impossible, can thus be specified through CSS. (Tables and frames are by no means abolished, but they no longer have to be pressed into service merely for purposes of positioning.)
For an example, take a look at the W3C’s CSS home page. If you’re using a recent browser, you should see a navigation box that hovers transparently in the upper right of your window even when you scroll the page. That’s done through "fixed" positioning of this element.
Unfortunately, no browser implements the full CSS2 specification, and positioning is one of those gray areas that most browsers implement only partially or with numerous bugs, if at all. But support is improving; and when you’re ready to adopt CSS2 positioning in your Web pages, Layout Master will be there to help.
How It Works — Layout Master is simple; with the help of the accompanying tutorial, you can learn the whole program in less than an hour. It works much like a basic drawing program. An empty document appears as an empty canvas. Choose New Positioned Element and a rectangle appears; drag it to reposition it, or drag the handles at its corners and sides to resize it. The rectangles can also be aligned or evenly spaced with respect to one another. Double-click a rectangle, and a floating palette appears where you can edit Position, Background, and Border properties by value; for each property, this palette has a Help button that brings up a text window explaining the property’s use, and some properties also include a Caution button that brings up warnings about how the property is implemented in certain browsers. A separate window, the Elements editor, lets you dictate both the layering order and the all-important containment hierarchy for all positioned elements, in the most natural and elegant way imaginable – as an outline.
Behind the scenes, a Layout Master document is actually a text document – in fact, it’s HTML (or, if you so desire, XHTML). Each rectangle in the canvas represents a DIV tag; the style information for each tag can go inline into the tag itself, or into a STYLE tag in the HEAD region, or into a separate stylesheet document. Because its documents are HTML, and because it knows how to parse HTML and CSS, Layout Master can be integrated with other tools you may be using to create your HTML. Instead of a blank document, you can start with an existing HTML document; Layout Master can open this, and can safely add positioned elements to it. You can send a document from Layout Master to another editor, such as Style Master or BBEdit, and work on it there; when you save and return to Layout Master, your changes are instantly reflected.
This technique of sending your document to another editor for further work is, in fact, how you are expected to give your document content. After all, an HTML document consisting of nothing but DIV tags would show up in your browser as blank; it’s the stuff between each pair of DIV tags that constitutes the actual content of your document. So a typical working pattern might be to lay out the basic positioning of a document’s elements using Layout Master, and then to use BBEdit or some other text editor to get some HTML into those elements. Nevertheless, Layout Master does also allow you to supply content in other ways. For example, you can just drag text, or an image file, into a Layout Master document, and presto, it becomes a new positioned element with that text or image as content. You can also edit content manually from within Layout Master, but the interface for doing so is very simple, and the manual discourages you from using this for anything more than minor tweaking.
Of course you can also send a document from Layout Master to any browser for previewing. Layout Master does have an internal preview mode, but it’s rather primitive and doesn’t show very well what the page will look like. Besides, you should view the results of your labors in the browser; Layout Master itself is just a kind of schematic visual environment, and doesn’t aspire to be more than that.
In short, what Layout Master is trying to do is simply show you what positioned elements you’ve got and how they relate to one another, and give you a rational, dependable, and easy-to-use environment for editing them. It does this brilliantly. Other types of editing and display are left to other programs; and since Layout Master integrates well with those other programs, that’s a perfectly appropriate choice. As I said at the outset, Layout Master does just one thing, and does it well – and is all the more endearing for that.
Conclusions — Layout Master is not Mac OS X-native, which should encourage readers who worry that there’s nothing new under the sun for users of older systems. In fact, Layout Master doesn’t even work perfectly in Mac OS X’s Classic environment; in particular, the Help text appears garbled, and previewing in a Mac OS X-native browser doesn’t work – Layout Master can’t even be made aware of such a browser’s existence, because it doesn’t understand about Mac OS X bundles. This, however, is not as big a problem as one might expect. Since a Layout Master document is HTML, it can be opened manually into any browser. Besides, Layout Master can hand a document to BBEdit, which in turn can pass it off to any browser for previewing; since you’ll probably be using the two programs together anyway, this workaround quickly comes to seem perfectly natural.
I must confess that, personally, although I really like Layout Master, I don’t yet feel ready to make much use of positioned elements in my own Web pages, if for no other reason than that the widely used Internet Explorer 5.1 doesn’t handle them well. And positional elements are a bit tricky, so I know that when I do start using them, I can expect to have to do a certain amount of patient experimentation. That being the case, it’s a comfort to feel that when the time comes, Layout Master will be there, making my experimentation easier through its abilities to form and portray valid CSS and to work with other HTML tools and browsers. If you’re curious about the brave new world of positioned elements, and want to get some hands-on experience of what your life will be like when you stop using tables within tables to lay out your Web pages, I recommend you give Layout Master a try.
Layout Master is $50, or it can be purchased together with Style Master Pro for $80; a free 30-day demo is available for download, and the manual and tutorial can be viewed online. It requires a PowerPC-based Macintosh running Mac OS 8 or later with at least 4 MB of RAM (10 MB preferred) allotted to Layout Master.