When designing UI structures, alignment (left/right/center/etc) is a property of a component specifying
When designing UI structures, alignment (left/right/center/etc) is a property of a component specifying
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.
@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>
@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.