search

Kozea / WeasyPrint

The awesome document factory
https://weasyprint.org
BSD 3-Clause "New" or "Revised" License
7.23k stars 686 forks source link

Implement calc() and other math functions #357

Open Akay7 opened 8 years ago

Akay7 commented 8 years ago

Function calc of css not working :(

/* property: calc(expression) */ width: calc(100% - 80px);

https://developer.mozilla.org/en/docs/Web/CSS/calc

dennisvang commented 3 years ago

For those interested, here's the nitty gritty: https://drafts.csswg.org/css-values-3/#calc-notation

whinee commented 1 year ago

Please mention that calc() is yet to be implemented in the documentation. This might save devs that uses this project hours or even weeks of pain, debugging what might be wrong with their HTML/CSS. Thank you!

liZe commented 1 year ago

Hi!

This might save devs that uses this project hours or even weeks of pain, debugging what might be wrong with their HTML/CSS.

If you want to avoid "weeks of pain", you can read the logs: warnings are logged each time a property or a value is not supported.

Please mention that calc() is yet to be implemented in the documentation.

You’re right, that would be very useful. Interested in opening a pull request? That would be a quite simple way to become a contributor!

whinee commented 1 year ago

Hallo!

If you want to avoid "weeks of pain", you can read the logs: warnings are logged each time a property or a value is not supported.

Turns out that not reading docs properly also causes this. Thanks for reminding me. Time to turn on logging.

You’re right, that would be very useful. Interested in opening a pull request? That would be a quite simple way to become a contributor!

Contrary to my comment above, I love reading docs! Though I am not confident that I will be able to write it. I mean I can, just not properly. I guess I'll try???

Anyways, I have just re-read my comment, and I think it might have sounded rude, and I feel bad for it now, sorryy... I tried to make it short 'cause every issue / comment I write sounds childish...

liZe commented 1 year ago

Anyways, I have just re-read my comment, and I think it might have sounded rude, and I feel bad for it now, sorryy... I tried to make it short 'cause every issue / comment I write sounds childish...

No problem!

Contrary to my comment above, I love reading docs! Though I am not confident that I will be able to write it. I mean I can, just not properly. I guess I'll try???

Adding a sentence here is sufficient: https://github.com/Kozea/WeasyPrint/blob/dc7c2cb18c174b39dfb869fa5820b13cdf4da7b2/docs/api_reference.rst?plain=1#L647

You can copy another line where a property is not supported. And don’t worry, it doesn’t have to be perfect, we can always enhance it afterwards!

grewn0uille commented 1 year ago

Hello!

As you may know, two weeks ago was CourtBouillon 3-year anniversary 🎉.

For this occasion, we prepared a short survey to have your opinion on this year’s features and to know what you’d like to see in the future! Don’t hesitate to give a boost to this feature ✨️

The survey is opened until November 19.

anasvikh commented 11 months ago

Hi! Do you have any updates for this feature?

liZe commented 11 months ago

Hi!

Hi!

Do you have any updates for this feature?

Great timing! We’ve just talked about it in #1219.

Current status: we’ve just cleaned the code that takes care of CSS values validation, in order to get a more solid support of var(). When the latest missing features for var() are added (non-shorthand properties with multiple values, functions), we’re ready to look at other functions such as calc(). There’s probably a lot of work left, but at least we now have clean code we can rely on to validate values that include functions.

easyjoh commented 9 months ago

if there any work-around for calc in width of table? I have a nested table which need to have the width: calc(100% + 0.25mm); can I somehow make the long walk to get it working before the calc is implemented?

liZe commented 9 months ago

if there any work-around for calc in width of table?

I’m afraid there’s no easy workaround for your case. Setting negative left and right margins to -0.25mm may help.

majorisgit commented 4 months ago

Hello,

When will calc() be implemented? Are there any alternatives?

Thanks

liZe commented 4 months ago

Hi!

When will calc() be implemented?

We have no roadmap for this feature. That’s a complex feature that requires quite a lot of work.

Are there any alternatives?

As explained above, not really. Using a CSS preprocessor like Sass can help in some cases.

mbarkhau commented 1 month ago

Would an initial implementation be possible, that doesn't require context? So if we say, we don't css variables and also font size in the current scope are initially off the table, could calc be implemented for very basic expressions such as these: calc(4.75 * 4)mm, calc(2 * 9pt) ?

liZe commented 1 month ago

Yes, now that we have #1219 fixed, the situation is much better than before, and we can imagine solving this kind of examples. Even the "context" shouldn’t be a problem (as we already need much more for var()), we "only" need quite some dedicated time to write the required code.

(I was a bit afraid with your example, but I’m calc(4.75 * 4)mm is actually invalid, we have to use calc(4.75 * 4mm) instead!)

lunarcloud commented 3 days ago

Any news or progress on this? We would love to use calc in our own styles to make variables more useful and to utilize some calc(100% + var(--some-amount))

liZe commented 3 days ago

Hi!

Any news or progress on this?

No. As explained above, we "only" need to find dedicated time to solve this issue. As the problem is a bit complex, if the feature is not sponsored, it requires a pretty long period of free time to focus, and that’s something we don’t often have (you probably know what I’m talking about 😄).