Interlinear lemmas 3 line removing punctuation

Demonstration of how to place lemmas in an interlinear fashion with source text.

by OjisanSeiuchi

HTML

<!-- Adapted from: https://jtauber.com/blog/2006/01/28/dynamic_interlinears_with_javascript_and_css/
 -->
<h3>Interlinear glossing - CSS based</h3>
<p class="intro">Using jQuery/JS to move punctuation marks and hide gloss for punctuation nodes.</p>

<div class="unit">
  <p class="ru">Историки</p>
  <p class="lemma">историк</p>
  <p class="pos">NOUN</p>
</div>
<div class="unit">
  <p class="ru">единодушно</p>
  <p class="lemma">единодушно</p>
  <p class="pos">ADV</p>
</div>
<div class="unit">
  <p class="ru">признают</p>
  <p class="lemma">признавать</p>
  <p class="pos">VERB</p>
</div>
<div class="unit">
  <p class="ru">,</p>
  <p class="lemma">,</p>
  <p class="pos">
    PUNCT
  </p>
</div>

<div class="unit">
  <p class="ru">что</p>
  <p class="lemma">что</p>
  <p class="pos">SCONJ
  </p>
</div>
<div class="unit">
  <p class="ru">Дональд</p>
  <p class="lemma">дональд</p>
  <p class="pos">
    PROPN
  </p>
</div>
<div class="unit">
  <p class="ru">Трамп</p>
  <p class="lemma">трамп</p>
  <p class="pos">
    PROPN
  </p>
</div>
<div class="unit">
  <p class="ru">был</p>
  <p class="lemma">был</p>
  <p class="pos">
    AUX
  </p>
</div>
<div class="unit">
  <p class="ru">худшим</p>
  <p class="lemma">плохой</p>
  <p class="pos">ADJ
  </p>
</div>
<div class="unit">
  <p class="ru">президентом</p>
  <p class="lemma">президент</p>
  <p class="pos">
    NOUN
  </p>
</div>
<div class="unit">
  <p class="ru">в</p>
  <p class="lemma">в</p>
  <p class="pos">
    ADP
  </p>
</div>
<div class="unit">
  <p class="ru">истории</p>
  <p class="lemma">история</p>
  <p class="pos">
    NOUN
  </p>
</div>
<div class="unit">
  <p class="ru">США</p>
  <p class="lemma">сша</p>
  <p class="pos">
    PROPN
  </p>
</div>
<div class="unit">
  <p class="ru">.</p>
  <p class="lemma">.</p>
  <p class="pos">
    PUNCT
  </p>
</div>

CSS

p.intro {
    color: #A3A2A2;
    font-family: sans-serif;
    font-size: 12px;
}

div.unit {
  float: left;
  margin-bottom: 1em;
  color: black;
}

div.comma {
    float: left;
    margin-bottom: 1em;
    color: black;
    
}

p.comma {
  font-size: 16pt;
  font-family: serif;
  margin: 0em;
  padding: 0em 0em;
}

p.ru {
  font-size: 16pt;
  font-family: serif;
  margin: 0em;
  padding: 0em 0.5em;
}

p.lemma {
  font-size: 12pt;
  font-family: "Georgia";
  color: gray;
  margin: 0em;
  padding: 0em 0.75em;
}

p.pos {
    font-size: 9pt;
    font-family: "Menlo";
    color: gray;
    margin: 0em;
    padding: 0.25em 1em;
}
h3, h4 {
    font-family: "HelveticaNeue";
}
h4 {
    color: lightgrey;
}

JavaScript

$(function() {
  /* document ready code here */
  $('p.pos').filter(function() {
    return $(this).text().trim().toLowerCase() === 'punct';
  }).each(function(index) {
    /* these are each punctuation <p> */
    console.log(index + ": " + $(this).text().trim());
    let punctDiv = $(this).parent();
    // get the exact punctuation mark in use
    let punctMark = punctDiv.children().filter('.ru').first().text();
    /*  find the previous div because
    	that's where we need to add back the
        punctuation mark
    */
    let punctPrevDiv = punctDiv.prev();
    // the p.ru child
    var punctRuP = punctPrevDiv.children().filter('.ru').first();
    // glom the punctuation mark onto previous p.ru
    punctRuP.append(punctMark);
    // remove the PUNCT div from the DOM
    punctDiv.remove()
    console.log(punctRuP.text())
  })
})