Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-lists] Should marker obey text properties? #4447

Closed
Loirooriol opened this issue Oct 24, 2019 · 1 comment
Closed

[css-lists] Should marker obey text properties? #4447

Loirooriol opened this issue Oct 24, 2019 · 1 comment
Labels
css-lists-3 Current Work

Comments

@Loirooriol
Copy link
Contributor

Loirooriol commented Oct 24, 2019

CSS Text properties don't apply to ::marker.

However, they are inheritable, so you can set them to the list item and observe the effect.

<ol class="type-roman"><li>content</li></ol>
<ol class="type-string"><li>content</li></ol>
<ol class="marker-roman"><li>content</li></ol>
<ol class="marker-string"><li>content</li></ol>
li { text-transform: uppercase }
.type-roman { list-style-type: lower-roman }
.type-string { list-style-type: 'i. ' }
.marker-roman ::marker { content: counter(list-item, lower-roman) '. ' }
.marker-string ::marker { content: 'i. ' }

Firefox renders it as

i. CONTENT
i. CONTENT
 I.CONTENT
 I.CONTENT

So it seems ::marker's content obeys text-transform just like a ::before would do, but list-style-type does not. But I guess https://bugzil.la/1542807 may make list-style-type obey text-transform.

(Also note that list-style-type behaves like there were white-space: pre, ::marker's content does not. Is this expected?).

Note that Chromium doesn't support ::marker yet, but recently I implemented list-style-type: <string>. With LayoutNG, the result looks like

I. CONTENT
I. CONTENT
1. CONTENT
1. CONTENT

So list-style-type obeys text-transform. But in legacy, list-style-type behaves like in Firefox:

i. CONTENT
i. CONTENT
1. CONTENT
1. CONTENT

What's the expected behavior?

@Loirooriol Loirooriol added the css-lists-3 Current Work label Oct 24, 2019
@Loirooriol
Copy link
Contributor Author

OK so I just noticed there already was #4206 about this. But this has more context and subcases, so I will copy the info there.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-lists-3 Current Work
Projects
None yet
Development

No branches or pull requests

1 participant