search

Symbitic / remark-plugins

Remark plugins for Markbook
MIT License
14 stars 7 forks source link

remark-deflist: `<p>` wrapper breaks is invalid and breaks styling #3

Closed simonflk closed 3 years ago

simonflk commented 4 years ago

According to MDN, a <dl> is permitted to be child of an element that accepts flow content. <p> is itself an element in the "flow content" category, and only permits children which are phrasing content, which does not include <dl>

Why is this a problem?

When the browser sees this HTML structure it rewrites it. It's easier to show you.

Given this HTML: (such as that generated by remark-deflist)

<body>
  <p>before</p>
  <p>
    <dl>
      <dt>term</dt>
      <dd>definition</dd>
    </dl>
  </p>
  <p>after</p>
</body>

it results in the following DOM: image

ALT:

<body>
  <p>before</p>
  <p>
    </p><dl>
      <dt>term</dt>
      <dd>definition</dd>
    </dl>
  <p></p>
  <p>after</p>
</body>

Given my <p> elements have margin this adds an unusual margin before the <dl>, that is difficult to fix with CSS.