Re: New layout language.

On 7/5/05, Kris@meridian-ds.com <Kris@meridian-ds.com> wrote:
> 
> 
> 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
> completely understand syntax yet,

I haven't specified a syntax. This language is designed to replace the
functionality of CSS layout and would use a different syntax. It's
region based and not class/id based.

You didn't quite get what I was saying unfortunately, but you at least
did get the intention. Perhaps if I were to explain how to get the
linear functions.

Create a set of regions in space. Each region is given an (x, y)
coordinate and a width and height. Give the viewport a width and
height that incorperates the proper spacing.

Now exactly double the size of the viewport (e.g. if 1000px, now
2000px). Since the regions use constant coordinates the viewport
resizes but nothing inside the viewport changes. Now that's not the
desired effect. So I resize and move the regions around inside the
viewport to get new positions and sizes that take advantage of the
viewport's increased size.

Now take each shift in space (x, y) and each resize in space (+x, +y)
and divide them by the increase the viewport had (1000px). This
represents the growth/shift (represented as a percentage).

There are no margins, borders or padding. There is no display. This is
completely separate from CSS as it stands.

A linear function is described by a delta and a constant. The delta
here is a percentage between 0 and 100% inclusive. The constant is any
non-negative number.

The langauge was designed to be fairly easy to write by hand and very
easy to manipulate with a WYSIWYG editor.

It isn't any more verbose than CSS is now, actually less so in complex
layouts because it manages to combine left, top, right, bottom, width,
height, display, min-width, min-height into 4 properties left, top,
width, height.

> 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.

Here the right moves, but does not resize, am I correct? Again CSS has
no construct to deal with what I'm proposing. Any attempt to get it
won't work without at a minimum the proposed calc().

> 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.

There are algorithms that handle the odd pixel problem. Again, no
specific syntax. As a side note there should be no negative values in
any of the equations in this system. It would imply either an
initially negative dimention or a negative position. Or in in
percentage part, it would imply the region would shrink as the
viewport got larger.

> 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.

Again, no syntax has actually been proposed, merely the properties and
structures involved.

Examples shouldn't be mixed with CSS as this language is designed to
replace the portions of CSS used for layout, but with a different
language.

Orion Adrian

Received on Tuesday, 5 July 2005 16:59:07 UTC