Skip to content

support css var change by javascript#153

Open
eakkew wants to merge 1 commit into
jasonday:masterfrom
eakkew:feature/copy_html_inline_style
Open

support css var change by javascript#153
eakkew wants to merge 1 commit into
jasonday:masterfrom
eakkew:feature/copy_html_inline_style

Conversation

@eakkew

@eakkew eakkew commented May 28, 2018

Copy link
Copy Markdown
Contributor

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
Copy Markdown
Owner

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

@jasonday

Copy link
Copy Markdown
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

eakkew commented May 30, 2018

Copy link
Copy Markdown
Contributor Author

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
Copy Markdown
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

eakkew commented May 30, 2018

Copy link
Copy Markdown
Contributor Author

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

robcowen commented May 5, 2020

Copy link
Copy Markdown

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

oculus42 commented May 5, 2020

Copy link
Copy Markdown
Collaborator

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

oculus42 commented May 5, 2020

Copy link
Copy Markdown
Collaborator

@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

robcowen commented May 6, 2020

Copy link
Copy Markdown

@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