Alignment icons (naming) inverted

[jossmac]

Some of the alignment icons are the inverse of expected. The line indicating the axis should be horizontal for "vertical" alignment and vertical for "horizontal" alignment.

This is the case for Adobe suite, Figma, Sketch etc.

Resources

Distribute and flip appear to be correct, only the following are affected:

• align-center-horizontal
• align-center-vertical
• align-end-horizontal
• align-end-vertical
• align-start-horizontal
• align-start-vertical

Annotated screenshot of Illustrator's "Align" panel.

[gurtt]

Note that for vertical alignment and distribution the terms should be top, middle, and bottom.

[karsa-mistmere]

Note that for vertical alignment and distribution the terms should be top, middle, and bottom.

They really shouldn't, these are for flex layouts, where the preferred terms are start, end and center no matter the axis. (Top, bottom and middle could sure be added as tags though, in case they aren't yet).

[gurtt]

these are for flex layouts

That would make sense, but I'd assume the philosophy is that icons should be applicable to more than one use case. Even the first comment on this issue refers to alignment and distribution in Illustrator which is a use case far removed from flexbox.

For flex layouts on the web, 'start', 'end', and 'center' are used because the axes for flexbox are the main axis and cross axis: they don't refer to horizontal or vertical axes, so using 'top', 'middle', and 'bottom' (or 'left' or 'right') would be incorrect.

These icons, however, are graphical representations and explicitly refer to horizontal and vertical axes, where 'top', 'middle', 'bottom', 'left', 'right' and 'center' are the correct terms to use.