Skip to content

fix(columns): staircase for joined morphemes, no column wrapping (BLD-352) #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dani-polani merged 4 commits into from
Oct 20, 2026
Merged

fix(columns): staircase for joined morphemes, no column wrapping (BLD-352) #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0ffaf6f
fix(columns): lay out joined morphemes of upright words as a staircase
dani-polani Oct 19, 2026
e39271b
fix(columns): never wrap columns; shrink the diagram to the frame width
dani-polani Oct 19, 2026
cb82b80
fix(columns): stop width fitting at half size and scroll the rest
dani-polani Oct 20, 2026
524e19e
fix(deps): bump devalue, dompurify, source-map-js and others for new …
dani-polani Oct 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 71 additions & 71 deletions bitext/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

43 changes: 33 additions & 10 deletions bitext/src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,15 +244,37 @@ html {
align-items: stretch;
}

/* Rows: the wrapper around the lines takes no part in layout. */
.preview-lines {
display: contents;
}

/* Column mode: lines sit side by side, first line leftmost — the same "first is at the start of
the stack" rule as rows. Which script ends up on which side is set by line order. */
/* Columns stretch to the tallest one rather than to a percentage height, so the same rules work
whether the frame is bounded (editor) or hugs its content (readonly embed, headless render). */
.preview-stack--columns {
flex-direction: row;
flex-wrap: wrap;
.preview-stack--columns .preview-lines {
display: flex;
flex: 1;
min-height: 0;
align-items: stretch;
justify-content: center;
/* Columns never wrap: a wrapped column would be linked across the whole diagram. Auto-fit
shrinks it to the frame's width; when it still does not fit, the frame scrolls. Auto margins
center a narrow diagram and let a wide one start at the left edge, so all of it scrolls into
view. */
width: max-content;
margin-inline: auto;
}

/* While pinch-zoomed, panning moves the diagram; a scrollbar would also grow with the zoom. */
.preview-frame[data-aligner-axis='columns']:not([data-zoomed]) {
overflow-x: auto;
}

/* The connector layer covers the zoom box, so the box grows with a diagram wider than the frame. */
.preview-frame[data-aligner-axis='columns'] .preview-zoom {
width: max-content;
min-width: 100%;
}

/* Column mode grows sideways, so the block axis needs a bound for auto-fit to shrink a long
Expand All @@ -277,12 +299,6 @@ html {
align-items: center;
}

/* The credit is a flex item of the stack, so in a row it would sit beside the diagram. Give it a
full basis and it wraps onto its own line underneath. */
.preview-stack--columns .preview-frame__attribution {
flex-basis: 100%;
}

.preview-frame__attribution {
position: relative;
z-index: 3;
Expand Down Expand Up @@ -425,6 +441,13 @@ path.link-path {
align-items: center;
}

/* Upright word in a column: each joined piece sits in its own row and column of the grid, which
lays the pieces out as a staircase. `dir="rtl"` on the word runs the steps right to left. */
.token-row__word {
display: inline-grid;
writing-mode: horizontal-tb;
}

/* Glyph setting per line. `upright` is explicit so it resets the inherited vertical row above. */
.token-view--upright {
writing-mode: horizontal-tb;
Expand Down
Loading
Loading