FIX: Remove extraneous whitespace from utterance

README.md

@@ -115,7 +115,7 @@ Calling the `dlx2html` function returns an HTML string.
 
 This section describes the structure of the HTML output by this library, and the classes added to the HTML elements. You can see sample HTML output by the program in the `samples/` folder, as well as the [DLx Styles][Styles] library.
 
-**Note:** The output HTML has lots of extraneous whitespace and is poorly formatted. If you want more readable output, use a formatting library like [Prettier][Prettier] to format the result.
+**Note:** The output HTML does not contain much extraneous whitespace and therefore is not very human-readable. If you want more readable output, use a formatting library like [Prettier][Prettier] to format the result.
 
 Each utterance/example in the original data is wrapped in a `<div class=igl>` element by default. You can customize both the tag that is used for the wrapper and the classes applied to it with the `tag` and `classes` options. For example, to wrap each utterance in `<li class=interlinear>`, you would provide the following options:
 

src/utterance/index.js

@@ -23,16 +23,19 @@ export default function convertUtterance(u, options) {
   const { classes, tag } = options
   const classString      = classes.join(` `)
 
-  return `<${ tag } class='${ classString }'>
-    ${ header }
-    ${ transcript }
-    ${ transcription }
-    ${ phonetic }
-    ${ words }
-    ${ translation }
-    ${ literal }
-    ${ source }
-    ${ timespan }
-  </${ tag }>`
+  const lines = [
+    header,
+    transcript,
+    transcription,
+    phonetic,
+    words,
+    translation,
+    literal,
+    source,
+    timespan,
+  ].filter(Boolean)
+  .join(``)
+
+  return `<${ tag } class='${ classString }'>${ lines }</${ tag }>`
 
 }