jgm/djot.js

Consider default CSS?

matklad opened this issue · 5 comments

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 commented

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

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".

jgm commented

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