Handle border and padding CSS in CHTML and SVG output #799
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR allows CHTML and SVG output to handle border and padding CSS values properly. In the past, CHTML would show the borders and padding, but didn't take it into account in its bounding boxes, so things like square roots and stretchy delimiters would not produce the correct sizes, and sub- and super-scripts would be misplaced. SVG did not handle these properties at all.
We fix the problem by introducing a new
getOuterBBox()
function that gets the bounding box taking borders and padding into account (the originalgetBBox()
gets the size of the content without borders or padding, and is needed in that form to handle the internal layout properly). This new method is called when a layout needs the size of a child node in elements that don't have inferred rows, which never have borders or padding, so most of the files changed here are just to substitutegetOuterBBox()
forgetBBox()
in those cases.The other main change is in the SVG wrapper class, which adds
handleBorders()
in order to implement the borders, and adds adx
property that is used to adjust the horizontal position of the wrapped element when there are borders or padding on the left. Note that SVG only implements solid, dashed, and dotted border styles, and no rounded corners, just rectangular ones, but you can specify individual sides and have them colored and sized independently.