[whatwg] Element borders as resizable handles

[Greg Houston]

This may just be another one of my crazy ideas, but web applications
are increasingly using resizable elements such as resizable windows,
resizable form columns, image croppers and so forth. Currently this
requires injecting one or more handles into the element you wish to
resize and absolutely positioning them on the edges of your element
and continuously resizing the handles with javascript. If you are
doing an 8-direction resize you will have to inject 8 different
handles into your element.

It might be nice if the element borders could be used by the
javascript libraries as handles, which I imagine would require that
the borders be able to be accessed via the DOM somehow.

I don't know if there would be a solution for getting this to work
with corners, but at least four directions would be easier to resize.
I think this could probably even work with tables where borders are
collapsed since both the elements sharing the collapsed border are
simultaneously being resized in relation to each other. Also, you
might be able to specifically refer to the right-border of such and
such td, and so regardless of whether or not it is collapsed it would
still be the border referred to by the drag event.

Again, I realize this may not be feasible, but thought I would throw
the idea out there.

While on the topic of borders, it would also be nice if there was a
CSS property for their alignment, "outside" as is the current default,
and "inside". Pushing my luck, I would like to see the same options
for the strokes in the canvas element with the addition of "center"
which is the current default.

CSS
border-align: inside;
border-align: outside;

Canvas
ctx.strokeAlign = "center"
ctx.strokeAlign = "inside"
ctx.strokeAlign = "outside"

Center, inside, and outside are the labels used for this in Adobe Illustrator.

Cheers,

Greg