Comments on the latest drafts

Paged Media Properties for CSS3
===============================

Section 7.1.1 [1] suggests several new at rules, namely:

   @page-top-1, @page-top-2, @page-top-3
   @page-right-1, @page-right-2, @page-right-3,
   etc... etc...

This limits us to 12 page boxes -- which, while adequate for typical
work, seems like an odd, arbitrary limit [2].

I suggest that instead, we have simply four at rules:

   @page-top, @page-right, @page-left and @page-bottom

...and their syntax be changed to take an arbitrary identifer before
the block, to name the page margin box. for example:

   @page { size: 8.5in 11in;  
           margin: 10%;       
           @page-top date {
                 margin-right: 5%; 
                 text-align: right;    
                 vertical-align: middle;                  
                 content: date("%d %B %Y");        
           }                  
           @page-top pages {
                 margin-left: 5%;
                 text-align: left;
                 vertical-align: middle;
                 content: "Page " counter(pages) " of " pages() "."; 
           }
         }   



Also, the draft currently states:

# If more than one '@page-right-1' or '@page-right' rule are declared,
# the following rule overrides the previous rule(s).

This is implicit because of the cascade.


Section 5 says [3]:

#  CSS3 accomplishes these presentations through: 
#  [...]
#    * making the 'content' property apply to all elements, not just
#      :before and :after pseudo-elements as in CSS2
     
I strongly support this, especially with the addition of the
replaced() function as described previously [4] to declare replaced
content. 

Section 7.3 says [5]:

#  [I believe we can avoid creation of the following property if we
#  extend 'content:' to all elements. Then, instead of setting
#  "display:none" to hide an element, we could set 'content' to an
#  empty string. I think it is a Good Thing to avoid interactions with
#  display properties.]
#  
#  Property:  hidden-policy

I agree that using { content: '' } is a Good Thing here.


Multi-column layout in CSS
==========================

I have to admit preferring the 2nd variation described [6] (using a
:column pseudo-element) rather than adding the many new properties.

However, the variant syntax described would cause havoc with the
cascade.

For example:

   P:column {
      column-number: 1;
      width: 25%;
      border: thick solid black;
      padding: 0.3em;
   }

   P:column {
      column-number: 2;
      border-color: blue;
   }

...results in:

   P:column {
      column-number: 4;
      width: 25%;
      border: thick solid blue;
      padding: 0.3em;
   }

...which isn't what was meant at all!

Instead, I would use a function-like syntax for the :column pseudo
element, taking one optional argument (the column number), and add a
single property ('columns') which would be applied to elements which
should be layed out with columns. We can even go one further, since
'columns' can only apply to 'display:block' elements, and make
'columns' a (function-like) value on the display property.


Then what was _meant_ in the example above would become:

   P { display: columns(2); }

   P:column {  /* matches all columns on P elements */
      width: 25%;
      border: thick solid;
      padding: 0.3em;
   }

   P:column(1) {
      border-color: black;
   }

   P:column(2) {
      border-color: blue;
   }

As can be seen, :column applies to all column pseudo elements, so the
cascade makes the above equivalent to the following:

   P { display: columns(2); }

   P:column(1) {
      width: 25%;
      border: thick solid black;
      padding: 0.3em;
   }

   P:column(2) {
      width: 25%;
      border: thick solid blue;
      padding: 0.3em;
   }

I like this, because it means that it is easily reusable. For example,
one could make _all_ columns have dotted red borders:

   :column { border: dotted red; }

The only difficulty I can see is that 'float' would need to be
adjusted so that it does not force 'display' to equal 'block' if
'display' is set to 'columns(...)'. (Otherwise, you cannot float
columns!) Note that for this suggestion to work easily, so that no
column pseudo-element rules need be used at all, the 'auto' value on
'width' would need to be changed to mean "the containing block's width
divided by the number of columns in the containing block", too.


-- references --
[1] http://www.w3.org/TR/css3-page#marginboxatrules
[2] Well, 12 is even, but you know what I mean...
[3] http://www.w3.org/TR/css3-page#crossreferences
[4] http://www.bath.ac.uk/%7Epy8ieh/internet/wwwstyle.html#replaced
[5] http://www.w3.org/TR/css3-page#stringproperties
[6] http://www.w3.org/TR/css3-multicol

[And I bet that the first comment on this will be to point out that
the examples I used would not look very nice... ;-)]

-- 
Ian Hickson
: Is your JavaScript ready for Nav5 and IE5?
: Get the latest JavaScript client sniffer at 
: http://developer.netscape.com/docs/examples/javascript/browser_type.html

Received on Wednesday, 30 June 1999 08:55:30 UTC