From cd717415324a8ddfbcb61a44a6103df394516c51 Mon Sep 17 00:00:00 2001 From: PgBiel <9021226+PgBiel@users.noreply.github.com> Date: Thu, 25 Jan 2024 12:35:10 -0300 Subject: Merging cells: Colspans [More Flexible Tables Pt.3a] (#3239) --- tests/ref/layout/grid-colspan.png | Bin 0 -> 91434 bytes tests/ref/layout/grid-rtl.png | Bin 1752 -> 41422 bytes tests/typ/layout/grid-colspan.typ | 141 ++++++++++++++++++++++++++++++++++++++ tests/typ/layout/grid-rtl.typ | 81 ++++++++++++++++++++++ 4 files changed, 222 insertions(+) create mode 100644 tests/ref/layout/grid-colspan.png create mode 100644 tests/typ/layout/grid-colspan.typ (limited to 'tests') diff --git a/tests/ref/layout/grid-colspan.png b/tests/ref/layout/grid-colspan.png new file mode 100644 index 00000000..46577c62 Binary files /dev/null and b/tests/ref/layout/grid-colspan.png differ diff --git a/tests/ref/layout/grid-rtl.png b/tests/ref/layout/grid-rtl.png index 603bd8af..a1bfad56 100644 Binary files a/tests/ref/layout/grid-rtl.png and b/tests/ref/layout/grid-rtl.png differ diff --git a/tests/typ/layout/grid-colspan.typ b/tests/typ/layout/grid-colspan.typ new file mode 100644 index 00000000..3fd1a0fd --- /dev/null +++ b/tests/typ/layout/grid-colspan.typ @@ -0,0 +1,141 @@ +#grid( + columns: 4, + fill: (x, y) => if calc.odd(x + y) { blue.lighten(50%) } else { blue.lighten(10%) }, + inset: 5pt, + align: center, + grid.cell(colspan: 4)[*Full Header*], + grid.cell(colspan: 2, fill: orange)[*Half*], + grid.cell(colspan: 2, fill: orange.darken(10%))[*Half*], + [*A*], [*B*], [*C*], [*D*], + [1], [2], [3], [4], + [5], grid.cell(colspan: 3, fill: orange.darken(10%))[6], + grid.cell(colspan: 2, fill: orange)[7], [8], [9], + [10], grid.cell(colspan: 2, fill: orange.darken(10%))[11], [12] +) + +#table( + columns: 4, + fill: (x, y) => if calc.odd(x + y) { blue.lighten(50%) } else { blue.lighten(10%) }, + inset: 5pt, + align: center, + table.cell(colspan: 4)[*Full Header*], + table.cell(colspan: 2, fill: orange)[*Half*], + table.cell(colspan: 2, fill: orange.darken(10%))[*Half*], + [*A*], [*B*], [*C*], [*D*], + [1], [2], [3], [4], + [5], table.cell(colspan: 3, fill: orange.darken(10%))[6], + table.cell(colspan: 2, fill: orange)[7], [8], [9], + [10], table.cell(colspan: 2, fill: orange.darken(10%))[11], [12] +) + +--- +#grid( + columns: 4, + fill: (x, y) => if calc.odd(x + y) { blue.lighten(50%) } else { blue.lighten(10%) }, + inset: 5pt, + align: center, + gutter: 3pt, + grid.cell(colspan: 4)[*Full Header*], + grid.cell(colspan: 2, fill: orange)[*Half*], + grid.cell(colspan: 2, fill: orange.darken(10%))[*Half*], + [*A*], [*B*], [*C*], [*D*], + [1], [2], [3], [4], + [5], grid.cell(colspan: 3, fill: orange.darken(10%))[6], + grid.cell(colspan: 2, fill: orange)[7], [8], [9], + [10], grid.cell(colspan: 2, fill: orange.darken(10%))[11], [12] +) + +#table( + columns: 4, + fill: (x, y) => if calc.odd(x + y) { blue.lighten(50%) } else { blue.lighten(10%) }, + inset: 5pt, + align: center, + gutter: 3pt, + table.cell(colspan: 4)[*Full Header*], + table.cell(colspan: 2, fill: orange)[*Half*], + table.cell(colspan: 2, fill: orange.darken(10%))[*Half*], + [*A*], [*B*], [*C*], [*D*], + [1], [2], [3], [4], + [5], table.cell(colspan: 3, fill: orange.darken(10%))[6], + table.cell(colspan: 2, fill: orange)[7], [8], [9], + [10], table.cell(colspan: 2, fill: orange.darken(10%))[11], [12] +) + +--- +#set page(width: 300pt) +#table( + columns: (2em, 2em, auto, auto), + stroke: 5pt, + [A], [B], [C], [D], + table.cell(colspan: 4, lorem(20)), + [A], table.cell(colspan: 2)[BCBCBCBC], [D] +) + +--- +// Error: 3:8-3:32 cell's colspan would cause it to exceed the available column(s) +// Hint: 3:8-3:32 try placing the cell in another position or reducing its colspan +#grid( + columns: 3, + [a], grid.cell(colspan: 3)[b] +) + +--- +// Error: 4:8-4:32 cell would span a previously placed cell at column 2, row 0 +// Hint: 4:8-4:32 try specifying your cells in a different order or reducing the cell's colspan +#grid( + columns: 3, + grid.cell(x: 2, y: 0)[x], + [a], grid.cell(colspan: 2)[b] +) + +--- +// Colspan over all fractional columns shouldn't expand auto columns on finite pages +#table( + columns: (1fr, 1fr, auto), + [A], [B], [C], + [D], [E], [F] +) +#table( + columns: (1fr, 1fr, auto), + table.cell(colspan: 3, lorem(8)), + [A], [B], [C], + [D], [E], [F] +) + +--- +// Colspan over only some fractional columns will not trigger the heuristic, and +// the auto column will expand more than it should. The table looks off, as a result. +#table( + columns: (1fr, 1fr, auto), + [], table.cell(colspan: 2, lorem(8)), + [A], [B], [C], + [D], [E], [F] +) + +--- +// On infinite pages, colspan over all fractional columns SHOULD expand auto columns +#set page(width: auto) +#table( + columns: (1fr, 1fr, auto), + [A], [B], [C], + [D], [E], [F] +) +#table( + columns: (1fr, 1fr, auto), + table.cell(colspan: 3, lorem(8)), + [A], [B], [C], + [D], [E], [F] +) + +--- +// Test multiple regions +#set page(height: 5em) +#grid( + stroke: red, + fill: aqua, + columns: 4, + [a], [b], [c], [d], + [a], grid.cell(colspan: 2)[e, f, g, h, i], [f], + [e], [g], grid.cell(colspan: 2)[eee\ e\ e\ e], + grid.cell(colspan: 4)[eeee e e e] +) diff --git a/tests/typ/layout/grid-rtl.typ b/tests/typ/layout/grid-rtl.typ index 9c871424..33a68888 100644 --- a/tests/typ/layout/grid-rtl.typ +++ b/tests/typ/layout/grid-rtl.typ @@ -7,3 +7,84 @@ --- #set text(dir: rtl) #table(columns: 2)[A][B][C][D] + +--- +// Test interaction between RTL and colspans +#set text(dir: rtl) +#grid( + columns: 4, + fill: (x, y) => if calc.odd(x + y) { blue.lighten(50%) } else { blue.lighten(10%) }, + inset: 5pt, + align: center, + grid.cell(colspan: 4)[*Full Header*], + grid.cell(colspan: 2, fill: orange)[*Half*], + grid.cell(colspan: 2, fill: orange.darken(10%))[*Half*], + [*A*], [*B*], [*C*], [*D*], + [1], [2], [3], [4], + [5], grid.cell(colspan: 3, fill: orange.darken(10%))[6], + grid.cell(colspan: 2, fill: orange)[7], [8], [9], + [10], grid.cell(colspan: 2, fill: orange.darken(10%))[11], [12] +) + +#grid( + columns: 4, + fill: (x, y) => if calc.odd(x + y) { blue.lighten(50%) } else { blue.lighten(10%) }, + inset: 5pt, + align: center, + gutter: 3pt, + grid.cell(colspan: 4)[*Full Header*], + grid.cell(colspan: 2, fill: orange)[*Half*], + grid.cell(colspan: 2, fill: orange.darken(10%))[*Half*], + [*A*], [*B*], [*C*], [*D*], + [1], [2], [3], [4], + [5], grid.cell(colspan: 3, fill: orange.darken(10%))[6], + grid.cell(colspan: 2, fill: orange)[7], [8], [9], + [10], grid.cell(colspan: 2, fill: orange.darken(10%))[11], [12] +) + +--- +#set text(dir: rtl) +#table( + columns: 4, + fill: (x, y) => if calc.odd(x + y) { blue.lighten(50%) } else { blue.lighten(10%) }, + inset: 5pt, + align: center, + table.cell(colspan: 4)[*Full Header*], + table.cell(colspan: 2, fill: orange)[*Half*], + table.cell(colspan: 2, fill: orange.darken(10%))[*Half*], + [*A*], [*B*], [*C*], [*D*], + [1], [2], [3], [4], + [5], table.cell(colspan: 3, fill: orange.darken(10%))[6], + table.cell(colspan: 2, fill: orange)[7], [8], [9], + [10], table.cell(colspan: 2, fill: orange.darken(10%))[11], [12] +) + +#table( + columns: 4, + fill: (x, y) => if calc.odd(x + y) { blue.lighten(50%) } else { blue.lighten(10%) }, + inset: 5pt, + align: center, + gutter: 3pt, + table.cell(colspan: 4)[*Full Header*], + table.cell(colspan: 2, fill: orange)[*Half*], + table.cell(colspan: 2, fill: orange.darken(10%))[*Half*], + [*A*], [*B*], [*C*], [*D*], + [1], [2], [3], [4], + [5], table.cell(colspan: 3, fill: orange.darken(10%))[6], + table.cell(colspan: 2, fill: orange)[7], [8], [9], + [10], table.cell(colspan: 2, fill: orange.darken(10%))[11], [12] +) + +--- +// Test multiple regions +#set page(height: 5em) +#set text(dir: rtl) +#grid( + stroke: red, + fill: aqua, + columns: 4, + [a], [b], [c], [d], + [a], grid.cell(colspan: 2)[e, f, g, h, i], [f], + [e], [g], grid.cell(colspan: 2)[eee\ e\ e\ e], + grid.cell(colspan: 4)[eeee e e e] +) -- cgit v1.2.3