When designing UI structures, alignment (left/right/center/etc) is a property of a component specifying

#gui #software #softwareengineering

the positioning of its contents
50%
its positioning within its parent
38.9%
a secret third option
11.1%
Poll ended at .

Interesting result! When I think of this I think of it as #2. To align something to the left, that's a property on the thing and not the parent to me.

I wonder if this is something that differs in whether you think of it primarily as text alignment or primarily layout/positioning for UI elements in general. For text I can better understand setting it on the container.

@SonnyBonds i think from my perspective its more obvious where the contents should be from the container level than the item determining where it should be. An item shouldn’t be aware of its own position in space when it comes to layouting, but it should be aware of the contents it has to display for logical layout behaviour if that makes sense on perspective?

Or for another way of thought, if I have a container UI with 3 elements, with each having control of their own alignment in the order of left, left, centre; does the centre element at the end push itself to the middle and then the 2nd left element is no longer left within its container? Or if there’s runtime ordering how would the layout respond to the centre item being the first item now? What does centre mean in that context? This is when it’s a 1:n relationship from container to children.

@Pascal I think maybe I agree on the first part actually. Not sure I follow on the second scenario. :D
@SonnyBonds @Pascal With flexibility of the size of the container (think resizing) as well as the number of children, it's more optimal to delegate the flow and alignment responsibility to the parent.

@bitbear @Pascal I agree on a more conceptual "code module" level that it's the responsibility of an outer thing to place its inner things, but in this case I'm thinking in the context of declaring the layout whether alignment would conceptually be specified like:

<list>
<thing alignment="center"/>
<thing alignment="center" />
</list>

or

<list alignment="center">
<thing/>
<thing/>
</list>

I'm personally used to the former.

@SonnyBonds @Pascal Yeah, I the latter feels unintuitive when expressed like that. Taking inspiration from CSS' flexbox, the latter would rather look like:

<list align-items="center">
<item />
<item />
</list>

@bitbear @Pascal I just think per item feels more flexible? Possibly a bit more verbose, but if it's a long list it's probably generated or programmatic somehow anyway.

@SonnyBonds @Pascal CSS Flexbox supports `align-self` as well, so they can be mixed.

https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

I don't think there's a clear answer here; it comes down to circumstance and preference.

align-self - CSS | MDN

The align-self CSS property overrides a grid or flex item's align-items value. In grid, it aligns the item inside the grid area. In flexbox, it aligns the item on the cross axis.

MDN Web Docs

@bitbear @Pascal Yeah, Flexbox is really configurable and powerful. I haven't used it a lot but it seems a bit "overparametrized" from what I've seen, but maybe that's just what's required to do All The Things.

Agree it's preference though.