Leipzig.js is a small JavaScript utility that makes it easy to add interlinear glosses to webpages.

By including a bit of JavaScript and adding some css, you can automatically go from this:

Die Umgangssprache ist ein Teil des menschlichen Organismus und nicht weniger kompliziert als dieser.

die umgangssprache ist ein teil des mensch-lich-en organismus und nicht wenig-er komplizeiert als dies-er

DET.NOM.F.SG {colloquial language} be.3SG.PRS DET.NOM.M.SG part DET.GEN.M.SG human-ADJ-AGR.GEN.M.SG organism and NEG less-CMPR complicated CMPR DET-AGR.M.SG

the {colloquial language} is a part {of the} human organism and not less complicated than it

‘Colloquial language is a part of the human organism and is not less complicated than it.’ — Wittgenstein, Tractatus Logico-Philosophicus, 4.002

to this:

Die Umgangssprache ist ein Teil des menschlichen Organismus und nicht weniger kompliziert als dieser.

die umgangssprache ist ein teil des mensch-lich-en organismus und nicht wenig-er komplizeiert als dies-er

DET.NOM.F.SG {colloquial language} be.3SG.PRS DET.NOM.M.SG part DET.GEN.M.SG human-ADJ-AGR.GEN.M.SG organism and NEG less-CMPR complicated CMPR DET-AGR.M.SG

the {colloquial language} is a part {of the} human organism and not less complicated than it

‘Colloquial language is a part of the human organism and is not less complicated than it.’ — Wittgenstein, Tractatus Logico-Philosophicus, 4.002

Overview

An interlinear gloss is a way of presenting linguistic data that helps makes it clear what the different words and morphemes of a phrase mean. They consist of multiple lines of data, aligned horizontally at the word boundaries of the original language.

Many interlinear glosses consist of three lines:

The first line is used for data in the original language;
A morpheme-by-morpheme analysis of the original language;
A free or colloquial translation, not aligned at word boundaries.

Additional lines may be used to show phonemic information, or other analyses that might be relevant to the phrase being glossed.

Interlinear glosses help linguists present language data to audiences that might not be familiar with the language being analyzed, and are an integral part of documenting and discussing languages.

Challenges in Creating Glosses

Unfortunately, writing interlinear glosses is difficult. While LaTeX users can use packages like gb4e, expex, and linguex, typesetting glosses in WYSIWYG editors like Microsoft Word is clumsy. Presenting interlinear glosses on websites is also challenging.

When using WYSIWYG editors, linguists typically use either tables or a monospaced ‘typewriter’ font to make aligning words easier. While these solutions do work, neither one is great. Tables are cumbersome to create and maintain, especially for longer glosses that need to span multiple lines. Monospaced interlinear glosses are easier to create, but maintaining alignment manually is time-consuming, especially for long runs of text.

On the web, linguists also tend to use either tables or monospaced fonts to create glosses. Creating tables on the web is more time consuming than creating them in WYSIWYG editors, making them even more untenable for longer glosses. Using monospaced fonts on the web has the same problems of using monospaced fonts in WYSIWYG editors.

Enter Leipzig.js

Leipzig.js aims to be a simple, lightweight solution for interlinear glossing on the web. By relying on existing HTML tags, it degrades gracefully when either JavaScript or CSS is not present.

While basic usage of Leipzig.js is dead simple (see the Usage section below), more customizable glossing can be achieved by using the library's flexible API.

Glosses formatted with Leipzig.js are responsive, and contain numerous CSS classes that can be used to style individual lines in the gloss.

Leipzig.js tries to strike a balance between ease of creation and beauty of output. It should be easy enough to use for people new to web authorship, while remaining powerful and customizable enough for people that want more control over their interlinear glosses.

Compatability & Dependencies

Leipzig.js has no front-end dependencies, and should work on most modern browsers, including IE9+.

Known Issues

To view current issues or to file a bug report, please visit the Issues Page on GitHub.

Usage

1. Download It (Optional)

You can install Leipzig.js using npm or Bower, or by downloading the latest version from the github repository:

$ npm install --save leipzig
$ bower install --save leipzig
$ git clone https://github.com/bdchauvette/leipzig.js.git

Alternatively, you can skip installing Leipzig.js on your own server, and can use the jsDelivr CDN as described in the next step.

2. Include It

Once you have the files, include the main leipzig.js file somewhere on your page, ideally at the bottom of the <body>:

<script src="path/to/leipzig/dist/leipzig.min.js></script>

Leipzig.js comes with some basic styling, which you can include by adding the Leipzig.js stylesheet in the <head> of your page:

<link rel="stylesheet" href="path/to/leipzig/dist/leipzig.css">

jsDelivr

You can also include the latest version of Leipzig.js automatically by linking to the project files on the jsDelivr CDN:

<!-- CSS -->
<link rel="stylesheet" href="//unpkg.com/leipzig/dist/leipzig.min.css">

<!-- JavaScript -->
<script src="//unpkg.com/leipzig/dist/leipzig.min.js"></script>

For more information about jsDelivr, you can visit the jsDelivr homepage, or read the following blog posts:

3. Mark Up Your Examples

To use the Leipzig.js default configuration, just add a data-gloss attribute to the examples you want to be glossed:

<div data-gloss>
  <p>Gila abur-u-n ferma hamišaluǧ güǧüna amuq’-da-č.</p>
  <p>now they-OBL-GEN farm forever behind stay-FUT-NEG</p>
  <p>‘Now their farm will not stay behind forever.’</p>
</div>

Leipzig.js will find all of the blocks that have the data-gloss attribute and turn them into nicely formatted interlinear glosses.

4. Gloss ’Em

Finally, you just need to tell Leipzig.js to go to work by adding the following <script> somewhere after the one you added in Step 2:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    Leipzig().gloss();
  });
</script>

If you're already using jQuery, you can use the following script instead:

<script>
  $(function() { Leipzig().gloss(); });
</script>

Minimal Example

<html>
  <head>
    <link rel="stylesheet" href="path/to/leipzig/dist/leipzig.css">
  </head>
  <body>
    <div data-gloss>
      <p>Ein Beispiel</p>
      <p>DET.NOM.N.SG example</p>
      <p>‘An example’</p>
    </div>
    <script src="path/to/leipzig/dist/leipzig.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        Leipzig().gloss();
      });
    </script>
  </body>
</html>

Ein Beispiel

DET.NOM.N.SG example

‘An example’

Leipzig.js

Interlinear glossing for the browser