Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/w3c/csswg-drafts/issues/4448 below:

[css-lists] How should spaces be treated in markers? · Issue #4448 · w3c/csswg-drafts · GitHub

The white-space property doesn't apply to markers, but how do spaces behave in markers?

Consider

<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>

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?

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.3