Force self-closing tags to be manually closed tags

[crutchcorn]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Problem

I'm trying to generate XHTML ePub documents from Markdown files for my book.

However, many popular epub readers do not support self-closing tags for tags such as img (including seemingly Google Play Books).

Solution

I'd love to have a way to force a tag to be fully closed tag. This means that instead of:

<img>

Or

<img  />

(using closeSelfClosing)

We'd have:

<img></img>

Alternatives

Alternatively, instead of having all closing tags handles, we could have a:

dontClose:  ['img']

Style API

[crutchcorn]

Also, I'd be happy to implement this functionality, including testing and such. I've done some testing locally and I think it should be as simple as adding:

# This variable name/option name easily changed
if (selfClosing && ctx.explicitClode) {
    parts.push('</' + node.tagName + '>')
}

https://github.com/syntax-tree/hast-util-to-html/blob/main/lib/tree.js#L124

[crutchcorn]

Hmm, I actually think this can be solved with:

voids: []

Are there any side effects of doing this that I should know about?

[wooorm]

The output <img></img> is not needed for epub as far as I am aware. The output with closeSelfClosing, namely, <img />, should be okay instead.

The project you are looking for, to generate XML from HTML, is https://github.com/syntax-tree/hast-util-to-xast

[crutchcorn]

I didn't think it was, either, but then I started running into errors from Google Books and the official W3 Epub validator, which has consumed the rest of my evening/morning.

Thanks for the highlight of hast-util-to-xast - this ecosystem really has everything!

[wooorm]

I have used epubcheck, and I have never received errors using <img /> (I interestingly actually have a lot of experience with digital books). Maybe your doctypes are wrong? Or some other epub metadata file is wrong?

[crutchcorn]

Hmm, it's possible. I'm currently using html-to-epub (or rather, a fork I made that replaces Cheerio with Remark, to solve this issue) and admittedly have been doing a bit of "oh dear goodness it's 5AM now and I've been working on this for 8 hours" sledgehammer-to-a-nail naive debugging.

I seem to've solved the problems I've needed to with this approach, but I'll try to read more thru the epub spec in the "morning".

[wooorm]

Here’s how I turned hast, that I got from markdown and a ton of custom processing, into HTML for epub:

// Utility to serialize hast as ePub XML.

import {u} from 'https://github.com/syntax-tree/unist-builder'
import {select} from 'https://github.com/syntax-tree/hast-util-select'
import {toXast} from 'https://github.com/syntax-tree/hast-util-to-xast'
import {toXml} from 'https://github.com/syntax-tree/xast-util-to-xml'
import {namespaces} from './util-namespaces.js'

export function toEpubXhtml(hastTree) {
  const html = select('html', hastTree)

  // Add the epub and ibooks namespaces.
  if (html) {
    html.properties['xmlns:epub'] = namespaces.epub
    html.properties['epub:prefix'] = 'ibooks: ' + namespaces.ibooks
  }

  // Transform to XML.
  const tree = toXast(hastTree)

  // Add the XML declaration.
  tree.children.unshift(
    u('instruction', {name: 'xml'}, 'version="1.0"'),
    u('text', '\n')
  )

  // Serialize.
  return toXml(tree)
}

util-namespaces.js

// Web + ebook namespaces.

import {webNamespaces} from 'https://github.com/wooorm/web-namespaces'

export const namespaces = {
  ...webNamespaces,
  ibooks:
    'http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/',
  opf: 'http://www.idpf.org/2007/opf',
  dc: 'http://purl.org/dc/elements/1.1/',
  container: 'urn:oasis:names:tc:opendocument:xmlns:container',
  ncx: 'http://www.daisy.org/z3986/2005/ncx/',
  epub: 'http://www.idpf.org/2007/ops'
}

[wooorm]

Closing as hast is for HTML. There is a separate project, xast, that works with XML, and there are utilities to bridge between the two.
I believe that your problem should not be a problem, because <x /> being identical to <x></x> is an XML thing: it works in XHTML, in SVG, and in my experience in epubcheck too.
I’m pretty interested in this topic of digital books, so do let me know when you have further questions!