Skip to content

Conversation

@eakkew
Copy link
Contributor

@eakkew eakkew commented May 28, 2018

if you use css variable and change them with js, e.g. document.documentElement.style.setProperty("--foo", bar);, it wont include when we print. So, i add a line to copy inline style from html tag to html tag inside iframe

@jasonday
Copy link
Owner

Feels like an edge case, but low risk. Will look into it.

@jasonday
Copy link
Owner

I am not going to merge this at this time, as we have the copyTagClasses option to copy classes on the html or body elements, which can cover this use case when classes are used (preferable over inline styling).

@jasonday jasonday closed this May 28, 2018
@eakkew
Copy link
Contributor Author

eakkew commented May 30, 2018

I don't think you can use copyTagClasses. When you use css variable and change them dynamicly, the style are always inline.

@jasonday
Copy link
Owner

@eakkew What I'm referencing is that rather than inlining styles, use classes on the html or body element (which can also be changed dynamically).

@eakkew
Copy link
Contributor Author

eakkew commented May 30, 2018

I knew we can change css classes dynamicly. however, in my case my users are able to config things. I think creating all possible classes is not a best solution.

@robcowen
Copy link

robcowen commented May 5, 2020

I agree with @eakkew. If setting CSS variables dynamically (in my case, so that the arrangement of rows and columns in a CSS grid match those of a 2D javascript array), the variables do not get passed. This means that my CSS grid items are condensed into a single column, rendering my print useless. Is there a workaround for this, please?

@oculus42
Copy link
Collaborator

oculus42 commented May 5, 2020

I'm reopening this and looking to add this functionality behind a flag, disabled by default to maintain backward compatibility.

In the short-term, @robcowen If you use the beforePrint function to copy the styles from the <html> tag to the element being printed, does that allow the CSS variables to work?

Something like (this is untested):

var $foo = $('.myPrint');
$foo.printThis({beforePrint: function() {
  $foo.prop('style', $('html').get(0).style.cssText);
}});

@oculus42 oculus42 reopened this May 5, 2020
@oculus42
Copy link
Collaborator

oculus42 commented May 5, 2020

@robcowen By setting importStyle: true I am successfully seeing CSS variables propagated into the print. Can you verify this for your use case?

https://jsfiddle.net/_sir/142hb9rk/

@robcowen
Copy link

robcowen commented May 6, 2020

@robcowen By setting importStyle: true I am successfully seeing CSS variables propagated into the print. Can you verify this for your use case?

https://jsfiddle.net/_sir/142hb9rk/

I've modified my code to use a different method of printing now, so I can't test it properly. However, setting importStyle: true doesn't resolve it for me, nor did a quick test of the beforePrint method above.

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.

4 participants