Glosses in numbered examples

[pavelrudnev]

Great little utility, very useful, thanks! I was wondering whether it was possible for the glosses to appear as numbered examples.

[agricolamz]

Oh, hi, @pavelrudnev! I have exactly the same question...

[agricolamz]

There is an unelegant solution:

<p>1. гьегелиди охходдороллакку гьечIекгъидоллокгъило себгуло идйа бикIвочIигу.</p>
<p><i></i> hege-l.i-di	oχːodːoro.l-la-kːu	heč'eɢido.l-lo=ɢilo se-b-gulo	i-dja	b-ik'ʷo-č'igu.</p>
<p><i></i> DEM-PL-ERG	morning-SUPER-ELAT	at.night-SUPER.LAT=until one-IV-INDEF	do-IPFV.PTCP	IV-be-PRF.NEG</p>
<p>‘They just lounged all day long.'  (Tales)</p>

[twid]

The thing is that the example number ought to be in a column of its own, so to speak – as if each example were put into a table containing one row and two columns – one for the number, and one for the rest. So that, if the the example is long, the next line won't start under the number, but under the first word of the first line.

Also, some authors prefer to put the example number to the right of the example – that would be easy to do in a table, too, I guess.

[bdchauvette]

Hi @pavelrudnev , @agricolamz , and @twid -- Thanks so much for taking the time to use the lib and report the issue. Apologies for not replying sooner 😬

Current solutions

With flexbox now widely supported, adding numbers is relatively simple.

The general idea is to create a container with display: flex, then use pseudo-elements to include the number as a sibling of the gloss itself:

<style>
  .example {
    display: flex;
  }

  .example[data-example-number]::before {
    content: attr(data-example-number) ")";
    margin-top: 1em; /* match default <p> margin-top */
  }
</style>

<figure class="example" data-example-number="1">
  <div data-gloss>
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</figure>

To automate the numbering, you could use something like CSS counters:

<style>
  body {
    counter-reset: gloss-number;
  }

  .example {
    display: flex;
  }

  .example::before {
    counter-increment: gloss-number;
    content: counter(gloss-number) ")";
    margin-top: 1em; /* match default <p> margin */
  }
</style>

<figure class="example">
  <div data-gloss>
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</figure>

If you don't like having to nest the glosses in a container like that, you could use position to move the ::before pseudo-element around, then add some extra padding inside the gloss:

<style type="text/css">
  figure {
    margin: 0;
  }

  [data-example-number] {
    padding-left: 2em;

    /* required so that the number is positioned relative to the gloss */
    position: relative;
  }

  [data-example-number]::before {
    content: attr(data-example-number) ")";
    position: absolute;
    left: 0;
  }
</style>

<figure data-gloss data-example-number="1">
  <p>...</p>
  <p>...</p>
  <p>...</p>
</figure>

Flexbox also allows us to move the numbering to the right, as mentioned by @twid:

<style type="text/css">
  figure {
    margin: 0;
  }

  [data-example-number] {
    display: flex;

    /* force the number and gloss to opposite sides */
    justify-content: space-between;
  }

  /**
   * using ::after instead of ::before, but we could also
   * use the `order` property here, or change the
   * `flex-direction` property in the container.
   */
  [data-example-number]::after {
    content: "(" attr(data-example-number) ")";
    margin-top: 1em; /* match default <p> margin-top */
    margin-left: 1em;
    text-align: right; /* ensure text really is all the way to the right */
  }
</style>

I put together a demo showing each of these approaches: https://codesandbox.io/s/leipzigjs-2-ks9vi

Future

I'm not sure if I want to pull these rules into the lib's stylesheet -- at least not yet. I'm definitely open to the idea, but at the same time, numbering feels very idiosyncratic to me, and I'm wary of having to implement a super flexible numbering system, when users could instead copy-paste some CSS snippets and get 95% of the way there.

If / when we do add support for numbering, I think we'd want to support both the manual and automatic approaches:

• add styles for [data-gloss-id] for manual numbering / identification
• add styles for .gloss--auto-id for automatically adding numbers

I think the "containerless" position-based approach is the most ergonomic, but also the most brittle, because it depends on precise positioning. With large numbers of examples, it's likely to either overflow the number into the example or (for smaller numbers) have too much whitespace between the number and gloss.

Instead, we could automatically generate the containers we detect either of the following:

• the [data-gloss-id] attr is present (manual use case)
• some new constructor option (autoId?) is true (automated use case)

Thanks again for taking the time to open & comment on the issue.

[HughP]

@bdchauvette I appreciate your thoughtful exposition on the issue of numbering. In trying to add to the productive conversation, is there no way to right align the numbers so that the white space is consistent between the numbers and the examples? Such as roman numerals in order lists, or leading zeros. see: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

Also there should be perhaps a third trigger which say no-numbering to not use any number system at all.

[bdchauvette]

Hi @HughP! Thanks for adding to the conversation!

is there no way to right align the numbers so that the white space is consistent between the numbers and the examples?

Just to clarify, would you like it to look something like the following?

  1) ...
 10) ...
100) ...

If so, I think that should be do-able by adding two additional properties to the pseudo-element CSS:

• a width (or min-width if you're ok with the occasional entry being wider)
• text-align: right

e.g.

  [data-example-number]::before {
    content: attr(data-example-number) ")";
    margin-top: 1em; /* match default <p> margin-top */
+   width: 2em;
+   text-align: right;
  }

You could use this same approach with absolute positioning, but instead of using width or min-width, you could also do it by setting the X-axis using right instead of left, which makes the coordinates relative to the right-hand edge of the container, then pair it with calc to get a consistent indent:

  [data-example-number]::before {
    content: attr(data-example-number) ")";
    position: absolute;
+   right: calc(100% - 2em);
  }

You'll probably also want to bump up the padding-left of the container a bit. Otherwise, the number and gloss will touch each other.

Also there should be perhaps a third trigger which say no-numbering to not use any number system at all.

Definitely. I think this would continue to be the default option, considering how idiosyncratic number styling can be.