[csswg-drafts] [css-sizing-3] Use-case for intrinsic multicolumn sizes (#6961)

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

== [css-sizing-3] Use-case for intrinsic multicolumn sizes ==
Addressing [this part in the 2021-12-17 document status](https://www.w3.org/TR/2021/WD-css-sizing-3-20211217/#sotd):

> The following features are at-risk, and may be dropped during the CR period:
> 
> - Additions to `column-width`

I recently styled a layout of [a rather long unordered list](https://code.ti.gt/ptv/dex/cleffa-family/) where `column-width: max-content` would have been exactly what I was looking for:

<details>
<summary>Screenshots of layout across viewport widths</summary>
<img alt="widest" src="https://user-images.githubusercontent.com/8072522/149790312-05856502-f2a6-40cd-93bd-fae4453bba14.png" width="720" height="212">
<img alt="wide" src="https://user-images.githubusercontent.com/8072522/149790311-3517068a-7194-48b2-b976-5d44d38a1339.png" width="688" height="242">
<img alt="middle" src="https://user-images.githubusercontent.com/8072522/149790309-343e117a-37ac-4470-b37d-33d35732ca1d.png" width="476" height="350">
<img alt="narrow" src="https://user-images.githubusercontent.com/8072522/149790308-bdf33955-918d-4e42-9e6b-27552f9e446b.png" width="243" height="545">
<img alt="narrowest" src="https://user-images.githubusercontent.com/8072522/149790307-782e548b-5529-44ee-a885-43fc0dea55dc.png" width="157" height="703">

</details>

<details>
<summary>Source code</summary>

```css
.mon_moves {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.tutor-moves {
  flex: 1;
}

.tutor-moves_heading {
  margin: 0;
}

.tutor-moves_list {
  margin: 0;
  padding: 0;
  list-style: inside;
  columns: max-content;
}
li { /* specifically for CSS multicolumn fragmentation, but good for printing too */
  break-inside: avoid;
}
```

```html
<section class=mon_moves>
  <h3 class=moves_heading>Moves</h3>

  <table class=moves_table>
    <thead>
      <th>Level<th>Learns
    </thead>
    <tr><th>1
      <td><a href=/ptv/moves/#pound>Pound</a>, <a href=/ptv/moves/#sing>Sing</a>, <a
          href=/ptv/moves/#copycat>Copycat</a>, <a href=/ptv/moves/#defense-curl>Defense Curl</a>
    <tr><th>2
      <td><a href=/ptv/moves/#sweet-kiss>Sweet Kiss</a>
    <tr><th>3
      <td><a href=/ptv/moves/#disarming-voice>Disarming Voice</a>
    <!-- … -->
    <tr><th>14
      <td><a href=/ptv/moves/#astral-barrage>Astral Barrage</a>
  </table>

  <section class=tutor-moves>
    <h4 class=tutor-moves_heading>Tutor Moves</h4>

    <ul class=tutor-moves_list>
      <li><a href=/ptv/moves/#ally-switch>Ally Switch</a>
      <li><a href=/ptv/moves/#amnesia>Amnesia</a>
      <!-- … -->
      <li><a href=/ptv/moves/#zen-headbutt>Zen Headbutt</a>
    </ul>
  </section>
</section>
```

</details>

Right now I use a magic number instead with `columns: 8em`, but that can waste space if the item names are short, and wraps in an ugly way for item names that are too long. These issues are exacerbated by (auto-)translation — CJK ideographics always look like they’re wasting space, and German almost always triggers the ugly wrapping.

I tried flexbox and grid, but neither have desirable behavior: Grid’s `repeat(auto-* …)` wrapping doesn’t (yet?) allow truly intrinsic sizing either and fills the items ltr-tb instead of tb-ltr, and flexbox needs explicit height to wrap in the way I want — which largely defeats the point of handling unknown amounts of content across unknown viewports.

I know the “at-risk” status mostly has to do with implementer appetite, but I figured a good real use-case can only help.


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


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

Received on Tuesday, 18 January 2022 00:39:23 UTC