Change HTML of tasks for tasks to avoid leading white space / Unify HTML of tasks and lists

Use case or problem

High level

There are several types of lists (itemized, enumerated, tasks). A problem for CSS people is that in edit/preview mode their HTML structure differs.
Itemized and enumerated lists are basically the same. Each item has two children:

  • the item label (bullet point / number) including the white space
  • the item content

This is not the case for tasks where there are several hidden elements and the white space is part of the content tag (i.e. the content has a leading white space).

Low level

Iā€™d like to have my text justified. One problem I face regarding lists is that the white space between item label and contents is considered in text justification. This leads to non-uniform indentation of item contents which is undesirable. As far as I know, this can not be fixed in CSS for tasks due to the leading white space of the content span.

Proposed solution

The problem could be fixed by replacing the leading white space in task content tags either by

  • creating an extra span containing both the checkbox and the separating white space (and maybe hidden elements?) for tasks
  • emulating the white space by adding a margin
2 Likes