Diable

Table of content

1. Abstract

Diable stands for « Diable Is A Boxed Layout Engine. » (yes, this is Unix style definition...)

This is a small PHP script which purpose is to help creating web pages. It produces a bit of Javascript, specifically designed to dynamically compute the position of the components of your page. The purpose of this software is to easily compose web pages, using PHP, HTML and a bit of javascript. Currently there is two main solutions to organize data with HTML : tables and divs. However, as far as I can see, none of these thow methods is fully satisfying. In the following paragraphs I will explain why tables and divs are restrictive methods, and what might be a better solution. Diable try to implement this solution, which is explained in details in the next paragraph.

2. License

Diable is licensed under the GPL Version 2. You are free to use, modify and redistribute this software, provided that you follow the terms of this license. Read it please, GPL is not free source, it is open source.

3. Methods for presenting structured web pages

a. Tables

The main interest of tables is to allow a very structured page composition. With rows, cells and various tricks like colspan and rowspan it is possible to define parts like a top banner, a left menu, a footer, etc. With the use of variable dimensions like <table width="100%" height="100%">, it is even possible to have the document automatically fit the size of the browser. However working with tables leads inevitably to some headache. Either the result varies between browsers, or it gradually becomes very hard to change the layout of the document, since moving a single element often implies to review the entire structure. If you ever try to create some reasonnably complex page and make it evolve, then you surely see what I mean...

But after all, in my opinion, the biggest problem is that the content is tightly linked to the container. It is hard to split the information and the visual appearance. CSS lets you modify fonts, colors and other various things, but not the global arrangement of the document.

b. Divs

Divs are somewhat easier to use than tables. With style sheets one can specify for each div element every visual parameter, including size and position. It is easy to separate content and disposition, but this time the document is most of the time very static. Each block position is carefully computed with a fixed screen size, no matter what the size of the browser window is. Everything is frozen and it is often frustrating to see those big margins at the left and right of the window, and to be forced to scroll up and down endlessly. Actually this is the most common web page layout. And although moving an element is simpler than with tables, it means however to recompute manually each div position. Liquid design can be achieved with divs but, here too, it rapidly becomes very hard to maintain.

c. The best of two worlds

A better method would use the best of tables and divs :

Ok, I recognize that it is utopia ! But as I am rather utopian I started to think at an alternative. It is called Diable and explained in the next paragraph.

4. The idea behind Diable

Diable is largely inspired from the Qt library (Trolltech) layout mechanisms. Do you know the Qt UI designer ? In a few words this tool is designed to visually create GUI, as Visual Basic (but far better of course). With Qt Designer you just have to put your buttons, combo-box, text field, etc. on a form, and group them in layouts. The Qt library will compute the position and size of each object for you, depending on simple rules. These rules are of the form « this text field will grow as long as it has space. », or « this button has a fixed size of 60 pixels. ». It's magic, intuitive and simple. If you don't know Qt yet I suggest you to have a look at it, it is worth spending some time on it. See links. (other layout systems exist but I am tired to have to use a compass to dispose my components...)

It would be really cool to dispose of such a tool when creating web pages. It is so natural that I wonder why it is not yet used everywhere. After googling a bit I wasn't able to find anything that looks like that (maybe I didn't search enough ?). So I began to code something with the following rules in mind :

How to implement this ? In my opinion there is not many ways. If the layout of the page should be computed when the user resizes the window, either the web browser must manage this event, or we must manage it ourself. As the browser is not able to do that, we are going to do it ourself. Furthermore computation shall occur on the client side. It is out of the question to reload the document each time the user moves the mouse. So if it is client side I don't see anything else than javascript. But the less javascript I use, the better I am. So I decided to use PHP on the other end of the pipe, on the server side, to realize processing that could be done elsewhere from javascript.

On the server side we build our pages, with the help of some PHP functions, provided by Diable. These functions will later produce some simple javascript code, designed to manipulate position and dimension of div elements, on the client side.

5. Basis

This paragraph explains the basis needed to use Diable. You may also follow the tutorial presented below to get some examples of what is explained here.

a. Overall mechanism

With Diable the page is composed of non overlapping boxes. Each box can contain other boxes and the box containing all other boxes is the page. We define the width or the height of each box with three possible values :

Several boxes can be grouped together in larger boxes :

Finally we define the last type of box : the div box. This is the smallest unit of data presented on the screen. This type of box is used to reference a div element in the HTML document.
Let's consider the following illustration. It shows how a rather complex web page can be viewed as a set of boxes (either horizontal, vertical, grid or div).

These sort of composition seems rather close to the table model, but with a major difference : the structure is not expressed in the document itself. It is expressed with grouping and size rules. These rules are later used to compute the position and size of each div element.

b. PHP classes

Six small PHP classes are used to define a page layout :

The complete API of these classes will not be put here, take a look at the examples, and the PHP source file.

c. Required HTML components

First of all, your document should follow the following doctype :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
This is mandatory, otherwise I.E. won't compute correct values.

Then your document body must catch the onLoad and onResize events. This is our javascript entry point.
<html>
  <body onLoad="my_function()" onResize="my_function()">
      ...
  </body>
  <script language="javascript">
    function my_function() {
      ...
    }
  </script>
</html>
 In the function my_function() we will call a special fonction whose aim is to manage the position and size of the different boxes of the page. See examples for more.

A major difficulty with HTML, Javascript and web browsers is to determine the size of the client window. All browsers react differently and unfortunately, determining the right window size is a mandatory condition for the proper execution of Diable. I didn't find a common way to solve the problem on the Internet, just some scripts dealing with two or three browsers, at most. So I propose my own, of which I am quite proud... Instead of accessing various properties of the window, and testing the name of the browser to know what do, I let the browser display an element which size is 100%, and then I read the actual size of this element. It works the same way with all browsers, youpi :-). So lets write it in HTML :
<html>
  <body style="height: 100%; width: 100%; padding: 0px; margin: 0px;">
      <div id="content" style="position:absolute; top: 0px; left: 0px; width: 100%; height:100%;"></div>
  </body>
</html>

Note that these settings are required for automatic resizing, but you are free not to use width: 100%; height:100%; if you don't want the content to be resized automatically.

The example 01 below gather all these required components.

6. Tutorial and examples

7. Limitations

Well... currently there are some limitations. Although Diable works well and the same way with most web browsers (konqueror, mozilla, I.E.), the following major problems are still not resolved:

8. TODO

Lots of things, I have got plenty of idea, among these :

9. Help, feedback, suggestions

I am very interested in getting feedback. Does it works for you ? Do you think it is worth spending some kilobytes on your hard drive ? Have some ideas for improvement ? Drop me an e-mail. See home page for contact.

10. Download

11. Links