RE: An Experiment with Interlinear Glossing to Try Out

Thank you, Daniel, for the interesting update!

Rendering an interlinear in HTML has always been an interesting challenge. I really like the cleanness and simplicity of Richard’s solution. It looks like Richard’s layout uses CSS flex, which is superior to tables for layout. I’ve used Firefox’s “inspect” tool to look at the nicely-formatted HTML markup and CSS from Richard’s interlinear.

[cid:image002.png@01D7781C.785A7310]


  *   Individual “stacks” have “flex-direction: column;” to ensure that the elements in the stack do stack.

[cid:image006.png@01D7781C.9D982410]


  *   The stacks are in a “flex-wrap: wrap” div container with “flex-direction: row;” so the stacks align as rows and wrap to the window, as you observed.

[cid:image003.png@01D7781C.785A7310]

All of this compares very favorably with the code in NLTinterlinear.com. When I wrote the code for NLTinterlinear.com in 2009 (!), flex layout didn’t exist. I was interested to see just what the history of that was, so here’s the browser compatibility for flex from MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/flex):

[cid:image001.png@01D7781B.EA073530]

One could look up when each of the above browser versions was released. Tldr; It was after 2009. 😉

Actually, NLTinterlinear.com does wrap to the window. For example:

Wide:
[cid:image004.png@01D7781C.785A7310]
Narrow:
[cid:image005.png@01D7781C.785A7310]
You are correct that tables are used in the layout, Though in a somewhat different way than you thought. Here is the underlying HTML:

[cid:image007.png@01D7781D.D0567270]

Essentially, each “interlinear_term” functions like Richard’s “stack” container, in that the elements within it to align vertically: The tables inside the interlinear_term block are used for each vertical block in the term; tables were the best way at the time to ensure that the row was a row and couldn’t wrap. Nowadays you would just use “flex-direction: row; flex-wrap: nowrap” as Richard has done.

In order to enable the “interlinear_term” blocks to wrap at the window, you might guess that all of them have “float: left;” in their style definition.

[cid:image008.png@01D7781E.6E7DD010]

It works, but “flex-wrap: wrap” would be better. All in all, I heartily agree that flex-based layout is better.

It’s not just that the flex-based markup is cleaner and simpler. But we should also talk about digital accessibility, which has become a professional interest of mine in the past couple of years. Just by virtue of having simpler markup, a flex-based or CSS grid-based layout should be more accessible to those who, for example, are using their ears rather than their eyes to read the text. There are, as far as I know, no accessibility standards or aids (such as ARIA roles) for interlinear reading; but a good first step would to start with the simpler markup of the flex-based solution, and add to it structural semantic information that indicates to the audio reader what each element is doing in the context. Perhaps also there would be a way to add navigational aids and hints to the markup in order to guide the operation of a screen reader. I have not looked into this yet, but it seems that it should be possible to devise an HTML-based interlinear text with much higher digital accessibility and therefore usability for those reading by other means than visually.

Best regards,
-Sean

Sean Harrison
Book Genesis, Inc. <https://bookgenesis.com>

From: Daniel Yacob <yacob@geez.org>
Sent: Monday, July 12, 2021 11:55
To: public-itlcg@w3.org
Subject: An Experiment with Interlinear Glossing to Try Out

Greetings All,

An update on this channel is long overdue.  The most interesting development since our last communication has probably been an experiment with interlinear glosses by Richard Ishida that by all appearances looks to have been highly successful and I would encourage people with an interest in interlinear text to give it a test drive with their samples of interest and report any capability gaps.  Please visit Richard's blog post from March of 2019: http://r12a.github.io/blog/201708.html#20190304


Reviewing the samples that Sean pointed out earlier that year (http://nltinterlinear.com/Rom.1.1-32/interlinear), I see that they are laid out with an HTML table when I view the source. From the looks of it, I believe the could be handled sufficiently by the approach that Richard devised.  An advantage to using Richard's technique is the automatic line wrapping when a window is resized, and when text is added or removed.  Reformatting a table similarly would be laborious.

I'll point out a difference in the perspective between the two approaches that I think is noteworthy.  With a table, rows are defined first and then columns within them.  With Richard's approach, columns are defined and then rows within them.  That is, a column created around base text contains the list of necessary interlinear rows.  I think this makes management and greatly simplifies the association of the annotation to base text with respect to the DOM model.  It is also similar to the Ruby annotation model in this regard (columns contain rows).

I did try out the Interlinear gloss technique with Zaima annotation (https://w3c.github.io/elreq/zaima/ZaimaInterlinear.html) and came into a limitation when forming columns around individual letters versus words.  The difficulty reduces to the horizontal alignment of an annotation symbol above a base symbol.  Positioning controls are lacking (admittedly so is my CSS skillset) and I would resort to relying heavily on non-breaking spaces.  The positioning controls are then largely available in the Ruby markup and styling specification.  I found this to have been a useful exercise and illuminated the distinction between the word-based and character-based interlinear annotation use cases.

-Daniel