Leipzig.js with css override

Minimal example of interlinear gloss using leipzig.js with css override

by OjisanSeiuchi

HTML

<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>‘Historians uniformly agree that Donald Trump was the worst president in US history.’</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>

CSS

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

.gloss__line--1 {
    color: gray;
}

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