Leipzig.js

Interlinear glossing for the browser

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

[interlinear glosses]: https://en.wikipedia.org/wiki/Interlinear_gloss

![npm badge](https://www.npmjs.com/package/leipzig)
!bower badge

- Overview
- Usage
- Documentation
- Examples
- Contributing
- Tests
- Other Solutions
- License

---

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.

$3

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.

[responsive]: https://en.wikipedia.org/wiki/Responsive_web_design

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.

$3

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

$3

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.

---

Usage

$3

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

``sh $ 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.

`$3`

Include the main leipzig.jsfile somewhere on your page, ideally at the bottom of the:

`html`

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

`html`

`$3`

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

`html

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

- jsDelivr - the advanced open source public CDN - jsDelivr does it better

`$3`

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

`html


  Gila abur-u-n ferma hamišaluǧ güǧüna amuq’-da-č.

  now they-OBL-GEN farm forever behind stay-FUT-NEG

  ‘Now their farm will not stay behind forever.’

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

`$3`

Finally, you just need to tell Leipzig.js to go to work by adding the following
`

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

[jQuery]: https://jquery.com/

`$3`

`html


      Ein Beispiel

      DET.NOM.N.SG example

      ‘An example’


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

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

`$3`

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 filecss| Compiles & minifies the main Sass stylesheetbuild | Runs the js and csstaskswatch | Watches for changes to files in src/, then runs the appropriate taskcomb | Runs csscomb on any Sass files in src/

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

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

`$3`

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:

`sh $ npm i -g browserify tape-run`

You can then run the complete test suite using:

`sh $ npm test`

Back to Top ↑

---

`Other Solutions`

`$3`

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.

[Kevin McGowan]: http://kbmcgowan.github.io/blog/2009/02/28/css-interlinear-glosses.html [James Tauber]: http://jtauber.com/blog/2006/01/28/dynamic_interlinears_with_javascript_and_css/

`$3`

interlinear, like Leipzig.js, is a JavaScript + CSS utility that automatically formats selected HTML elements.interlinearhas 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 atinterlinear.

`$3`

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.

Leipzig.js

Interlinear glossing for the browser

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

[interlinear glosses]: https://en.wikipedia.org/wiki/Interlinear_gloss

![npm badge](https://www.npmjs.com/package/leipzig)
!bower badge

- Overview
- Usage
- Documentation
- Examples
- Contributing
- Tests
- Other Solutions
- License

---

Overview

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.

$3

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.

[responsive]: https://en.wikipedia.org/wiki/Responsive_web_design

$3

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

$3

---

Usage

$3

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

``sh $ 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.

`$3`

Include the main leipzig.jsfile somewhere on your page, ideally at the bottom of the:

`html`

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

`html`

`$3`

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

`html

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

- jsDelivr - the advanced open source public CDN - jsDelivr does it better

`$3`

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

`html


  Gila abur-u-n ferma hamišaluǧ güǧüna amuq’-da-č.

  now they-OBL-GEN farm forever behind stay-FUT-NEG

  ‘Now their farm will not stay behind forever.’

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

`$3`

Finally, you just need to tell Leipzig.js to go to work by adding the following
`

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

[jQuery]: https://jquery.com/

`$3`

`html


      Ein Beispiel

      DET.NOM.N.SG example

      ‘An example’


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

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

`$3`

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:

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

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

`$3`

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:

`sh $ npm i -g browserify tape-run`

You can then run the complete test suite using:

`sh $ npm test`

Back to Top ↑

---

`Other Solutions`

`$3`

[Kevin McGowan]: http://kbmcgowan.github.io/blog/2009/02/28/css-interlinear-glosses.html [James Tauber]: http://jtauber.com/blog/2006/01/28/dynamic_interlinears_with_javascript_and_css/

`$3`

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.

leipzig

Leipzig.js

Table of Contents

Overview

$3

$3

$3

Usage

$3

$3

$3

$3

$3

$3

Documentation

Examples

Contributing

$3

$3

Other Solutions

$3

$3

$3

Further Reading

License

leipzig

Leipzig.js

Table of Contents

Overview

$3

$3

$3

Usage

$3

$3

$3

$3

$3

$3

Documentation

Examples

Contributing

$3

$3

Other Solutions

$3

$3

$3

Further Reading

License

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`Other Solutions`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`Other Solutions`

`$3`

`$3`

`$3`