Interlinear lemmas 3 line

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>

<h4>
  This does not follow Leizig rules, though.
</h4>

<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

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;
}