[whatwg] Element borders as resizable handles

[Greg Houston]

> > Regarding a couple of the new UI elements in HTML5, it is not clear to
> > me from the spec if the meter and progress elements are purely UA
> > designed elements or if the developer has control over their styling.
> >
>
>  You can probably style them using XBL in due course. They are similar to
> form controls as far as I can tell.

Thanks. I only had some vague notions about XBL, that it was a
proprietary Gecko language for skinning the Firefox browser. I wasn't
aware it was being developed now as a web standard and that it would
give you control over UI elements inside the webpages themselves.

> > With the HTML5 drag and drop, can you specify a handle for the dragged
> > element(s) or are the dragged element(s) always their own handle(drag
> > mechanism)?
> >
>
>  I'm not sure what you mean here.
>

Dragging an element requires a handle to drag that element by,
something to mousedown on and move. In the simplest case, lets say I
have a red rectangle, 100x100px. By default the handle for dragging
the red rectangle may be the entire red rectangle. So mousedown
anywhere on the red rectangle and drag and the rectangle moves. In my
experience, maybe 50% of the time this is fine. Generally things are a
little more involved. Take an OS window for instance. OS windows are
draggable, but the entire windows are not handles for the drag. You
have to drag windows on your desktop around by mousing down on the
titlebar. In this case the titlebar is the drag handle for the window.
Generally the drag handle is a child element of the element being
dragged, though this is not always true.

The element you pull on when resizing another element is a handle. The
knob on the scrollbar is a handle. They all have similar
functionality, mousedown on an element and the movement of the mouse
then changes a property of another element. With drag you are changing
the position. With resize you are changing the size, and actually,
with more advanced resizing you are simultaneously changing the size
and the position, consider resizing in the west, north-west, and north
directions. If you have an absolutely positioned div and resize it in
the north direction, the top position is decreased by exactly the
amount the size is increased. In this way the bottom of the div
remains stationary.

>  Oh, you want 'box-sizing':
>
>   http://www.w3.org/TR/2004/CR-css3-ui-20040511/#box-sizing

Yes, the border-box property in particular. Thanks. The ability to
evenly horizontally split two divs looks promising. I hope that works
vertically as well. Intricate fluid layouts that break a page up into
panels that fill the available space both horizontally and vertically
is currently a nightmare without using frames or tables. It gets even
more complicated if the panels are resizable.

My request for <canvas> strokeAlign is still on the table. It does not
 necessarily need a response, just keep it in mind.

ctx.strokeAlign = "center" // this is the current default.
ctx.strokeAlign = "inside"
ctx.strokeAlign = "outside"

Like in Adobe Illustrator, inside and outside would only work on closed paths.

Cheers,

Greg