Re: [csswg-drafts] [css-align] `justify-items` and anonymous block boxes (#11461)

Under the revised specification, to maintain the layout as it currently appears in Chrome:

```html
<!DOCTYPE html>
<div style="justify-items: end;">
  A
  <div style="background-color: red; width: 50px;">A</div>
  B
  <div style="background-color: red; width: 50px;">B</div>
  C
  <div style="background-color: red; width: 50px;">C</div>
</div>
```

We will need to code:

```html
<!DOCTYPE html>
<div style="justify-items: end; text-align: right;">
  A
  <div style="background-color: green; text-align: left; width: 50px;">A</div>
  B
  <div style="background-color: green; text-align: left; width: 50px;">B</div>
  C
  <div style="background-color: green; text-align: left; width: 50px;">C</div>
</div>
```

Because apparently, under the current behavior, text node alignment is an exercise in unpredictability, as seen in cases like:

1. When this:

```html
<!DOCTYPE html>
<div>
  A
</div>
```

is mutated to:

```html
<!DOCTYPE html>
<div style="justify-items: end;">
  A
  <div>B</div>
</div>
```

2. Or when this:

```html
<!DOCTYPE html>
<div style="justify-items: end;">
  <div>B</div>
</div>
```

is mutated to:

```html
<!DOCTYPE html>
<div style="justify-items: end;">
  A
  <div>B</div>
</div>
```

In both scenarios, A and B align the same way, which is, of course, totally not what everyone expected. Or not. Interesting.

-- 
GitHub Notification of comment by gitspeaks
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11461#issuecomment-2881602297 using your GitHub account


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

Received on Wednesday, 14 May 2025 21:17:04 UTC