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

Re: New layout language.

From: <Kris@meridian-ds.com>
Date: Tue, 5 Jul 2005 09:37:34 -0500
To: www-style@w3.org
Message-ID: <OF7FBEC769.EA6B7E11-ON86257035.00505804-86257035.0050583B@meridian-ds.com>


Ok Orion, I think I get where you're going with this.  Let me start by
saying that I've always wanted some sort of basic equation functions in
css.  Maybe I'll eventually get it.  :-)

As I understand it (and the pictures helped, thanks what you intend on
doing is basically this:

The following is a two column setup in Orion's New Layout.  The left column
is 200px wide, the right column is liquid to take up the rest of the
layout.  I will use css style code.  (forgive any mistakes in the code, I'm
still not sure I completely understand it)

.left {
  top:0%+10px;
  left:0%+10px;
  width:0%+200px;
  height:0%+100px;
}

.right {
  top:0%+10px;
  left:0%+10px;
  width:100%-10px; (Is that right?  I'm thinking margins here)
  height:0%+100px; (you mentioned something earlier about min-height... I
don't know how to specify that so...)
}

Is that about right?  Obviously there are still issues with the language...
you've only made a couple general statements about it, so I don't
completelyunderstand syntax yet, and it may not actually do some stuff you
want yet, but I think I got the general idea.  With that said I went to the
trouble of duplicating what you were asking for in css.  it is as follows:

.left {
      position:absolute;
      width:200px;
      margin-left:10px;
      height:100px;
      border:1px solid #000000;
}

.right {
      position:static;
      margin:10px;
      margin-left:222px;
      border:1px solid #000000;
}

overall I obviously don't need the borders, they're just there to show you
how it works.  Also .left doesn't need the height statement, it's just
there for ease of view as well.  Which means all I really need for the
setup is 3 descriptor lines.  The right class is liquid... you can test the
setup for yourself.

No it doesn't work in IE, but that's nothing a little !important couldn't
fix.  My goal here was to make the code as concise as possible.  This sort
of setup is easy to do for both browsers, I was just looking to do it as
simply as possible.

If I missed the boat, let me know.  I'm not trying to shoot you down, just
playing devil's advocate and trying to figure out what you're talking about
all at the same time.

With all that said, let me mention a couple more crits for you to consider:

First off, equations (while cool) are required by your language and there
are plenty of people who are probably going to just flip out at them.  If
we break down what you're really saying you're actually stating two things
in each statement.  First Growth Rate, second minimum size.  The Minimum
size seems like (if the engine were strong enough) that it could act as
margins all at the same time, so in my example of

right:100%-10px; I've told the right class to take up 100% of the screen
after left (since it will appear in the HTML code afterward... if it
appeared before hand there would need to be some sort of margin statement
for the left most side of it since the left class is currently taking care
of that) and then to pull back 10 px from that right most area (the edge of
the browser).  This works great until someone shrinks their browser too far
at which point it could get a little ugly.  But again, this is just
thinking outloud.  I may have totally misused that particular property.
However to my way of thinking what we're essentially doing is this:

.left {
  width:100%;
  min-width:100px;
  margin:10px;
}

So maybe what we've learned from your excercise thus far is that CSS MIGHT
benefit from a little more robust of a shorthand portion of its language.

The other thing I'll point out is this:

You're specifying "growth-rate" and that's going to make for some difficult
challenges.  It is the nature of a designer to design something that he can
control as best as possible.  I know this, I design for the web all the
time.  Thus if you give me growth-rate, and I do, as you mentioned in your
last post, a 25%,50%,75%,100% setup, I'm going to be VERY frustrated with
odd pixels.  What do my 25,50,75 do if I've only resized by 3 pixels?
There are going to be instances where the 25,50 or 50,75 are the same size,
and that will frustrate people.  I realize it's not really different than
it is right now, except that in your system I perceive that all layouts
would be "liquid" unless all growth-rate was set to 0%, in which case
that's a lot of extra 0s...  Not a big deal, I'm just trying to toss out
ideas.

as a parting statement I give you a basic code layout for what I percieve
you're doing and where I see you going.  You don't have margins yet, and
you're still going to need them, since the system only takes care of them
in certain instances, and those instances could be potentially painful, so
I've taken the liberty of adding them.

.left {
  top-growth-rate:0%;
  top-margin:10px;
  left-growth-rate:0%;
  left-margin:10px;
  width-growth-rate:0%;
  width-size:200px;
  width-margin:10px; (this is a possible shorthand inside of width.
without it margins would be set all over the place in the code.  this is an
issue which could be circumvented by simply stating margins exact as they
are currently in CSS, please advise)
  height-growth-rate:0%;
  height-size:100px;
  height-margin:10px; (see width-margin desc)
}

Granted you short handed all this with your statements above.  I'm not
trying to shoot you down here, I'm just trying to illustrate they they are
essentially short handed attributes.  (or at least that's how I perceive
them)

Last impression before I end this e-mail:  What I really don't like about
your system (in contrast to css currently) is that I HAVE to state
everything manually.  In css I state size and place it where-ever I like.
In your system I MUST give it all the values it wants (even if they're
non-essential) so... yeah that's a turn-off right away.  I tried to
illustrate that things are just short handed.  I see issues with a
min-height, max-height scenario coming, and things could be simplified in
your system by making shorthands more robust, but I think the same could be
said of css.  These are honest opinions, I'm just trying to work through
this with you.  I'm not hot on the idea of replacing css layout, but I'm
willing to at least see what you're thinking.

Kris
Received on Tuesday, 5 July 2005 14:38:06 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:39 GMT