Brett
KPCKevin Powell - Community
•Created by Brett on 8/14/2023 in #front-end
Displaying interlinear gloss with selectable text
Background
I'm trying to display an interlinear gloss
This involves aligning different chunks of two sentences vertically. I have 2 imperfect solutions and need help cracking one or the other.
Attempt 1
I tried to achieve this via a table with N columns and 2 rows, but I don't know how to make the table wrap if there are too many columns. Is there a way to make the table wrap like it can in attempt 2?
Attempt 2
The other approach is to use flexbox and group the chunks together, but then I lose the ability to select the top or bottom sentence. (The above wiki article has this same problem). It's possible to resolve this with JS (toggle
user-select: none on mouse events) but it's finicky. Is there a way to make it select across columns like it can in attempt 1?
Codepen
https://codepen.io/schreiberbrett/pen/MWzNVLE
Thanks,
Brett1 replies