GFM tasklist extension issue

black-desk commented 2 years ago

This issue is related to:

Go check links above.

Expected Behavior

When parsing tasklist extension, Pandoc should produce html like cmark-gfm and github's api of which the checkbox is a sibling of the block-level content.

ls
# output:
# tasklist.md
cat tasklist.md
# output:
# - [ ] aaa
#
#   aaa
#
#   aaa
cmark-gfm -e tasklist ./tasklist.md -t html
# ouput:
# <ul>
# <li><input type="checkbox" disabled="" />
# <p>aaa</p>
# <p>aaa</p>
# <p>aaa</p>
# </li>
# </ul>
curl -X POST https://api.github.com/markdown -H 'Content-Type: text/plain ' -d '{"text":"- [ ] aaa\n\n  aaa\n\n  aaa","mode":"gfm"}'
# output:
# <ul class="contains-task-list">
# <li class="task-list-item">
# <p><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> aaa</p>
# <p>aaa</p>
# <p>aaa</p>
# </li>
# </ul>

Pandoc should make checkbox of tasklist item looklike some kind of special ::marker, which make the block-level content in this <li> aligned.

I expect something looks like this:

and as @mb21 said:

But usually you would want space between the check-mark and the text?

Pandoc should have the default css updated to show a visual gap between checkbox and text.

for example, github's css is:

and my css is:

https://github.com/black-desk/md2html/blob/master/html/header.html#L10-L14

Current Behavior

Pandoc produce tasklist item which have a checkbox inside first <p>:

ls
# output:
# tasklist.md
cat tasklist.md
# output:
# - [ ] aaa
#
#   aaa
#
#   aaa
pandoc tasklist.md
# ouput:
# <ul class="task-list">
# <li><p><input type="checkbox" disabled="" />aaa</p><p>aaa</p>
# <p>aaa</p></li>
# </ul>

Pandoc's default css looks werid:

And if we make the checkbox in right level, which means the html looks like:
```
<ul class="task-list">
<li><input type="checkbox" disabled="" /><p>aaa</p><p>aaa</p>
<p>aaa</p></li>
</ul>
```
which rendered to:

Version

pandoc version: build from 2abf56f508760a9a7711a00a4d3fd9fa83c6f61e, using ghc-8.10.7 on ArchLinux.

cmark-gfm version:

cmark-gfm --version
# ouput:
# cmark-gfm 0.29.0.gfm.2 - CommonMark with GitHub Flavored Markdown converter
# (C) 2014-2016 John MacFarlane

mb21 commented 2 years ago

Maybe there's a misunderstanding on my part, but to me it seems we have two basic outputs:

<li><input: produced by cmark-gfm
<li><p><input: produced by GitHub and pandoc

So cmark-gfm is the odd one out?

Regarding the original issue with the alignment, I feel pretty confident that we semantically should have a whitespace character between the checkbox and the rest of the text (whether that's a newline or simple space doesn't matter as they're equivalent in HTML).

Thus I would revert #8142 and to fix the issue with the alignment, add something like this to pandoc's default CSS:

    ul.task-list > li > p:not(:first-child) {
      margin-left: 1.3em;
    }

This will not affect deeper nested paragraphs.

Edit: or alternatively do what GitHub does, use CSS to give the checkbox negative margin-left...

black-desk commented 2 years ago

@mb21 I didn't notice response of github's API is different from cmark-gfm. Sorry for that.

But I prefer to have no whitespace between checkbox and text. Because it seems hard to find out the width of a whitespace in css.

- [ ] aa
  a

You can check how github render tasklist items, they are not aligned.

mb21 commented 2 years ago

Pretty sure the reason your change works is more of a coincidence and depending on which font and fontsize you use, the space will not always be the right size. This really needs to be solved in CSS.

mb21 commented 2 years ago

Yes, on closer inspection I think it's better to take the GitHub approach and move the checkboxes just as much left as we indent lists (because in normal lists, the list marker is outside the box, while the checkbox is inside the box.) So we should add the following CSS to pandoc's default template:

.task-list input[type="checkbox"] {
  margin-left: -1.7em;
}

try with the following markdown:

## unordered lists

- simple
- tight
- list

and a

- simple

- loose

- list

Now a

- multi-paragraph

  list

- containing

  > a nested
  >
  > blockquote

  - and a

  - nested

  - loose list

## task lists

- [ ] simple
- [ ] tight
- [ ] list

and a

- [ ] simple

- [ ] loose

- [ ] list

Now a

- [ ] multi-paragraph

  list

- [ ] containing

  > a nested
  >
  > blockquote

  - and a

  - nested

  - loose list

black-desk commented 2 years ago

May be I didn't express myself correctly. Let me try again:

After I remove the space between checkbox and text, paragraph alignment is possible with CSS like this:

.task-list input[type="checkbox"] {
        margin-right:0.2em;
        margin-left: -1.7em;
        width: 1.5em;
}

But with the space existed, I cannot find a way to compute the width of a space character in CSS, so it seems that it's impossible to let text aligned.

currently pandoc generate html like this:

<ul class="task-list">
<li><p><input type="checkbox" disabled="" />a</p><p>a</p>
<p>a</p></li>
</ul>

after apply css I write above, it looks like:

full html is:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
  <meta charset="utf-8" />
  <meta name="generator" content="pandoc" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
  <title>test</title>
  <style>
  .task-list input[type="checkbox"] {
          margin-right:0.2em;
          margin-left: -1.7em;
          width: 1.5em;
  }
  </style>
</head>
<body>
<ul class="task-list">
<li><p><input type="checkbox" disabled="" />a</p><p>a</p>
<p>a</p></li>
</ul>
</body>
</html>

Take a try.

You will get a 0.2 em width space between checkbox and text.

black-desk commented 2 years ago

@mb21 OK I didn't see your comment above. It seems you already have got what I mean.

mb21 commented 2 years ago

Great, I've made a PR: https://github.com/jgm/pandoc/pull/8163

jgm / pandoc