dlx2html

A JavaScript library for converting linguistic to HTML for presenting on the web.

Written using modern ES modules, useable in both Node and the browser.

When writing about linguistic data, linguists use a format called an interlinear glossed example which shows each of the parts of a word (morphemes) and their meanings. This allows people who are not familiar with the language under discussion to read the examples and understand their structure and meaning. Below is a very simple example from Swahili:

``txt


Swahili

The dlx2html library takes one or more interlinear glosses in the DaFoDiL format and converts them to HTML for representing linguistic examples on the web.

The dlx2html library does not add any styling to the output HTML. Users should either add their own CSS styles, or use the compatible [Digital Linguistics Style Library][Styles]. The structure of the output HTML and CSS classes are described below.

If using this library for research, please cite it using the model below:

> Hieber, Daniel W. {year}. @digitallinguistics/dlx2html. . DOI: 10.5281/zenodo.10720085.

Samples

The following pages demo the HTML output from the library. They are styled using the [DLx styles library][Styles].

- Algonquian
- Chitimacha
- Chitimacha Text
- Mohawk
- Nuuchahnulth
- Old Latin
- Swahili

Usage

This library is written in JavaScript, and may be run as either a [Node.js][Node] module or as a script in the browser. See the [Node.js learning path][learn-Node] for more information about Node.js, how to install it, and how to run programs with it.

$3

To use dlx2html in Node:

1. Install the package.

`cmd
npm install @digitallinguistics/dlx2html
# OR
yarn add @digitallinguistics/dlx2html
`

2. Import the package and use it to convert the data to HTML.

`js
// Import the dlx2html module.
import convert from '@digitallinguistics/dlx2html'
import { readFile } from 'node:fs/promises'

// Load the data from a JSON-formatted DaFoDiL file.
const json = await readFile(examples.json, utf-8)
const data = JSON.parse(json)

// Convert the text to HTML.
const html = convert(data, { / specify options here / })

console.log(html) //

To use dlx2html in the browser:

1. Download the latest version of the library from the [releases][releases] page. Copy the dlx2html.js file to your project.

2. Import and use the script in your code:

`html

`

$3

Calling the dlx2html function returns an HTML string.

Options

| Option | type | Default | Description |
| --------------- | ------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| abbreviations | Object | {} | An object hash providing the full descriptions of gloss abbreviations, e.g. "sg" => "singular". If present, these will be used to populate the title attribute of elements for glosses. Note that the abbreviations are case-sensitive. |
| analysisLang | String | undefined | An [IETF language tag][lang-tags] to use as the default value of the lang attribute for any data in the analysis language (metadata, literal translation, free translation, glosses, literal word translation). If undefined, no lang tag is added, which means that browsers will assume that the analysis language is the same as the HTML document. |
| classes | Array | ['igl'] | An array of classes to apply to the wrapper element. |
| glosses | Boolean | false | Options for wrapping glosses in tags.

If set to false (default), no tags are added to the glosses.

If set to true, an tag is wrapped around any glosses in CAPS, any numbers, and any of sg, du, or pl (lowercased). Note that text within the will be converted to lowercase, since by convention glosses are rendered in smallcaps (and uppercase letters display as normal uppercase letters even when in smallcaps). |
| tag | String | 'div' | The HTML tag to wrap each interlinear gloss in. Can also be a custom tag (useful for HTML custom elements). |
| targetLang | String | undefined | An [IETF language tag][lang-tags] to use as the default value of the lang attribute for any data in the target language. |

HTML Structure

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 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