Re: Columns and other layouts

On Mon, 28 Apr 2003, Michael Day wrote:
>
> What about Constraint CSS? [1]
>
> It seems that a constraint based model would be useful, not just for
> implementing the kind of features that Coises was describing, but for
> implementing *existing* CSS layout features such as table column sizing.
> Definitely worth a thought.
>
> [1]	Constraint Cascading Style Sheets for the Web
> 	http://www.cs.washington.edu/homes/gjb/papers/css-uist99.pdf

An interesting document. It doesn't really seem to explain how it would
work (or at least not in terms I could understand easily), but it is
interesting.

Its @precondition rule has been superceeded by CSS3 Media Queries, so the
main relevant points appear to be pages 4 to 6.

Let's see how one would describe the conditions Coises mentioned:

| 1. If the centered title at the beginning of this page will fit on one
| line, it should be shown on one line; if it requires two lines, the
| break between lines should be such that the two parts are approximately
| equal in horizontal measure.

I don't think that's possible with CCSS.


| 2. The section headings on this page should be distinctly larger
| than the paragraph text that follows them, but visibly smaller than
| the main page heading. They should all be the same size. Within
| those constraints, the section heading size should be chosen so that
| as many of the headings as possible fit on a single line.

I suppose that would be something like the following (I'm using my own
vague syntax here since I couldn't decypher the CCSS syntax):

   (h2) font-size >> (h2 + p) font-size;
   (h2) font-size << (h1) font-size;

I can't see how to do the last bit (the "fit on a single line" bit),
but even given that, I don't really understand how the above could
then cascade with a user stylesheet rule of the kind:

   p:hover { font-size: 20px ! important; }

Would this rule be converted into a constraint:

   (p:hover) font-size = 20px

...? Would this cause the headers to start changing size as you hover
around the page?

I suppose we could introduce indirection, as in the following (the
paper seems to mention a similar idea at one point):

   h1     { font-size: constrained(h1-size); }
   h2     { font-size: constrained(h2-size); }
   h2 + p { font-size: constrained(body-size); }

   @constraint h2-size >> body-size;
   @constraint h2-size << h1-size;

Now with this system we can find all the values of all the constrained
variables mentioned before even starting the cascade, then we can
simply plug the values in later.

Unfortunately, this doesn't allow for any interaction with the layout,
so is of limited use.


| 3. I have a graphic to be set left, with a couple paragraphs of text
| set to the right. There is a caption for the graphic. If the caption
| will fit at the right --- beneath the other text and not extending
| below the bottom of the graphic --- it should be set right and
| aligned with the bottom of the graphic; if it will not fit, it
| should be set /below/ the graphic.

I can't see any way of describing this in CCSS. It is actually just
another example of co-dependent properties, the simplest example of
which is 'color' and 'background':

   p { background: white; color: black; }

...how do you prevent the 'color' rule from being applied if the
'background' rule isn't? This could happen for any number of reasons,
e.g. a poorly written user stylesheet of the form:

   p { background: black; }

The problem becomes even serious with cross-element co-dependencies,
e.g. ensuring that <tr> only has 'display' set to 'table-row' if its
parent <table> is set to 'table'.

Coise's case is even more complicated, though, since it requires that
the layout be completed to some extent before the cascade is computed
any further. (A key aspect of CSS2.1 is that the cascade can be
computed without even the most rudimentary attempt at a rendering.)


In conclusion, I think CCSS is interesting, but I don't really
understand it. (A proposal in the form of a CSS3 module, with plenty
of examples, would dramatically increase the chances that CSS working
group members would understand it.)

-- 
Ian Hickson                                      )\._.,--....,'``.    fL
"meow"                                          /,   _.. \   _\  ;`._ ,.
http://index.hixie.ch/                         `._.-(,_..'--(,_..'`-.;.'

Received on Monday, 28 April 2003 00:31:16 UTC