Feature idea: Content alignement based on position of the selector inside a zone

[sylvainpolletvillard]

Should we align zone content based on position of the selector inside the zone ?

Proposed rules:

• selector on the first line of at least three : align-self: start
• selector on the last line of at least three: align-self: end
• selector with zero spaces left and at least two spaces right : justify-self: start
• selector with zero spaces right and at least two spaces left: justify-self: end

Advantages

• follow the same principle than for grid alignement ; less concepts to learn
• simplify the syntax
• < > ^ v are weird and ↓ ↑ ← → are hard to get on regular keyboards

Disadvantages

• how to differentiate align/justify-self: center and stretch ?
• require larger zones / possible redraws
• 3 rows are required at least to set vertical content alignement

Feedback needed

[pixxx]

That's some serious question here, right of the bat i'd say yes, but looking at it further, with this drawings would always need 3 rows for top/bottom alignment, while with arrows you can keep it single row if I see this correctly, but this might also be the only difference actually and making 2 rows is like nothing compared to having to search for arrows. Hmm, seems like a good idea... Is this purely to simplify the drawings or is there others reasons behind this suggestion?

[sylvainpolletvillard]

I put all the reasoning in the advantages section. I tried to replace those arrows for a long time but did not find a good solution so far.

If we manage to find out how to differentiate stretch and center with this idea, I think the "3-rows" requirement is tolerable.

[pixxx]

You could easily use + -, maybe something like this

┌─────────────────────┐
│          -  <center │
│        +Top+<stretch│
│          -          │
└─────────────────────┘

At least this is easily on every keyboard or you using it for something else already. And maybe one of each would do probably, was just a quick idea on it. Edit: Nah you'd need 2 of each to describe them all, and using +- is kinda easy and doesn't seem to weird.

[sylvainpolletvillard]

It is mandatory to keep stretch as the default behaviour, in order to limit the breaking changes and because stretch is the most commoly used by far.

My ideas so far:

A)

+------------------+     +-------------------+
|                  |     |                   |
|                  |     |    +----------+   |
|     .stretch     |     |    | .center  |   |
|                  |     |    +----------+   |
|                  |     |                   |
+------------------+     +-------------------+

It is visually intuitive but we have to make it clear that the inside zone is not a Grid area, and so does not follow the same rules than the rest of grid-kiss syntax. So it may lead to a lot of confusion. Also, it would require lots of rewriting in the zone parsing code.

B)

+------------------+     +-------------------+   
|                  |     |         *         |   
|                  |     |                   |   
|     .stretch     |     |    * .center  *   |   
|                  |     |                   |   
|                  |     |         *         |   
+------------------+     +-------------------+   

Considering that the wildcard is an alias for auto, and fill any space available on the corresponding side. We could also imagine to replace all the arrows with wildcards;

  +-------------------+   +--------------------+
  |                   |   |         *          |
  |                   |   |                    |
  |    .top-left  *   |   | .vertically-center |
  |                   |   |                    |
  |         *         |   |         *          |
  +-------------------+   +--------------------+

Advantages

• giving space for the wildcard naturally push the selector on the desired side, and so make it visually intuitive
• there is no breaking change, if we deprecate arrows before removing them

Disadvantages:

• * is a valid CSS selector, even if it makes no sense to use it in the context of a grid area selector
• less intuitive than arrows

[pixxx]

Yeah, stretch is default true, any other favorable characters on your mind except wildcard? Was gonna draw up some sketches in mono and post'm here, maybe it sparks an idea or something...

[pixxx]

Guess this is the chars to look at for use

! " # $ % & ' ( ) * + , - . / : ; < = > ? @ [ \ ] ^ _ ` { | } ~            

[sylvainpolletvillard]

Other alternative, inner zone without corners:

C)

+------------------+     +-------------------+      +-------------------+   +--------------------+
|                  |     |                   |      |  .top-left  |     |   |                    |
|                  |     |         -         |      | -----------       |   |--------------------|
|     .stretch     |     |    | .center |    |      |                   |   | .vertically-center |
|                  |     |         -         |      |                   |   |--------------------|
|                  |     |                   |      |                   |   |                    |
+------------------+     +-------------------+      +-------------------+   +--------------------+

Note that finding a character to replace arrows is not the only option here. My first idea requires no new characters and no syntax to learn.

[pixxx]

Hmm going back to your first example it seems like the easiest and without anything like you showed in your first, 3 rows saves all the hassle it seems, hmm I'm confused now 🤣

┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│TopLeft           │ │                  │ │                  │
│                  │ │      Center      │ │                  │
│                  │ │                  │ │       BottomRight│
└──────────────────┘ └──────────────────┘ └──────────────────┘

Edit: maybe just mono draw alignments that make it look so easy, but this makes most sense and is easiest on the eye I think, very easy to understand like this.

[pixxx]

So yeah I'd certainly favor your very first idea, indeed!!! 3 rows is KING!

[sylvainpolletvillard]

We should work on real layouts to get a better idea

Which one is the more readable in your opinion ?

"+------------------------------+      "            "+------------------------------+      "
"|           header ↑           | 120px"            "|           header             |      "
"+------------------------------+      "            "|------------------------------| 120px"
"                                      "            "|                              |      "
"+--150px-----+  +--- auto -----+      "            "+------------------------------+      "
"| .sidebar ← |  |     main     | auto "            "                                      "
"+------------+  +--------------+      "            "+----150px-----+  +-- auto ----+      "
"                                      "            "|          |   |  |            |      "
"+------------------------------+      "            "|.sidebar  |   |  |    main    | auto "
"|              ↓               |      "            "|          |   |  |            |      "
"|         → footer ←           | 60px "            "+--------------+  +------------+      "
"+------------------------------+      "            "                                      "
                                                    "+------------------------------+      "
                                                    "|                              |      "
                                                    "|          --------            | 60px "
                                                    "|         | footer |           |      "
                                                    "+------------------------------+      "

[sylvainpolletvillard]

After long time thinking, I think the change is currently not worth it. Most of time the zones are not large enough to get a visual intuition of the content alignement based on position of the selector. It is a good idea if zones are extra large, but a bad idea for most of practical examples.