CSS Variables
The CSS variables don't seem to be supported, like
:root {
--myColor: red;
}
p {
color:var(--myColor);
}
Am I wrong? Are there plans to support them soon?
Thanks
Correct, Prince does not support CSS variables at this time, and it may take a while before we support them. In the meantime you could use a CSS preprocessor like Sass.
Ok, thanks for the real-time answer!
Without Sass, would you see any efficient way to change one color across multiple classes, multiple times? I need to change the palette (about 20 colors) of some complex reports, and variables work like a charm in Chrome. Maybe jQuery? I can't wrap my head around it...
I guess you could use JavaScript to create a <style> element dynamically, if that would help?
Right, I think I'll have to go that way. Thanks!
By the way, it seems that also the flexbox isn't supported yet?
Not yet, although it is the most popular request on the forum right now, so we will take a look at it as soon as we have time.
I'm trying to increase/decrease the font size of user-uploaded documents at render-time using the prince command-line interface. It's important that the text size is increased independently of the images/media on the rest of the page.
I don't have any control over the HTML documents being uploaded or how they are being constructed (they're in .ePub format) so I can't make any assumptions about the styles/classes they're using. This means that I can't use Javascript to inject some style elements, as suggested above.
Without this functionality I'm not sure how to modify the size of text on a page independently of it's images.
I've previously used WKHtmlToPdf where there is a --minimum-font-size option, and also PhantomJS where you can increase the fontsize in the HTML using Javascript before rendering to PDF/image.
Is there any other workaround for this, and if not is there any plan to implement support for the .css() function?
Prince supports a subset of getComputedStyle, which you can use to scan the document for elements that have a font-size below some chosen minimum.
The attached example finds every element with a font-size below 10pt and sets it to 10pt.
- font.html 0.7 kB
I'm pretty sure I can use this for what I need, thank you! And also for the quick response!
I just realised that this will not work since it only works for inline styles. It's important to support both inline styles as well as styles defined in external .css files. This is possible with the .css() extension since it returns the final, computed, style.
- font_css.html 1.1 kB
I can't quite tell what you mean from your example, it seems to work?
My apologies, I was testing in Chrome using the Javascript debugger and it seems that the font sizes returned by getComputedStyle are automatically converted from "pt" units into "px" units, which the sample code couldn't deal with.
I also had some issues with the re-use of "elem" in your example causing the recursive call to not traverse all elements in the DOM, but a small change got it working.
I attach a working example of increasing a font size by a constant factor for anyone who needs it. Thanks Mike!
- font_size_increase.html 1.4 kB
One vote for adding CSS Variables support to the roadmap
I created a Code Sample for CSS-Custom Properties:
https://codepen.io/g12n/pen/xYGJybThey are extremely useful to set CMYK- and Spot-Colors for Print Contexts, while still maintaining RGB-Colors for screen-version.
Another big Use-Case is color themes.
https://codepen.io/g12n/pen/KQwpJR
It has been more then 2 years now, it is time to include CSS variables !
There are simply too many useful usages.
You are right, we will try and move them up the roadmap. In the meantime, perhaps you can use SaSS or another CSS pre-processor.
There are things that you just can’t do with pre-processors but yes in the meantime we will find other ways.
Perhaps I expect too much but it seems to me that Prince is lagging behind some major CSS enhancements.
True, supporting tagged PDF, SVG filters, and flexbox layout has kept us busy recently!
@mikeday Nice to know that you are working on this. Do you have a public roadmap ?
Can't use SASS, because it dies on the prince specific media queries like @prince-pdf.
Can't use LESS, because it interprets @page:left as a malformed version of its variable declaration through extend syntax, and drops pseudoclasses it doesn't recognize from &.
Can't use PostCSS, because it doesn't like rules it doesn't recognize, like prince-pdf-open-action or prince-pdf-page-layout.
Can't use cssNEXT because it relies on PostCSS under the hood.
Can't use postcss-preset-env because, whereas it tolerates custom rules, it drops them.
Can't use stylus because it drops pseudoclasses it doesn't recognize
John Haugeland is http://fullof.bs/
Mike: the last time I asked for this was Prince 6, so, I think I get to ask again
This is actually a *really* big deal, buddy. Please promote this.
John Haugeland is http://fullof.bs/
Hang in there, we'll get to it!
Might be a good idea to patch SASS while we're at it though...
honestly, i only use two things in any of the preprocessors: variables and include
if you had both of those i could remove preprocessors from my entire prince toolchain
John Haugeland is http://fullof.bs/
This has become a big issue for us as well. What type of priority does this development have and can we get it elevated?
I'd like to chime in here too. CSS variables are very useful and in a way that is more useful than what SASS/LESS can handle. Please see this
codepen example. Using CSS variables it makes defining a palette of colors with exceptions fairly easy to deal with. Unfortunately until Prince supports this we can't use this approach.
Hi Zach, I just had a look at your codepen and I have no idea what it should do. However, I like CSS variables a lot myself. So far, we've only used it for website css, so not a requirement for Prince, but it will definitely go that way.
Hi Pieter,
What the codepen is trying to show is a use case I have in my report generation. We have a mechanism that allows specific firms to assign fixed colors to specific kinds of entity (in the example account 3 should always be green and product 2 should always be red). If an entity does not have an assigned color it should instead use the next color from the defined color palette repeating again if there are more entities than colors in the palette (In the example it has a 5 color grayscale palette).
In the example it sets the css variable "--entity-color" with the appropriate color for that entity (whether from the palette or specifically assigned). This value is then retrieved and used on the background-color of .color-block and the border-color of div.entity. In a real report we world also use it for the stroke and/or fill of numerous highcharts elements.
The example is meant to show how this works to easily:
1) define a palette in css and use it in a rotating fashion
2) allow overrides that are used regardless of where the overridden entity exists in the list.
However as we all know Prince doesn't support CSS variables so this code doesn't work at all in Prince.
I get it now, thanks for the explanation!
The
latest builds of Prince now have support for CSS variables! Thanks for your patience.
fantastic
John Haugeland is http://fullof.bs/
@mikeday -- any chance this new functionality will be ported over in a new release for Prince for Books?
Yes CSS variables will be included in Prince for Books to sync up with Prince 13 in November.
