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.
@SonnyBonds @bitbear just to hang it on to here as well as my other reply: what you’re after is more flexible, so long as the parent node can define the virtual space each child has to work with so you might have
list
item::centre
item::left
item::centre
But when it comes time for layout the list has subdivided its available space into 3 for each child, width and height of each is up to you - maybe list has a height greater than its items - so then the centre items would appear in the center of each space allocated.
CSS has sort of become a standard comaprison for layouts even though I find flexbox and grid way too duplicated due to both the parent and child defining locations, but how they work is effectively what I attempted to describe again 😅 Parent defines some “virtual” space partitions with implicit child positioning, then children can make their positioning within those partitions explicit. Hoprfully thats a bit clearer (and you just ignore the 2nd part of what I posted previously 🙃)