I am trying to use named page to create two page layouts with Node.js wrapper. I am using PDFReactor version-10-beta. It works as expected only when I don't use flexbox.
If I use flexbox styles in .cover-layer the biggerPage page's size
becomes Fan-Fold European, Portrait even though I set its width (610mmm) and height (260mm). But with the current styling it works as expected. Can someone point out why using flex box and css named page results in undesired page layout? Here is the code:
(() => {
const PDFreactor = require("./nodejs-wrapper/PDFreactor.js");
const pdfReactorInstance = new PDFreactor();
const fs = require('fs');
const config = {
document: `file://${__dirname}/html-file-name.html`,
appendLog: true
};
const result = pdfReactorInstance.convertAsBinary(config);
result.then(function(result) {
fs.writeFile('result.pdf', result, 'binary');
}, function(error) {
console.log(error);
});
})();@page {
margin: -3mm;
-ro-marks: trim;
-ro-marks-width: 1pt;
-ro-marks-color: black;
-ro-bleed-width: 3mm;
}
@page smallPage {
size: 203.2mm 254mm;
}
@page biggerPage {
size: 610mm 260mm;
-ro-marks-color: green;
}
.page {
height: 260mm;
width: 209.2mm;
page: smallPage;
background: red;
}
.page-fraction {
background: #0abf0a;
height: 260mm;
float: left;
display: inline-block;
}
.page-fraction--1 {
width: 40%
}
.page-fraction--2 {
width: 60%
}
.cover {
height: 266mm;
width: 616mm;
page: biggerPage;
}
.cover-layer {
/*display: flex;
flex-flow: row nowrap; */
position: relative;
background: red;
height: 260mm;
width: 610mm;
top: 3mm;
left: 3mm;
}
.cover__back,
.cover__front {
/*flex-basis: 50%;*/
/* comment height, display and float, if flex-basis is not commented*/
width: 50%;
height: 100%;
display: inline-block;
float: left;
}
.cover__back {
background: black;
color: white;
}
.cover__front {
background: skyblue;
}<body>
<div class="cover">
<div class="cover-layer">
<div class="cover__back">Cover back</div>
<div class="cover__front">Cover front</div>
</div>
</div>
<div class="page">
<div class="page-fraction page-fraction--1">page part 1</div>
<div class="page-fraction page-fraction--2">page part 2</div>
</div>
</body>
This is a know issue and will be fixed in the next release of PDFreactor.