W3C home > Mailing lists > Public > public-css-archive@w3.org > October 2019

[csswg-drafts] [css-lists] How should spaces be treated in markers? (#4448)

From: Oriol Brufau via GitHub <sysbot+gh@w3.org>
Date: Thu, 24 Oct 2019 17:29:37 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-512080494-1571938176-sysbot+gh@w3.org>
Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [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?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4448 using your GitHub account
Received on Thursday, 24 October 2019 17:29:39 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:55 UTC