user26
November 9, 2021, 2:43pm
1
Which product are you using?
PDF.js Express Plus
PDF.js Express Version
8.1.1
Detailed description of issue
I have a text field that is using the combing feature but it doesn’t render correctly in the pdfjs express viewer.
Expected behaviour
I expect the text field to “comb” the inputted text
Does your issue happen with every document, or just one?
Every document
Link to document
Code snippet
This could be demoed here: PDF.js Viewer Demo | PDF.js Express
Combing is on the VIN field on the top of the first page.
system
November 9, 2021, 2:43pm
3
Hello, I’m Ron, an automated tech support bot
While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:
Guides:
APIs:
Forums:
user26
November 16, 2021, 10:01pm
4
For example here is PDF.js demo screenshot which is correct:
And here is PDF.js Express with the same PDF:
(next post)
user26
November 16, 2021, 10:02pm
5
PDF.js express with same PDF:
Logan
November 17, 2021, 4:30pm
6
Hey there!
Sorry for the delay, I was away for a few days.
We do not currently support this feature in PDF.js Express - However I will add it to our backlog and we can investigate implementing it when we have time.
Thanks!
Logan
user26
November 17, 2021, 5:22pm
7
I checked PDF.js and the code for handing a combed input field here:
}
if (blurListener) {
element.addEventListener("blur", blurListener);
}
if (this.data.maxLen !== null) {
element.maxLength = this.data.maxLen;
}
if (this.data.comb) {
const fieldWidth = this.data.rect[2] - this.data.rect[0];
const combWidth = fieldWidth / this.data.maxLen;
element.classList.add("comb");
element.style.letterSpacing = `calc(${combWidth}px - 1ch)`;
}
} else {
element = document.createElement("div");
element.textContent = this.data.fieldValue;
element.style.verticalAlign = "middle";
Also the comb class is the following:
font-family: monospace;
padding-left: 2px;
padding-right: 0;
user26
November 17, 2021, 5:23pm
8
I found where PDF.js handles it:
}
if (blurListener) {
element.addEventListener("blur", blurListener);
}
if (this.data.maxLen !== null) {
element.maxLength = this.data.maxLen;
}
if (this.data.comb) {
const fieldWidth = this.data.rect[2] - this.data.rect[0];
const combWidth = fieldWidth / this.data.maxLen;
element.classList.add("comb");
element.style.letterSpacing = `calc(${combWidth}px - 1ch)`;
}
} else {
element = document.createElement("div");
element.textContent = this.data.fieldValue;
element.style.verticalAlign = "middle";