Consider default CSS?

[matklad]

This is very much a feature-creep issue, but one which is perhaps worth considering.

For djot-as-a-cli-tool, it would be nice if the resulting html file included some minimal css to make output aesthetically nice to look at. That would provide two benefits:

• convenience for the users: if you are writing some quick ad-hoc note, it would be very useful if you can djot note.dj and get an .html output which you can immediately present (bonus points if you can use browser's "print" functionality to render that to a beautiful pdf).
• brand recognition: asciidoctor's default stylesheet is very recognizable, so, when you see, eg, https://shipilev.net/labs/threadripper-efficiency/, you immediately know it's powered by asciidoctor. "looks nicely by default" would be a bad reason to use djot, but I imagine that would be a very practically effective reason none-the-less.

---

• doing this right obviously requires some non-trivial css skills and good web-design taste
• as djot is new, we can assume modern browser, and that makes writing css much more straightforward
• we can take a stance that djot is primarily a library/spec, and let someone else to build eyecandy on top. That's reasonable, though I feel that defaults really do matter in this case.

[jgm]

Yes, I think this is a reasonable thing to want. Perhaps as in pandoc we could put this under a --standalone/-s flag.

[jgm]

https://github.com/jgm/djot.js/issues/32#issuecomment-1377574381

[matklad]

That does look nice, just re-using pandoc's css is an obviously great starting point!

I am wondering if perhaps --standalone should be the default (again, for the binary tool, definitely not for the library). It perhaps is true that most production uses would not want standalone documents (though, even this is unclear to me), but for a new user $ djot hello.dj producing a nice output by default seems beneficial: it's easier to google "how do I disable default css I don't want" than to realize it is possible to google for "how do I use default css".

[tbdalgaard]

I much prefer that a stand-alone option should be appended instead of that being the default.As much as I like the theory of Pandoc templates, the concept never clicked to me. Instead I want to customize documents and get what I have explicitly typed, and nothing else. If this default css-template system is implemented I really hope that it doesn't get so advanced as the Pandoc template system did. For a regular user this gets very advanced very quickly. But if that is the way to go, please make some very detailed, documentation for users that are not familiar with programming.

[jgm]

For future reference, here's the CSS we use on the playground to make task lists work:

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;
}