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

Add box shadow. #1535

Open
DVDTSB opened this issue Jun 20, 2023 · 5 comments
Open

Add box shadow. #1535

DVDTSB opened this issue Jun 20, 2023 · 5 comments
Labels
feature request New feature or request good contribution Good, isolated issue for someone that wants to contribute good first issue Good for newcomers visualize Related to drawing and visualizations.

Comments

@DVDTSB
Copy link
Contributor

DVDTSB commented Jun 20, 2023

Description

Would be nice to have a box/reactangle feature. You would have a color and a position to configure the shadow.

Use Case

To add shadows to boxes, making them stand out.

@DVDTSB DVDTSB added the feature request New feature or request label Jun 20, 2023
@reknih reknih added the visualize Related to drawing and visualizations. label Jul 3, 2023
@laurmaedje laurmaedje added the good contribution Good, isolated issue for someone that wants to contribute label Jul 16, 2024
@LaurenzV
Copy link
Collaborator

LaurenzV commented Aug 26, 2024

PDF does not have native support for box shadows, so we have to render it into an image and then include it in the PDF.

Suggested implementation: We add the corresponding API on the Typst side, and based on the parameters we generate an SVG and use SVG filters to get the desired effect (e.g. Gaussian blur). Then, we simply convert this SVG using usvg and include the svg in the desired position. Implementing this should be pretty straight-forward, the only tricky thing might be positioning the SVG and getting the dimensions right, but that shouldn't be impossible to achieve.

@LaurenzV LaurenzV added the good first issue Good for newcomers label Aug 26, 2024
@Enivex
Copy link
Collaborator

Enivex commented Aug 26, 2024

PDF does not have native support for box shadows, so we have to render it into an image and then include it in the PDF.

Suggested implementation: We add the corresponding API on the Typst side, and based on the parameters we generate an SVG and use SVG filters to get the desired effect (e.g. Gaussian blur). Then, we simply convert this SVG using usvg and include the svg in the desired position. Implementing this should be pretty straight-forward, the only tricky thing might be positioning the SVG and getting the dimensions right, but that shouldn't be impossible to achieve.

It doesn't have to be an image, it could be based on gradients no?

@LaurenzV
Copy link
Collaborator

I don't think you can easily simulate a Gaussian blur with a gradient, although I haven't tried it. But still, rasterizing would be a good enough first step, I think.

@Enivex
Copy link
Collaborator

Enivex commented Aug 26, 2024

I don't think you can easily simulate a Gaussian blur with a gradient, although I haven't tried it. But still, rasterizing would be a good enough first step, I think.

You can do almost anything with mesh gradients, but yeah

@DVDTSB
Copy link
Contributor Author

DVDTSB commented Aug 30, 2024

i think its important to mention https://github.com/typst-community/harbinger , a package that aims to implement shadows (using svg filters and such, as well as with gradients), which we haven't published yet (mainly because of problems with the rendering of svg filters, i should make an issue about it actually)

i have a couple ideas that could remove the need for svg filters (mainly doing with mesh gradients aproximating gaussian blur, like enivex suggested), but i haven't have the time to implement them yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request New feature or request good contribution Good, isolated issue for someone that wants to contribute good first issue Good for newcomers visualize Related to drawing and visualizations.
Projects
None yet
Development

No branches or pull requests

5 participants