Markdown list formatting CSS enhancements

[rmattb]

@mstenta

for numbered lists you have to type out the numbers you want

The terminology gets tricky. For my SOP example intended to be stored as a versioned farm_document asset (in previously attached file), I did not have to specify siblings incrementally as 1., 2., 3., because markdown supports auto-incrementing of siblings with a source code of 1., 1., 1, which converts to an html ordered list.
(At least the documentation and the pandoc converter do.)

Markdown source:

1. ## Introduction (html heading test level 2)
    1. ### Background (html heading test level 3)
        1. Lorem ipsum ...
    1. ### Purpose (html heading test level 3)
        1. Lorem ipsum ...
    1. ### Scope (html heading test level 3)
        1. Lorem ipsum ...
1. ## Materials (html heading test level 2)
    1. ### Required equipment (html heading test level 3)
        1. #### Primary tools (html heading test level 4)
        1. #### Secondary tools (html heading test level 4)
            1. item test 01
            1. item test 02
            1. item test 03
            1. item test 04

Screenshot of pandoc rendered html + custom css:

And the custom css:

            ol {
                counter-reset: item;
                list-style-type: none;
            }
            li {
                display: block;
            }
            li:before {
                content: counters(item, ".") ". ";
                counter-increment: item;
            }
            :where(article h2, article h3, article h4, article h5, article h6) {
                display: inline-block;
            }

@jgaehring

[mstenta]

@rmattb I decided to spin this off as it’s own topic from Support for Markdown in assets/logs/etc - #17, so that can stay focused on Markdown support generally and we can use this one to dig into the nitty gritty details for list formatting specifically…

From a dev process perspective, if we do add any CSS, I would do it in a separate pull request so that it can be highlighted as a distinct feature/change. So having a separate topic for that will help to distinguish this as a “next step” (even if it is included in the same 4.1.0 release as Markdown support generally).

@rmattb

Markdown source:

@rmattb I tested this input with the new markdown processing (without any additional CSS applied), and this is what it looks like:

So yes, it would require additional CSS to make the counters work the way you want.

(Side note: This also showed me that there’s an issue with the way the first heading item overlaps the “Notes:” field label… I’ll investigate that separately.)

@rmattb

            :where(article h2, article h3, article h4, article h5, article h6) {
                display: inline-block;
            }

I think this would affect all headings everywhere on the page, which would probably break Gin’s (the Drupal theme we use) styles.

So maybe the next step here would be to start a PR that starts making/suggesting some decisions about where this CSS lives, when/where it’s applied, etc, and testing that in the context of our existing styles.

If you want I can help get you set up to work on this on a dev call.

[rmattb]

Copying more formatting/css notes:

@rmattb

I tested my use case (headings with hierarchical/outline/legal numbering) with GFM markdown, which took some custom css, but what I’m after does work, see attached html + css file (rename removing .txt).
Note that I attempted to contain the css with an <article> element just for this example; farmos implementation might need .region-content or a field specific class. I think this css approach is useful for both html and md fields.

pandoc gfm to html5 output.html.txt (7.2 KB)

If you’re discussing such a document, it’s really handy to say, “Let’s talk about item 3.1.2.”

Also note the discussion of preventing use if h1 in user editable fields, per w3c. This should apply to both html and md fields.

References for h1 usage:

4.3.6 The h1, h2, h3, h4, h5, and h6 elements - HTML Standard

Use for top level heading - Quality Web Tips