npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

leipzig

v0.9.0

Published

Interlinear glossing for the browser

Downloads

448

Readme

Leipzig.js

Interlinear glossing for the browser

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

npm badge bower badge

Table of Contents


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:

  1. The first line is used for data in the original language;
  2. A morpheme-by-morpheme analysis of the original language;
  3. 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.

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 the right 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+.

Further Reading

For more information about interlinear glossing, visit the homepage for the Leipzig Glossing Rules (from which Leipzig.js gets its name). The Leipzig Glossing rules homepage also contains references to other important works on interlinear glossing.

Back to Top ↑


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

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="//cdn.jsdelivr.net/npm/leipzig@latest/dist/leipzig.min.css">

<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/npm/leipzig@latest/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 using jQuery, you can use the following script instead:

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

Minimal Example

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

Back to Top ↑


Documentation

Please see the Documentation page on the wiki.

Back to Top ↑


Examples

Please see the Examples page on the Leipzig.js homepage.

Back to Top ↑


Contributing

$ git clone https://github.com/bdchauvette/leipzig.js.git
$ cd leipzig.js
$ npm install

Building

The main source files are in src/.

Leipzig.js uses gulp to build the files for distribution found in dist/. The following tasks are available:

Task | Does --------|------ js | Transpiles and minifies the main JS file css | Compiles & minifies the main Sass stylesheet build | Runs the js and css tasks watch | Watches for changes to files in src/, then runs the appropriate task comb | Runs csscomb on any Sass files in src/

You can run these tasks by installing gulp (npm i -g gulp) then running:

$ gulp $TASKNAME # e.g. gulp build or gulp watch

Testing

Leipzig.js uses a tape-based testing system.

To run the complete test suite, you'll first need to have browserify and tape-run installed globally:

$ npm i -g browserify tape-run

You can then run the complete test suite using:

$ npm test

Back to Top ↑


Other Solutions

Plain CSS

Both Kevin McGowan and James Tauber describe methods for styling interlinear glosses using pure CSS. McGowan also hints at a JavaScript solution that seems similar to what Leipzig.js is doing, but no code is provided.

interlinear

interlinear, like Leipzig.js, is a JavaScript + CSS utility that automatically formats selected HTML elements. interlinear has a different feature set than Leipzig.js, and uses a different syntax for marking up glosses. If Leipzig.js is not to your liking, I recommend taking a look at interlinear.

glosser

glosser is a small utility for producing interlinear glosses in plaintext or formatted for reddit.

Back to Top ↑


Further Reading

For more information about interlinear glossing, visit the homepage for the Leipzig Glossing Rules (from which Leipzig.js gets its name). The Leipzig Glossing rules homepage also contains references to other important works on interlinear glossing.

Back to Top ↑

License

Leipzig.js is licensed under the ISC License.

For details, please see the LICENSE file.

Back to Top ↑