Still thinking about interlinear glossing for my language learning project. The leizig.js library is great but my use case isn’t really what the author had in mind. I really just need to display a unit consisting of the word as it appears in the text, the lemma for that word form, and (possibly) the part of speech. For academic linguistics purposes, what I have in mind is completely non-standard.

The other issue with leizig.js for my use case is that I need to be able to respond to click events on individual words so that they can be tagged, defined or otherwise worked with. It’s straightforward how I could apply CSS id attributes to word-level elements to support that functionality.

So I’m back to a CSS-only solution.

Here’s what a three-line CSS-only interlinear glossing display might look like:

You can find the code - in progress, as always, in a JSFiddle.

One my priorities is going to be dealing with punctuation. It looks messy and unrefined right now. First, the punctuation marks need to be glommed onto the previous word rather than standing alone. Second, there’s no need to display either a lemma or a POS for punctuation marks. It’s going to need either JavaScript running on the page to dynamically deal with the UI, or something on the backend. Most likely the former.

One of the key features of my language learning app Hedghog is the display of source text with interlinear gloss. This is of huge benefit in understanding highly-inflected languages. Right now I’m playing around with different ways of achieving this sort of display. I stumbled on leipzig.js which is a library for formatting interlinear gloss according to the Leipzig Rules.

I like what I see, but my first inclination is to get under the hood and fix some of the CSS. For example, the original text is displayed in italic. This is fine, and it may be the convention in linguistics circles, but some Russian letters are a little confusing to Russian learners when displayed in oblique type. It’s not difficult to fix.

Here’s what it looks like:

I just needed to apply some of my own CSS to achieve the desired appearance - Leizig Rules or not.

.gloss__line--0 {
    font-family: "Georgia";
    font-size: 20px;
}

.gloss__line--1 {
    color: gray;
}

.gloss__word .gloss__line:first-child {
    font-style: normal !important;
}

And the minimal example in Russian:

<html>

  <head>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/leipzig@latest/dist/leipzig.min.css">
  </head>

  <body>
    <div data-gloss>
      <p>Дональд Трамп - нелепый болван, который был избран президентом.</p>
      <p>дональд трамп - нелепый болван который был избрать президент.</p>
      <p>‘Donald Trump is a ridiculous moron who was elected president.’</p>
    </div>
    <script src="//cdn.jsdelivr.net/npm/leipzig@latest/dist/leipzig.min.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var glosser = Leipzig();
        glosser.gloss();
      });
    </script>
  </body>
</html>

This minimal example as a JSFiddle

More on interlinear gloss

• leipzig.js GitHub repository
• leipzig.js examples - archived
• Wikipedia - interlinear gloss