gloss.js

First remember to import the CSS file:

import "gloss.js/styles.css";

Also, we don't control this but we strongly recommend the following list spacing:

.gloss-ex,
.gloss-ex ol,
.gloss-ex li {
  padding-left: 1em;
}

React

This package exports a single component: Ex.

import { Ex } from "gloss.js/react";

<Ex number="(1)">
  <Ex.Line>C'est la ligne originale.</Ex.Line>
  <Ex.Line>This-is the line original</Ex.Line>
  <Ex.Line translation>This is the original line.</Ex.Line>
</Ex>

If you want to group stuff into one word, use a fragment.

<Ex number="(1)">
  <Ex.Line>Ajoutez une ligne, <>s'il vous plaît</>.</Ex.Line>
  <Ex.Line>Add.IMP one line please</Ex.Line>
  <Ex.Line translation>Add one line, please.</Ex.Line>
</Ex>

You can also have inline typesetting. These elements are treated as individual words. To treat them as a single unit, wrap them in a fragment.

<Ex number="(1)">
  <Ex.Line>Ajoutez <b>une ligne</b>, <><b>s'il vous plaît</b></>.</Ex.Line>
  <Ex.Line>Add.IMP <b>one line</b> <b>please</b></Ex.Line>
  <Ex.Line translation>Add one line, please.</Ex.Line>
</Ex>

You can also nest examples.

<Ex number="(1)">
  <Ex>
    <Ex.Line>Ajoutez une ligne, <>s'il vous plaît</>.</Ex.Line>
    <Ex.Line>Add.IMP one line please</Ex.Line>
    <Ex.Line translation>Add one line, please.</Ex.Line>
  </Ex>
  <Ex>
    <Ex.Line>Voici la ligne que vous avez demandée.</Ex.Line>
    <Ex.Line>Here-is the line that you have asked</Ex.Line>
    <Ex.Line translation>Here is the line that you have asked for.</Ex.Line>
  </Ex>
</Ex>

If the number prop is not provided, the example numbers depend on the nesting:

• Top level examples are unnumbered by default.
• Children of unnumbered examples are numbered with numbers: (1), (2), (3), etc.
• Children of numbered examples (including manually labeled ones, as long as the first alphanumeric character is a number) are numbered with letters: a., b., c., etc.
• Children of letter-numbered examples throw an error unless manually labeled.

Ex must have Ex or Ex.Line children. You can technically mix them, although all Ex.Line children will be rendered before all Ex children.

If you want to list multiple examples together without giving them an overarching number, you can use Ex.Group.

<Ex.Group>
  <Ex>
    <Ex.Line>Ajoutez une ligne, <>s'il vous plaît</>.</Ex.Line>
    <Ex.Line>Add.IMP one line please</Ex.Line>
    <Ex.Line translation>Add one line, please.</Ex.Line>
  </Ex>
  <Ex>
    <Ex.Line>Voici la ligne que vous avez demandée.</Ex.Line>
    <Ex.Line>Here-is the line that you have asked</Ex.Line>
    <Ex.Line translation>Here is the line that you have asked for.</Ex.Line>
  </Ex>
</Ex.Group>