[csswg-drafts] [css-grid] Design rationale behind grid lines starting at index 1 ? Contrary to 0 origin in all coordinate systems! (#8490)

porg has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid] Design rationale behind grid lines starting at index 1 ? Contrary to 0 origin in all coordinate systems! ==
- This is no change request at all. Way too late! This is more of an "academic" question:
  - **What were the design considerations of the original/later authors behind grid lines starting to count at 1?**

- Please answered here in this very issue. Plus later in a section of the spec, if adequate.
  - A specification usually only states ***how*** something shall be, but mostly not ***why*** something is as it is.
  - But in some specs, at least regarding fundamental principles, rationales or certain Don't-s are explicitly and transparently stated. To spare re-evaluations and/or prevent later changes and common pitfalls already ruled out for good reasons.
  - So maybe in the section 3, entitled [Core Concepts of the Grid](https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-concepts) (in the original working draft 20110407), now [Grid Layout Concepts and Terminology](https://www.w3.org/TR/2020/CRD-css-grid-1-20201218/) (valid 20201218 version), the essence of the design rationales and/or a link to an extended pro/con evaluation would be appreciated!

## CSS Grid Lines — Line Count starts at 1

<img src="https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/images/grid-concepts.png" alt="CSS Grid Layout Working Draft 20110407, Figure 7: A diagram illustrating the relationship between the Grid element and its Tracks, Lines, Cells and Items." width=400>

Source: Figure 7 shown in section 3 [Core Concepts of the Grid](https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-concepts) (original 20110407 working draft)

## Geometry — All Coordinate Systems use 0 as their origin point

<img src="https://upload.wikimedia.org/wikipedia/commons/9/93/Number-line.svg" alt="Number line" width=400>

<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Cartesian-coordinate-system.svg" alt="Cartesian coordinate system" width=200> <img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Coord_planes_color.svg" alt="Euclidian space" width=200>

*Images sources: All from the respective linked Wikipedia articles.*

- The origin point of a coordinate system is at 0 in 1D, 2D, and 3D.
- Every pupil learns that at school.
  - 0 (x) in [1D](https://en.wikipedia.org/wiki/One-dimensional_space) on a [Number line](https://en.wikipedia.org/wiki/Number_line)
  - 0/0 (x/y) in [2D](https://en.wikipedia.org/wiki/Two-dimensional_space), the [Cartesian coordinate system](https://en.wikipedia.org/wiki/Cartesian_coordinate_system)
  - 0/0/0 (x/y/z) in [3D](https://en.wikipedia.org/wiki/Three-dimensional_space), the [Euclidian space](https://en.wikipedia.org/wiki/Euclidean_space)

## Practical reason behind origin 0 for geometrical applications seems obvious
- Put your finger at 0.
- Now you can very easily express both vectors or dimensions.
  - Vector: e.g. move an object by 3 units: Move finger to 1,2,3. Done.
  - Dimension: e.g. object shall be 5 units long. Move finger to 1,2,3,4,5. Done.
  - No +1 offset. Very easy.

## Problems with CSS grid line numbering in the spatial mental model of the user

<img src="https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/images/grid-concepts.png" alt="CSS Grid Layout Working Draft 20110407, Figure 7: A diagram illustrating the relationship between the Grid element and its Tracks, Lines, Cells and Items." width=400>

- With the short syntax forms like `grid-column: item1-start / item1-end;` I somehow still manage to get it right.
  - You start at line 1 and end at line 2.
  - But what you have created is track nr 1.
  - You note the offset?
- At latest with the shorthand formats which state more positional values my mental gymnastics problems start:
`grid-area: row-start / column-start / row-end / column-end` this always breaks my mental process. Why?
  - The (seemingly) analogous expression in a coordinate system is `p1x / p1y / p2x / p2y`.
  - But then you always need to add "+1".
    - This complicates things with the human mathematical short term memory!
    - Not only in the original calculation. But also when further spanning/shifting.
    - Always one extra computation step. Complicates it unnecessarily.
  - I very often catch myself to make mistakes with this, and only get it right at the second try or after some trial-n-error.
- Why was this usability / practicality issue not caught during speficication?
  - Or did the advantages of a "consistent 1-index in CSS lingo" outweigh that particular con?
    > Probably because all of CSS uses 1-index (ex: :nth-child)
    [justintoon](https://news.ycombinator.com/user?id=justintoon) [on Dec 24, 2018](https://news.ycombinator.com/item?id=18753616#18754813)
   

## My attempts to search for reasons in the spec

[3. Core Concepts of the Grid](https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-concepts)
- Nothing at all which could serve as an explanation.
- If somewhere in the specification then I would have expected it here, given the section title.
- Here would be a worthy place to state the rationales/considerations.

[6.2 Named Grid Lines](https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-named-grid-lines)
- A short explanation:
  > When a name is not specified, Grid Lines can be referred to in the order which they occur.  The first line is 1, the second 2 and so on.
- But no reasons stated. Would also be inappropriate here.

[7. Placing Grid Items](https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-item-placement)
- That's closest to how you work in a coordinate system, so if stating a memory hook, then here.
- But found no explanation/hint here either.



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8490 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 23 February 2023 12:58:56 UTC