Skip to content
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.

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

Handle border and padding CSS in CHTML and SVG output #799

Merged
merged 4 commits into from
May 1, 2022
Merged

Conversation

dpvc
Copy link
Member

@dpvc dpvc commented Apr 21, 2022

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 original getBBox() 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 substitute getOuterBBox() for getBBox() in those cases.

The other main change is in the SVG wrapper class, which adds handleBorders() in order to implement the borders, and adds a dx 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.

@dpvc dpvc added this to the 3.2.1 milestone Apr 21, 2022
@dpvc dpvc requested a review from zorkow April 21, 2022 12:36
Copy link
Member

@zorkow zorkow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a few minor things. O/w lgtm.

ts/output/svg/Wrapper.ts Show resolved Hide resolved
ts/output/svg/Wrapper.ts Show resolved Hide resolved
ts/output/common/Wrapper.ts Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants