Insert invisible "delimiter" metatags when formatting lists

[towerofnix]

We currently use html.metatag('chunkwrap', {split: ','}) to break up language-formatted lists. This is OK for English, but may fail for other languages!

Instead, we'd like to introduce a new metatag('delimiter'), which is a zero-children tag that indicates before and after it, within the same parent element, should be considered part of separate logical chunks. For example:

language.formatConjunctionList([
  `Snoo`,
  `PINGAS`,
  `usual, I see?`,
])
/* -> */
html.tags([
  `Snoo,`,
  html.metatag('delimiter'),
  ` PINGAS,`,
  html.metatag('delimiter'),
  ` and usual, I see?`,
]),

Delimiter placement logic is slightly complex to account for whitespace. The language may be customized to align delimiters following any preceding item, or preceding any following item. Whitespace is then skipped accordingly.

Consider a language where the unit-list delimiter is an asterisk with a space on each side.

language.formatUnitList([`apple`, `banana`, `watermelon`])
/* alignment: following */
html.tags([
  `apple *`,
  html.metatag('delimiter'),
  ` banana *`,
  html.metatag('delimiter'),
  ` watermelon`,
])
/* alignment: preceding */
html.tags([
  `apple `,
  html.metatag('delimiter'),
  `* banana `,
  html.metatag('delimiter'),
  `* watermelon`,
])

The placement dictates the delimiter's "starting" placement, i.e. what side of which insertion point it aligns with, but then the delimiter always collapses whitespace towards the opposing insertion point.

Calling chunkwrap without specifying a split attribute will automatically split on metatag('delimiter'):

html.metatag('chunkwrap', /* pingas list */)
/* -> */
`<span class="chunkwrap">Snoo,</span> ` +
`<span class="chunkwrap">PINGAS,</span> ` +
`<span class="chunkwrap">and usual, I see?</span>`

Note that chunkwrap specially acknowledges whitespace and moves it out of the content which it makes into a "chunk".

With the delimiter alignment examples:

html.metatag('chunkwrap', /* unit list */)
/* placement: following */
`<span class="chunkwrap">apple *</span> ` +
`<span class="chunkwrap">banana *</span> ` +
`<span class="chunkwrap">watermelon</span>`
/* placement: preceding */
`<span class="chunkwrap">apple</span> ` +
`<span class="chunkwrap">* banana</span> ` +
`<span class="chunkwrap">* watermelon</span>`

Delimiter alignment and chunkwrap work together to make a simple, user-visible effect, while still placing edge whitespace out of the bounds of individual chunks!