The Secret of Creating Web Pages with Book-Quality Layouts

A web page's layout is defined by table with highly limiting structure that's composed of rows and cells. One can be relentlessly creative in working around the limitation with CSS and javascript, but can only get that far. A new approach is needed to break out.

A web page with book-quality layout is wonderful. Before we see how to achieve it with certain means, let's first look at some of the specifics.

The Meaning of "Book-Quality Layout"

So what does it mean to have a book-quality layout? In a broad sense, it may mean the freedom to create any layout you want. But it also has a set of criteria. For developers who like to generate dynamic contents, in my opinion, these criteria may include: x-y coordinate system support, free content positioning, content size calculation, and content non-interference.

X-Y Coordinate System Support - To have a precise layout, the support for x-y coordinate system is needed.

Free Content Positioning - This means you can freely place your content at any location of your page. You can achieve this to some degrees with floating contents in CSS layers (z-index).

Content Size Calculation - You build your page object by object. Before you place a new object (content), you often need to know the size of the existing objects and the size of the new object for accurate object placement.

Content Non-interference - Your newly added content will not change the positioning of the existing contents.

You may add additional criteria such as controllable page break for content that may require more than one page.

The Means and Tools

Although a Word or PDF document can have book-quality layouts, it is not part of a web page, and the tools for creating these documents are not the purpose here.

The widgets or tools mentioned below are embeddable in a web page, meet some of the criteria above, have cross-browser support, and are programmable with javascript.

HTML5 Canvas - The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is now supported by all major latest non-IE browsers (it will be supported by IE 9). However, the canvas is an HTML tag, and does not support tables and sophisticated text layouts.

Javascript Libraries - javascript libraries use HTML5 canvas or implement their own canvas features, and are mainly for creating charts.

Javascript-Programmable Widgets - These widgets allow javascript programmers to create dynamic contents with sophisticated page layouts and reports by draw-based approach. They may have built-in support for 2D shapes, bitmap, text, table, and other HTML elements inside the widget canvas. One example is VIEWidget with a real (not screenshot) example below. The feature set can be surprising. Aside from book-quality layout, it even has zooming, panning (drag the page) and printing support.

Conclusion

Book-quality layout browser native support is a dream and probably will never come in foreseeable future. But there are other effective alternatives to achieve it, and these javascript-programmable draw-based cross-browser alternatives can be very productive for generating dynamic contents and reports over conventional html tag-based content building processes.