Re: Automatic container/wrapping

On Sun, Apr 4, 2010 at 10:26 AM, Brian Allen Vanderburg II
<BrianVanderburg2@aim.com> wrote:
> From my understanding, the purpose of style sheets is to try and separate
> content from presentation.  I've checked some drafts such as that for CSS
> templates and it is looking very promising when/if it is completed and
> implemented by browsers.  Currently, it seems that the order of things in a
> document controls the display order entirely.  Something that comes first is
> either on top or left.  For example, in phpBB prosilver style, the contents
> of a post are displayed to the left of the user information of that post.
>  To change this currently would require a change to the content (HTML).  But
> with CSS templates, it seems to change this could be a matter of only
> changing the presentation (style sheet), such as changing something like
> display: "ab"; to display: "ba";

Exactly; Template Layout does make it exactly as easy as that.

> Another area that presentation is directly embedded into the content is in
> the form of wrappers to help create a certain look.  But this is still for
> presentation control and not actually content itself:
>
> <body>
> <div id="wrap">
> <div id="header">...</div>
> <div id="navigation">...</div>
> <div id="content">...</div>
> <div id="footer">...</div>
> </div>
> </body>
>
> Such a thing may be used to place the all the content centered:
>
> body { background-color: #DDD; }
> #wrap { background-color: #FFF; border 2px solid #888; width 750px; margin
> 32px auto; }
>
> If a desire to change the looks later, maybe to put the header and
> navigation together and the content and footer together visually, more
> changes may be needed:
>
> <body>
> <div id="wrap1">
> <div id="header">...</div>
> <div id="navigation">...</div>
> </div>
> <div id="wrap2">
> <div id="content">...</div>
> <div id="footer">...</div>
> </div>
> </body>
>
> #wrap1, #wrap2 { background-color: #FFF; border 2px solid #888; width 750px;
> margin 32px auto; }

In many of these cases, Template Layout should suffice.  Your last
example can be done as:

body {
  display: "a"
           "b";
}
#header, #navigation { position: a; }
#content, #footer { position: b; }


> Sometimes, it may be desired for styling for an individual element to be
> wrapped by some systems.  This is all fine for automatic content systems,
> but for individuals who hand-code HTML, it can be tedious.
>
> I don't know if this idea has any merit, but perhaps a way to automatically
> wrap desired elements in a new container could be useful.  The idea is that
> in the CSS, elements can tell that they want to be wrapped.  For any
> element, any child elements that want to be wrapped a certain way would
> transparently behave as if they were wrapped in a <div> with the desired
> style.  Also the wrapping can wrap more than one element, but only if they
> are siblings of each other.  Non-siblings would always get their own element
> to wrap with.

I agree, but I haven't yet worked out the complications.  My idea is
for a ::wrap pseudoelement, used thusly:

::wrap(#header) { /* This wraps everything from #header onward /* }

Or to wrap things like your second example:

::wrap(#header, #content) {
  /* Pretend that the start tag of a <::wrap> element goes before the
first selector, and a </::wrap> tag goes before the second selector,
so this would grab your #header and #navigation */
}
::wrap(#content) { /* And then just grab all the rest in another
<::wrap></::wrap> pseudoelement. */ }

This avoids any actual transformation of the DOM, which is nice,
because it won't suddenly change any other selectors you may have
active, while still allowing you the ability to wrap arbitrary runs of
elements in a wrapper.

The major complication that still has to be worked out is how to
handle when things overlap.  I'm not quite sure what to do about this
yet.  For example, if you had this code:

<a>foo</a><b>bar</b><c>baz</c>
<style>
::wrap(a,c) {} /* should wrap around the <a> and <b> */
::wrap(b) {} /* should wrap around the <b> and <c> */

What should happen?  Naively applying both would result in misnested
tags, so something has to either be ignored, changed, or otherwise
handled specially.

~TJ

Received on Sunday, 4 April 2010 19:15:52 UTC