Checkbox within table cell

Support
6

Here’s my checkbox adventure. Setting up my family tree in December, I tried to mix a checklist with an unordered list as in this simplified example:

- **Gerard**
  - [x] Hendrik
  - [ ] Izaäk
- [ ] **Johannes**
  - Karel
  - Lodewijk

Gerard is dead, and does not need a checkbox anymore. Karel and Lodewijk are too young for a checkbox.

The indentation in the viewer was a mess and irreparable. I was about to propose a self-contained checkbox — to be evoked with ?[ ] or whatever — anywhere in a Markdown paragraph, list, or table, when I understood that it’s “a bridge to far” at the moment. I don’t totally give up all hope (the Rhine was crossed, eventually), but it won’t happen in 2020, I guess.

So how to make do with checkboxes that don’t feed back to the Markdown document? To prevent false expectations in the viewer, I avoid the <input> tag for this. The most simple and typist-friendly solution would be the left one below.
Checkboxes
In Markdown:

    - **Gerard**
      - `[x]` Hendrik 
      - `[ ]` Izaäk
    - `[ ]` **Johannes**
      - Karel
      - Lodewijk

If you want something more fancy in the viewer, you have a lot of options. The second list is one of my favorites.

<style>
  chk- {
    border-radius: .25em;
    background-color: #E4E4E4;
    color: #0269C2;
    font-family: IBM Plex Mono;
    font-size: 95%;
    font-weight: bolder;
    padding: 0 .32em;
    white-space: pre;
  }
</style>

- **Gerard**
  - <chk->&check;</chk-> Hendrik
  - <chk-> </chk-> Izaäk
- <chk-> </chk-> **Johannes**
  - Karel
  - Lodewijk

It makes use of cheating techniques as I’ve mentioned here. In this case I use just one false HTML tag to define a checkbox. My most favorite layout however is the list at the right side, that needs four false tags and a lot of CSS:

<style>
  bl- {
    position: relative;
    left: -1.7em;
  }
  bl- li {
    list-style-type: none;
  }
  b---::before, o---::before, x---::before {
    border-radius: .25em;
    font-weight: bolder;
    content: "✓";
    padding: 0 .2em;
    margin-right: .25em;
  }
  b---::before {
    position: relative;
    top: -.8em;
    border: 2px solid #999999;
    border-radius: 8em;
    color: transparent;
    font-size: 30%;
    line-height: 90%;
    margin: 0 1.9em 0 .9em;
  }
  o---::before {
    background-color: #E4E4E4;
    color: #E4E4E4;
    font-size: 105%;
  }
  x---::before {
    background-color: #E4E4E4;
    color: #0269C2;
    font-size: 105%;
  }
</style>

<bl->

- <b---/> **Gerard**
  - <x---/> Hendrik 
  - <o---/> Izaäk
- <o---/> **Johannes**
  - <b---/> Karel
  - <b---/> Lodewijk

</bl->

The possibly font-dependent CSS metrics are good for a strong headache. Logic and arithmetic didn’t suffice for me, a lot trial and error was involved to get everything positioned as I wanted. Moreover, I also needed some corrections (not shown here) for tables, because I had reduced their font size to 90%. The checking/unchecking process, on the other hand, is rather comfortable: the checkboxes are easily spotted in the Markdown text, and only one character has to be changed to check or uncheck the box.

Last Monday, after a few months, I picked up my writing of a ‘testament’ for my successors again. This time I used Joplin for note-taking, as an experiment. I created an annotated outline as an ordered list, and two tables of software components and their grouping. All three with the homebaked checkboxes of the third kind. And I can testify now from my own experience: once the style definitions are settled, it’s quite workable. Although that doesn’t smother my ardent desire for a real self-contained checkbox with feedback.

3 Likes