Repository navigation
Support box-sizing, and min-/max- widths and heights on blocks, tables and cells #593
Copy link
Copy link
Open
Labels
enhancementNew feature or requestNew feature or request
Description
Part of #552 (step 28, missing support, high priority).
Three sizing properties that framework CSS relies on are not read:
box-sizingis never read.min-heightandmax-heightare not read on blocks.min-width,max-width,min-heightandmax-heightare not read on tables and cells.
Bootstrap, Tailwind and most resets start with *, ::before, ::after { box-sizing: border-box }, so every padded box with a width comes out wider than designed.
min-width and max-width on blocks are #588. height acting as a minimum today is #587.
Measured on gravitypdf at 60b82630, PHP 8.5.4, from the filled rectangles.
| Rule | Browser | mPDF |
|---|---|---|
div { box-sizing: border-box; width: 50mm; padding: 5mm; border: 1mm solid } |
50 mm wide | 62 mm wide |
div { min-height: 40mm } holding one line |
40 mm tall | 5.1 mm |
div { max-height: 10mm } holding five lines |
10 mm tall, the rest overflowing | 25.7 mm |
table { max-width: 50mm } holding a long paragraph |
50 mm wide | 172 mm wide |
table { min-width: 150mm } holding aa |
150 mm wide | as wide as aa |
td { min-width: 60mm } holding aa |
60 mm wide | as wide as aa |
td { max-width: 20mm } in a width: 100% table |
20 mm wide | 167 mm wide |
td { min-height: 30mm } |
30 mm tall | one line tall |
Where the values are read today.
- Blocks:
WIDTHinsetCSS()(src/Mpdf.php:19356-19359) andHEIGHTinBlockTag::open()(src/Tag/BlockTag.php:558). Thecss_set_widththey set is the content width, andBlockTag::open()adds padding and borders to it (:830-875). - Tables:
WIDTHinTable::open()(src/Tag/Table.php:159-163), then_tableWidth()(src/Mpdf.php:21023) and_tableColumnWidth()(:20547) share the width out between columns. - Cells:
WIDTHandHEIGHTinTd::open()(src/Tag/Td.php:376-394). - Images:
min-/max-are read, and nothing else is (src/Tag/Img.php:138-141).
Fix.
box-sizing. Read it inBlockTag::open(),Table::open()andTd::open(). Withborder-box, take padding and borders offwidth,heightand themin-/max-values before storing them, and never go below 0. It is not inherited, so a*rule reaches each element through the cascade; Match the universal selector*#530 makes*match.min-heightandmax-heighton blocks. Needsheightto be exact first (A percentageheighton a block resolves against the page area, andheightacts as a minimum thatoverflow: hiddendoes not clip #587). Thenmin-heightpads the box out, asheightdoes today, andmax-heightcaps it, with the rest overflowing.- Tables. Clamp the table's width in
_tableWidth()after the content has been measured. - Cells.
min-widthraises the column's minimum.max-widthcaps its maximum in_tableColumnWidth(), as thewa cell'swidthsets does.min-heightpads the row asheightdoes on a cell.max-heighton a cell is undefined in CSS 2.1; leave it.
- Percentages resolve as
widthandheightdo on the same element.
Tests. Each row above; box-sizing: content-box restoring the default; border-box with percentage widths, with auto margins, and on a float; min-width larger than max-width (min wins); and a cell's min-width in a table-layout: auto table with colspan.
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
enhancementNew feature or requestNew feature or request
Activity