search

jgm / djot.js

JavaScript implementation of djot
MIT License
146 stars 16 forks source link

Task lists not rendering as expected when converting from Djot to HTML #31

Closed tbdalgaard closed 1 year ago

tbdalgaard commented 1 year ago

When making a task list in Djot and converting it via djot.js the task list items are not rendered. It turns out that for this to work an standalone HTML-document must be presented.

Steps to reproduce:

Make a task list like.



- [ ] This is not a task well done.
- [ ] - [x] This task is done now.
- [ ] ```
Try to convert via djot like

djot -f djot -t html list.dj > list-converted.html

Open the HTML-document and you will find that the task list items did not render as expected.

This was tested on: Version 0.2.0
jgm commented 1 year ago

https://djot.net/playground/?text=-+%5B+%5D+unchecked%0A-+%5BX%5D+checked%0A

Yes, we just generate

<ul class="task-list">
<li class="unchecked">
</li>
<li class="checked">
</li>
</ul>

which will require some CSS to render properly. At the very least, we should write the appropriate CSS, put it in the documentation, and put it on the playground's style sheet!

Testing what GitHub does:

jgm commented 1 year ago

Pandoc does:

<ul class="task-list">
<li><input type="checkbox" disabled="" />unchecked</li>
<li><input type="checkbox" disabled="" checked="" />checked</li>
</ul>

with

    ul.task-list{list-style: none;}
    ul.task-list li input[type="checkbox"] {
      width: 0.8em;
      margin: 0 0.8em 0.2em -1.6em;
      vertical-align: middle;
    }
jgm commented 1 year ago

I think my original intent was to do a pure CSS implementation, but I have no idea what I had in mind specifically.

jgm commented 1 year ago

Proof of concept for pure CSS approach:

<!DOCTYPE html>
<meta charset="UTF-8">
<style>
ul.task-list {
  list-style: none;
}
ul.task-list > li {
  margin-left: 1.5em;
}
li.checked:before {
  content: "☑";
  margin-left: -1.5em;
  float: left;
}
li.unchecked:before {
  content: "☐";
  margin-left: -1.5em;
  float: left;
}

</style>
<ul class="task-list">
<li class="unchecked">
simple item with no p tag
</li>
<li class="checked">
  <p>two</p>
  <p>paragraphs</p>
</li>
<li class="checked">
<pre><code>some
code</code></pre>
</li>
</ul>
jgm commented 1 year ago

OK, I've updated the playground with this CSS:

ul.task-list {
  list-style: none;
  padding-left: 0.5em;
}
ul.task-list > li {
  margin-left: 1.5em;
  padding-left: 0;
}
li.checked:before {
  content: "☒";
  margin-left: -1.5em;
  float: left;
}
li.unchecked:before {
  content: "☐";
  margin-left: -1.5em;
  float: left;
}
tbdalgaard commented 1 year ago

Nice, glad to see it works there, hopefully it can be included in the CLI version of Djot.

Sendt fra min Mac Mini via Apple Mail

Den 9. jan. 2023 kl. 18.38 skrev John MacFarlane @.***>:

OK, I've updated the playground with this CSS:

ul.task-list { list-style: none; padding-left: 0.5em; } ul.task-list > li { margin-left: 1.5em; padding-left: 0; } li.checked:before { content: "☒"; margin-left: -1.5em; float: left; } li.unchecked:before { content: "☐"; margin-left: -1.5em; float: left; } — Reply to this email directly, view it on GitHub https://github.com/jgm/djot.js/issues/31#issuecomment-1375998633, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGGLXRT5NIMPX7LOBSJHJEDWRREIPANCNFSM6AAAAAATVMXSJ4. You are receiving this because you authored the thread.

jgm commented 1 year ago

See #33.