search

squidfunk / mkdocs-material

Documentation that simply works
https://squidfunk.github.io/mkdocs-material/
MIT License
20.29k stars 3.48k forks source link

<ol> style type based on `type` attribute #7542

Open joapuiib opened 1 day ago

joapuiib commented 1 day ago

Context

I'm using a Markdown extension that allows writing different types of lists.

Description

The following CSS overrides the default list styles, so the first nested <ol> will always be rendered as alphabetic regarding the type attribute.

https://github.com/squidfunk/mkdocs-material/blob/c6286de144b5682b74cd35167711da5ae2a15221/src/templates/assets/stylesheets/main/_typeset.scss#L331-L339

Could this be set only if <ol> doesn't have a specific type?

ol, ul {
  // Nested ordered list
  ol:not([type]) { 
     list-style-type: lower-alpha;
  }

  ol, ul {
     // Triply nested ordered list 
    ol:not([type]) { 
       list-style-type: lower-roman; 
    }
  }
}

Related links

Use Cases

For example, writing:

1. List item
2. List item
    1. List item
    2. List item
    3. List item

Will result on:

1. List item
2. List item
    a. List item
    b. List item
    c. List item

Instead of:

1. List item
2. List item
    1. List item
    2. List item
    3. List item

Which might not always be desirable.

Visuals

No response

Before submitting

alexvoss commented 1 day ago

I have gone and deleted the comment because it seemed to contain a link to a dodgy website hidden behind a blt.ly link. The text around the link does not seem to have anything to do with the question, so, um, a bot? @joapuiib, perhaps also remove the link from our last comment so no one clicks on it?

joapuiib commented 1 day ago

I have gone and deleted the comment because it seemed to contain a link to a dodgy website hidden behind a blt.ly link. The text around the link does not seem to have anything to do with the question, so, um, a bot? @joapuiib, perhaps also remove the link from our last comment so no one clicks on it?

I've removed my comment as well. Thanks!

alexvoss commented 1 day ago

On the substance of your question: I see that this is getting factored into pymdownx, so IMHO it would be appropriate to support this. @squidfunk will need to make the call and has infinitely more experience with this. My view is that this could break something only in unlikely edge cases, so should be ok to change. Someone would need to have a type attribute on their ol elements but expect it to be overridden by the CSS. Hope I am not holding the wrong end of the stick there.

facelessuser commented 1 day ago

It is definitely something I am exploring. A simple override is all that is required to get them working. I don't think lists anywhere are getting type currently unless someone is purposely adding them manually. I'm fairly certain that if I add this extension it won't break anything and people can opt in with some CSS assuming they decide to use this extension. If Material looks for types and avoids the styles automatically, the override will not be needed and I think it will just give people options.

I am still playing around with things, but I imagine if I pull the trigger on this extension some people may disable extra list types or not use the extension. It wouldn't surprise if some people don't opt-in to extra list types because they don't want to add another plugin, they use some other list plugin for some other feature, or simply don't want to use it because their editor won't automatically highlight the new list types in Markdown.

It's an interesting idea for those who want list control, but not everyone has this need. The plan would be to only support the additional list types of both uppercased and lowercased alphatically sorted lists (a-z) and Roman numeral lists.

facelessuser commented 1 day ago

I guess if people want to override it now, all they need is:

.md-typeset {
  /* Override Material's list type preference. */
  ol ol[type]{
    // Nested ordered list
    list-style-type: revert-layer;

    // Triply nested ordered list
    ol[type] {
      list-style-type: revert-layer;
    }
  }
}
facelessuser commented 1 day ago

Actually, it is even easier (I didn't account for ul nesting).


  /* Override Material's list type preference. */
.md-typeset {
  ol[type]{
    // Nested ordered list
    list-style-type: revert-layer;
  }
}
squidfunk commented 19 hours ago

Thanks for reporting. As mentioned, we could probably defensively scope our styles to ol:not([type]), or more specifically the list-style-type property without breaking anything. This would be the mirror of the workaround posted in https://github.com/squidfunk/mkdocs-material/issues/7542#issuecomment-2360898373, that would then become obsolete. Thanks for investigating to all of you, btw!

Would somebody like to propose a PR?

joapuiib commented 17 hours ago

Would somebody like to propose a PR?

I'll try in the next few days! Thanks you all for your feedback!

squidfunk commented 6 hours ago

I was working on other issues and also fixed this in 68b675854. In this commit, I've also added the same fix to the list style type of ul, which can now also be explicitly set. Before, I thought I was clever and added the changes in 85d609183, but that would be a breaking change for when users have deliberately overridden list-style-type on ul or ol. The only downside is that when you use type, the defaults are not applied anymore on any layer, so all ol inside an ol with type will be numbered with 1., 2., ... I think this is fine, or could be even desired, as you're making things explicit.

squidfunk commented 6 hours ago

Note that I used revert and not revert-layer, as we're currently not using Cascade Layers.

facelessuser commented 2 hours ago

Note that I used revert and not revert-layer, as we're currently not using Cascade Layers.

I didn't even notice that was what I used...either way, looks great!