W3C home > Mailing lists > Public > www-style@w3.org > July 2005

Re: New layout language.

From: Orion Adrian <orion.adrian@gmail.com>
Date: Tue, 5 Jul 2005 02:02:09 -0400
Message-ID: <abd6c801050704230266d896c5@mail.gmail.com>
To: www-style@w3.org
Let me see if I can explain why I've gone to such trouble.

Currently boxes can take either a static width (e.g. 100px) or a
percentage width (e.g. 20%). You can also specify a minimum width
(e.g. 20px).

What I'm presenting is a way to get layouts that scale intelligently.
The proposed function calc() would have handled a portion of what I'm
talking about, but ultimately calc() would have produced uglier

I guess I should have presented it as I see it in my head.

Imagine a layout with two regions inside the viewport. The first
region is always 200px wide. There is a 10px gap between the viewport
and the first region and between the first region and the second
region and finally a 10px gap between the second region and the
viewport (see figure 1). At the minimum size, I'm going to say the
second region is 400px.

Now there's nothing particularly tricky about that. But here's the
thing, what happens when I resize the viewport? Now what I want is for
the second region to grow with the viewport. Now traditionally I only
have three options. Option 1 is to not resize with the viewport.
Option 2 is to resize certain controls at the same rate as the
viewport. Option 3 is do your own custom code for resizing (not

I want option 4. Option 4 is where different controls size at different rates.

Let's ask the question in CSS. Let's say I have the same situation as
above. How do I do it? There isn't currently a mechanism. There isn't
even one in Windows outside of doing it by hand.

Figure 1 shows the before and after of a resize. As I increase the
width of the viewport each region inside it resizes at a rate specfied
by its percentage growth.

0% indicates no growth at all.
100% indicates growth at the same rate as the viewport.

Figure 1 shows region 1 with 0% and region 2 with 100%.

If they were both width 50% then the added space would be split
between them evenly, however their left coordinates wouldn't change so
they would overlap.

Let's say I have 4 regions all lined up against the left-hand side.
The first region has a width delta of 25%, the second 50%, the third
75% and the fourth 100%.

For every 4 units the viewport widened the first region would gain 1
unit in width. The second 2 units, the third 3 units and finally the
fourth would gain 4 units for every 4 units the viewport widened.
Height works the same way.

Now to make sure regions don't overlap, you specify a left coordinate
equation that includes a delta (percentage) so that when the viewport
resizes the region moves to make space for widening or lengthing
regions to its left or top respectively.

Orion Adrian

p.s. I appologize for the attachment. I know it's bad form, but I
don't have a webserver up.

(image/png attachment: figure-1.png)

Received on Tuesday, 5 July 2005 06:02:15 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:19 UTC