Repository navigation
Lay out an element in CSS columns with column-count, column-width and columns #612
Description
Part of #552 (step 28, missing support, medium priority).
CSS multi-column layout on an element is ignored: column-count, column-width, columns, column-gap, column-rule, column-span and column-fill. mPDF has columns only through its own <columns> tag, which takes column-count and column-gap as attributes. Newsletters, two-column terms and conditions, and index pages written with CSS columns come out as one column.
Measured on gravitypdf at 60b82630, PHP 8.5.4, from the positions text is drawn at.
| Document | Browser | mPDF |
|---|---|---|
<div style="column-count:2;column-gap:10mm"> with 80 words |
two 85 mm columns | one 180 mm column of five lines |
<div style="columns:40mm"> |
as many 40 mm columns as fit: four | one column |
<columns column-count="2" column-gap="10" /> … <columns column-count="1" /> |
— | two columns (works) |
<div style="column-count:2;column-rule:1px solid"> |
a line between the columns | one column, no line |
Cause.
- Nothing reads the
column-*properties from CSS.Columns::open()reads the tag's attributes (src/Tag/Columns.php:34-58) and callsSetColumns()(src/Mpdf.php:25359). - Before starting,
<columns>closes every open block (src/Tag/Columns.php:36-40). mPDF's columns span the page's text area and cannot sit inside a block with its own margins, borders or background.
Fix.
- A top-level block. When a block at the top level has
column-countorcolumn-widthother thanauto, run its content through the<columns>path:- Start columns when the block opens, with the count from
column-count, or fromcolumn-widthand the available width.columnssets both. - Use
column-gapfor the gap.normalis 1em. - Go back to one column when the block closes.
- Start columns when the block opens, with the count from
column-span: allon a child ends the columns before it, lays it out full width, and starts them again after it.<columns>already supports this, by closing and reopening columns.column-fill.balance, the default, is what<columns>'valign="J"does.autofills one column after another.column-rule. Draw a vertical line between columns, the full height of the columns on each page.- Nested blocks. Columns inside a block with its own margins, borders or background need
SetColumns()to work within a block's inner width, and the block's box to be painted across all columns. That is a larger change. Leave such a block in one column, and say so in the PR.
Tests. Each row above, columns with only a width, column-span: all on a heading, a columned block that crosses a page, a columned block inside a bordered block (one column, unchanged), and <columns> output unchanged.
Activity