RE: Proposal for non-normative example section (Was: RE: How is it possible to devise such a feeble system?)

> -----Original Message-----
> From: Bjoern Hoehrmann [mailto:derhoermi@gmx.net] 
> Sent: Wednesday, October 24, 2001 3:49 PM
> 
> 
> * Jeffrey Yasskin wrote:
> >So nobody really understands the spec, even on this list.
> 
> *Please*, ask questions and propose clarifications if you 
> think something is not clear enough. Optimization for human 
> consumption is something the writer can hardly do without 
> reader input.

Judging from the discussion here, people don't fully understand how the
spec deals with centering elements and the size of the top-level
element. "margin:auto" is non-intuitive, and it behaving differently
horizontally and vertically is downright confusing. Even though this
fact is plainly evident from the box module.

> >How much less likely is it that a beginning developer will 
> understand 
> >it?
> 
> Specifications aren't generally written for users or authors
> in this case. Someone who doesn't know how non-Latin writing 
> systems work or who isn't familiar with common typography is 
> likely to be confused by some parts of CSS Level 3, 
> optimizing for them is not feasable. Developers should refer 
> to secondary materials like tutorials, books, guides, 
> whatever if they want to learn CSS, specifications cannot 
> teach authors to use technologies described therin, at least 
> not beyond a certain level of verbosity.

This is true. The text module is far beyond me. But the box module is
used by everyone, while the confusing parts of the text module are only
used by the people who need it. Therefore, the box module needs to be
more accessible to the general reader.

> >There should be a non-normative section of CSS3 (and CSS2.1) giving 
> >techniques for table-less layouts.
> 
> Go, write it, publish it, I and others will happily link to 
> it. Why should that be part of a specification?

The spec declares that table-based layouts are a bad thing, but it
doesn't give an alternative. And, in fact, the alternative in CSS2 is
difficult to write. There do exist such websites, in particular A List
Apart <http://www.alistapart.com/stories/journey/>, but these sites are
hard to find, and half of them are inaccurate.

> >Two important cases are: the one
> >discussed here, centering stuff vertically and horizontally; 
> and 2- and 
> >3-column-based layouts.
> 
> Why is reading the column module text not sufficient to learn 
> how to setup column based layout? I think there was only one 
> feedback thread on the column module on this list.

I like that spec, but it's not the kind of columns I was talking about.
I was referring to the type of layout at Mozilla
<http://www.mozilla.org/>, where there's a menu-column on the left, and
a separate body section. Similar layouts are all over the web, and
they're almost all done with tables because, with CSS, it's just hard to
do it.

> 
> >Then the editors of CSS will be able to see whether CSS is a 
> feasible 
> >replacement for tables. If CSS requires much more code or 
> >harder-to-read code than a table-based layout, CSS needs to be 
> >reconsidered.
> 
> Help thinking, try it yourself, share your results.

Oh no, I have to think! I'm pretty sure that the CSS is more code, but
obviously I can't prove that without writing several pairs of pages.
Whenever I get around to that I'll post the results to here.

On the assumption that the current CSS is more code, and to clear up the
evident confusion about positioning within blocks, I'll propose a new
property valid on block-level elements:

Name: 'align' (or Vadim's 'block-align')
Value: [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] ||
[left | center | right] ] ] | inherit 
Initial:  0% 0%  
Applies to:  block-level (and replaced elements ?)
Inherited:  no  
Percentages: refer to the size of the containing block

See <http://www.w3.org/TR/2001/WD-css3-background-20010924/#properties4>
for a description of the meanings of the values.

To make a three-column layout, one would type:

<html>
  <head>
    <style>
#left   {align:left top;   width: 15%; height: 100%;}
#body   {align:center top; width: 70%; height: 100%;}
#right  {align:right top;  width: 15%; height: 100%;}
    </style>
  </head>
  <body>
    <div id="right>
      Ads go here, filling the right side of the page, and loading
first.
    </div>
    <div id="left">
      Menu goes here, filling the left side of the page.
    </div>
    <div id="body">
      Content goes here, filling the center of the page, and loading
last.
    </div>
  </body>
</html>

This is less code than the equivalent table-based layout, and it's
easier to read. Notice that the load order is independent of the
position.

Or, if we want to center the content, we could put:

<html>
  <head>
    <style>
html       {background-color: blue;}
html, body {height: 100%;}
#center    {align:center; width: 300px; height: 300px;
background-color:white;}
    </style>
  </head>
  <body>
    <div id="center">
      Content goes here. It's always 300px by 300px, with a variable
blue border, and a white background.
    </div>
  </body>
</html>

I can see the percentage property being confusing because, "With a value
pair of '14% 84%', the point 14% across and 84% down the [block] is to
be placed at the point 14% across and 84% down the [containing block]."
Figuring out how this interacts with width and height could be
confusing, but I don't think it's a huge problem as long as you stick to
the keywords.

Jeffrey Yasskin

Received on Wednesday, 24 October 2001 18:20:41 UTC