[css-lists] How should spaces be treated in markers?


The `white-space` property doesn't apply to markers, but how do spaces behave in markers?

Consider

```html
<ol>
  <li class="marker default inside space-1">-</li>
  <li class="marker default inside space-2">-</li>
  <li class="marker default inside space-n">-</li>
  <li class="marker default outside space-1">-</li>
  <li class="marker default outside space-2">-</li>
  <li class="marker default outside space-n">-</li>
  <li class="marker pre inside space-1">-</li>
  <li class="marker pre inside space-2">-</li>
  <li class="marker pre inside space-n">-</li>
  <li class="marker pre outside space-1">-</li>
  <li class="marker pre outside space-2">-</li>
  <li class="marker pre outside space-n">-</li>
  <li class="type default inside space-1">-</li>
  <li class="type default inside space-2">-</li>
  <li class="type default inside space-n">-</li>
  <li class="type default outside space-1">-</li>
  <li class="type default outside space-2">-</li>
  <li class="type default outside space-n">-</li>
  <li class="type pre inside space-1">-</li>
  <li class="type pre inside space-2">-</li>
  <li class="type pre inside space-n">-</li>
  <li class="type pre outside space-1">-</li>
  <li class="type pre outside space-2">-</li>
  <li class="type pre outside space-n">-</li>
</ol>
```
```css
ol { font-family: monospace}
.pre { white-space: pre }
.inside { list-style-position: inside }
.marker.space-1::marker { content: 'a b' }
.marker.space-2::marker { content: 'a  b' }
.marker.space-n::marker { content: 'a\a b' }
.type.space-1 { list-style-type: 'a b' }
.type.space-2 { list-style-type: 'a  b' }
.type.space-n { list-style-type: 'a\a b' }
```

The results in Firefox, Chromium legacy and Chromium with LayoutNG and look like

```
          | Firefox   | Chrome leg| Chrome NG |
| ------- | --------- | --------- | --------- |
| marker  |     a b-  |     1. -  |     1. -  |
| default |     a b-  |     2. -  |     2. -  |
| inside  |     a b-  |     3. -  |     3. -  |
| ------- | --------- | --------- | --------- |
| marker  |  a b-     |  4. -     |  4. -     |
| default |  a b-     |  5. -     |  5. -     |
| outside |  a b-     |  6. -     |  6. -     |
| ------- | --------- | --------- | --------- |
| marker  |     a b-  |     7. -  |     7. -  |
| pre     |     a  b- |     8. -  |     8. -  |
| inside  |     a     |     9. -  |     9. -  |
|         |     b-    |           |           |
| ------- | --------- | --------- | --------- |
| marker  |  a b-     | 10. -     | 10. -     |
| pre     | a  b-     | 11. -     | 11. -     |
| outside |    a      | 12. -     | 12. -     |
|         |    b-     |           |           |
| ------- | --------- | --------- | --------- |
| type    |     a b-  |     a b-  |     a b-  |
| default |     a  b- |     a  b- |     a b-  |
| inside  |     ab-   |     a b-  |     a b-  |
| ------- | --------- | --------- | --------- |
| type    |  a b-     |  a b-     |  a b-     |
| default | a  b-     | a  b-     | a  b-     |
| outside |   ab-     |  a b-     |    a      |
|         |           |           |    b-     |
| ------- | --------- | --------- | --------- |
| type    |     a b-  |     a b-  |     a b-  |
| pre     |     a  b- |     a  b- |     a  b- |
| inside  |     ab-   |     a b-  |     a     |
|         |           |           |     b-    |
| ------- | --------- | --------- | --------- |
| type    |  a b-     |  a b-     |  a b-     |
| pre     | a  b-     | a  b-     | a  b-     |
| outside |   ab-     |  a b-     |    a      |
|         |           |           |    b-     |
```

That is:

 - In Firefox,
    - ::marker's `content` obeys the `white-space` property inherited from the list-item.
    - `list-style-type` ignores `white-space`, and
       - spaces are preserved
       - newlines are removed (really removed, not just collapsed)
    - Presumably `list-style-type` will obey `white-space` after https://bugzil.la/1542807
 - In Chromium with legacy layout,
   - ::marker is not supported
   - `list-style-type` ignores `white-space`, and
      - spaces are preserved
      - newlines are collapsed into spaces.
 - In Chromium with LayoutNG,
   - ::marker is not supported
   - For inside positioning, `list-style-type` obeys the `white-space` property inherited from the list-item
   - For outside positioning, `list-style-type` uses `white-space: pre`

What's the expected behavior?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[css-lists] How should spaces be treated in markers? #4448

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[css-lists] How should spaces be treated in markers? #4448

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions