Requirements for the layout of rosters

[xfq]

Although it is not a high priority, we can write about the layout requirements of rosters (人员名册), because this requirement cannot be easily implemented using HTML and CSS at present. For example, if we specify the column width as "three characters", if there are only two characters, there is an ideographic space in the middle; if the name is too long, the subsequent names start from the next column, etc. This kind of list is common in traditional media.

虽然不是高优先级，不过我们可以写一下人员名册的排版需求，因为这个需求目前也无法使用HTML和CSS简单地实现。比如以「占三格」为栏宽，如果只有两个字，则中间空一个汉字宽；如果人名过长，则其后的姓名从下一栏开始等。

[xfq]

Here is an example:

The second line is not aligned correctly, but it reflects the general meaning.

[xfq]

@fantasai @frivoal How do you think this should be achieved?

[frivoal]

A quick attempt at copy and pasting the text from the image above gives

李明
孙墨轩
刘梦琪
休伯特·布莱因
赵琪
张伟强
张晨光
刘梦琪
林小雨
李思宇
陈子轩
钱欣然
王浩然
赵雨欣

[xfq]

Thanks Florian, I fixed a few typos in that list.

[xfq]

Discussion in TPAC 2025: https://www.w3.org/2025/11/09-i18n-minutes.html#3b13

[AmeroHan]

Only the requirement that "if the name is too long, the subsequent names start from the next column" is unable to implement using HTML and CSS.

.roster {
  display: grid;
  grid-template-columns: repeat(3, 3ic);
  gap: 0.5ic 1ic;
  padding: 0;
  margin: 2ic;

  li {
    display: block;
    text-align-last: justify;
    background-color: aquamarine;
  }
}

<ul class="roster">
  <li>李明</li>
  <li>孙墨轩</li>
  <li>刘梦琪</li>
  <li>休伯特·布莱因</li>
  <li>赵琪</li>
  <li>张伟强</li>
  <li>张晨光</li>
  <li>刘梦琪</li>
  <li>林小雨</li>
  <li>李思宇</li>
  <li>陈子轩</li>
  <li>钱欣然</li>
  <li>王浩然</li>
  <li>赵雨欣</li>
</ul>

There should be an approach for CSS in the future to make cells automatically occupy 2 or more columns when their max-content exceed column width.

[AmeroHan]

Flex can be used if your gap has a fixed length, which means justify-content cannot be space-*.

.roster {
  --row-gap: 0.5ic;
  --column-gap: 1ic;
  --column-width: 3ic;
  --column-count: 3;
  display: flex;
  flex-wrap: wrap;
  width: calc(
    var(--column-width) * var(--column-count)
    + var(--column-gap) * (var(--column-count) - 1)
  );
  gap: var(--row-gap) var(--column-gap);
  padding: 0;
  margin: 2ic;

  li {
    display: block;
    text-align-last: justify;
    background-color: aquamarine;
    width: calc-size(
      max-content,
      var(--column-width)
      + round(
        up,
        size - var(--column-width),
        var(--column-width) + var(--column-gap)
      )
    );
  }
}

Interactive test

[r12a]

Try this.

[eemeli]

Apparently I never actually submitted this yesterday. It gets pretty close, though it does require explicitly marking the long name rather than detecting it.

Solutions here appear to not be universal, as Firefox doesn't support calc-size(), while Chromium browsers don't support text-justify: inter-character.

[frivoal]

Filed https://github.com/w3c/csswg-drafts/issues/13131 to propose plugging the missing functionality identified in grid by @AmeroHan in https://github.com/w3c/clreq/issues/268#issuecomment-3511541772