[css-align] axis naming inconsistency - can we settle on the canonical name for an axis with the others being descriptive in context?

[rachelandrew]

I've been reviewing the alignment spec, and in various places there is inconsistency with naming of the two axises. There has been confusion amongst authors around this too, see: #1299

• The main axis can also be referred to as inline or row
• The cross axis can also be referred to as block or column

Through this spec and the Grid and Flex specs, these are referenced in different ways. I'd like to suggest that we decide on the canonical name for these things then clarify in parentheses if there is a useful name for it, within the context it is being used.

Also, that we ensure there is a clear definition somewhere of naming. As requested in the linked issue above. That might be in the individual specs - however for something like column and row this is already used in this spec to refer to table and grid axises, which might be an argument to define terminology here.

For example in the alignment specification:

1. Overview of alignment properties https://drafts.csswg.org/css-align/#overview

"which dimension they apply to (main/inline vs. cross/block), and"

2. The table below the above description also only refers to main/inline and cross/block (no column and row)

3. The first mention of Column and Row as names for the axises is in 5.1.4 https://drafts.csswg.org/css-align/#distribution-grid

align-content Axis The block (column) axis, aligning the grid rows.
justify-content Axis The inline (row) axis, aligning the grid columns.

4. 5.2. Baseline Content-Alignment https://drafts.csswg.org/css-align/#baseline-align-content
   Section mentions rows and columns but refers to the axises only as main and inline.

5. 8.2 Baseline Alignment Terminology https://drafts.csswg.org/css-align/#baseline-terms

In this section the column or row naming is used as the main axis name. With inline or block in parentheses. Flexbox only uses the main naming.

"table cells in the same row, along the table’s row (inline) axis, established by the row box
table cells in the same column, along the table’s column (block) axis, established by the column box
grid items in the same row, along the grid’s row (inline) axis, established by the grid container
grid items in the same column, along the grid’s colum (block) axis, established by the grid container
flex items in the same flex line, along the flex container’s main axis, established by the flex container"

[tabatkins]

Flexbox's main/cross terminology is actually completely distinct from inline/block or row/column - it depends on the flex-direction. The main axis can be inline (it is by default, with flex-direction:row) or block (with flex-direction: column). Because flexbox is as direction-agnostic as we can be, we had to invent new terms that refer to the directions that a flexbox grows in.

The "main/inline vs cross/block" bit is because the justify/align split is arranged in that way - all the justify properties apply to the main or inline axis, depending on the display mode, while all the align properties apply to the cross or block axis.

Row/column are indeed synonyms of inline/block, but as you point out, everywhere we use row/column in Align we also put inline/block. It's mostly used as a simple reminder of what block/inline directions are - it's immediately clear what directions rows and columns go in, while people who are newer to the logical directions may not have as clear an understanding of what directions "block" and "inline" are. In the flexbox example at the end, it uses only the "main" naming, because that's correct - it aligns along the main axis, which might be either the inline or the block axis.

(We actually had a serious proposal to use "row" and "column" for the logical axis names, back when we were first deciding on the names, because they're clearer and more physically intuitive. But they don't read as well in some circumstances, and in a case like Grid, selecting a row position moves you along the column axis, so there's a possibility of confusion in cases like that.)

---

So, I'm not quite clear what you'd like changed here.

[rachelandrew]

I'd like it to be less confusing for authors, because it is confusing to authors.

If we aren't able to make the naming more consistent, then at the very least can we define and explain the terms somewhere, for those people who won't be doing archeology on Github threads to find out why the naming is so?

"Also, that we ensure there is a clear definition somewhere of naming. As requested in the linked issue above. That might be in the individual specs - however for something like column and row this is already used in this spec to refer to table and grid axises, which might be an argument to define terminology here."

If we have a clear explanation then that gives those of us who teach people this stuff a single reference point to direct people to, rather than needing to pull references from across a range of specifications. I think that is what the commenters in the linked thread were also keen to see.

[tabatkins]

The terms are defined and explained, in their appropriate specs (Writing Modes and Flexbox), and most instances of them in Align are linked accordingly.

[fantasai]

@rachelandrew To follow-up on Tab’s comment, we don't understand what specific edits you're asking for, since as far as we can tell the axis names are clearly defined and cross-linked everywhere.

[fantasai]

Note, the terms “row axis” and “column axis” were removed from the CSS Grid 1 spec in #1299 so at least that set of terms should be entirely removed from css-align now.

[tabatkins]

Okay, we removed the row/column axis. @rachelandrew, your original complaint also involved us talking about the main/cross axis. We need to keep those, because they're not synonyms of inline/block - are the current usages sufficiently clear?