Interlinear glossing with JS & CSS

View the Project on GitHub parryc/interlinear


Word-aligned interlinear glosses for the web, with the help of JavaScript and CSS.

How to use

In your header add <link rel="stylesheet" type="text/css" href="interlinear.css"/> and at the bottom of the page add <script type="text/javascript" src="interlinear.js"></script>. This is to make sure that the document has been fully loaded before automatically formatting the text.

If you want to call it explicitly, there is a variable gloss that controls everything (like jQuery).

Within the body of your webpage it's pretty simple. Within the gloss div, just make sure each line is delineated by a <br/> tag.

<div class="gloss">
    ཟིང་འཁྲུགས་ ལང་མདོག་ ཁ་པོ་ རེད་<br/>
    zing-'khrugs lang-mdog kha-po red<br/>
    unrest arise-*nom* likely-*nom* be

If you change the class name, make sure to reconfigure gloss.


<div class="gloss">
    nanggayan guny-bi-yarluga?<br/>
    who *2DU.A.3SG.P-FUT*-poke<br/>
    ! 'Who do you two want to spear?'
<div class="gloss">
    aux chevaux<br/>
    to.** horse.*pl*<br/>
    'to the horses' xx

Note: You can also see that placing glosses in quotes will keep them to one morpheme

<div class="gloss" data-synthetic="1">
    sit-down try *2p-imp.quote*<br/>
    ! "I was told to say 'sit down' to you"<br/>
    ! "From Fortescue (1984)"


See this Speechlike blog post. Additional ideas from the Leipzig glossing rules