Increase size of text

[courtneypattison]

It's frustrating when the text on the pattern is small. I removed the textLayer from the page canvas renderer but when it was there, I could see it extracted text from the page and put it in divs. Maybe we could do a hover that shows the text larger. I haven't looked into it, I'm just throwing an idea out there. Or maybe we can change the font size with pdfjs.

[hluedeke]

I am making a little headway on this, but I'm under the weather right now (possibly flu), so it's not going very quickly.

I was able to utilize the customTextRenderer function on the Page props to output big text, but the text is currently missing transformations. I tried applying the transform directly to the custom tag, but that did not work as expected. I can see that the internal implementation for is recursive, but I haven't quite cracked the code on where the customRenderer fits into the logic.

=== EDIT: I think the transformation matrix is mostly correct, it's just missing scale. I'm probably headed back to bed now. I need to sleep 🤪

Another issue we're going to run into is the absolute positioning of text. PDF is very specific about size and location of text, while HTML tends to rely on relative positioning. Since we are trying to increase text size, text that is close to other text will compete for screen space. I know there was mention of "increase size on hover", which I'm hoping we can do with a css hover: attribute. I have not tested this yet.

[hluedeke]

One thing I also noticed, unfortunately, is that not all patterns translate to the text layer. So this will only work on patterns with actual text.

[courtneypattison]

I am making a little headway on this, but I'm under the weather right now (possibly flu), so it's not going very quickly.

I hope you feel better soon <3

I was able to utilize the customTextRenderer function on the Page props to output big text, but the text is currently missing transformations. I tried applying the transform directly to the custom tag, but that did not work as expected. I can see that the internal implementation for is recursive, but I haven't quite cracked the code on where the customRenderer fits into the logic.

I haven't taken the time to look into react-pdf or even just PDFs for this project. I've just been hacking away at things. At some point, I need to take the time to learn more about both. I'm sorry I can't help more!

=== EDIT: I think the transformation matrix is mostly correct, it's just missing scale. I'm probably headed back to bed now. I need to sleep 🤪

When I was trying to figure out how to convert the transform returned from getPerspectiveTransform() from openCV to matrix3d in CSS, I found this site that has a really nice visualizer for how moving the corners of the grid affects the matrix3d transform.

Another issue we're going to run into is the absolute positioning of text. PDF is very specific about size and location of text, while HTML tends to rely on relative positioning. Since we are trying to increase text size, text that is close to other text will compete for screen space. I know there was mention of "increase size on hover", which I'm hoping we can do with a css hover: attribute. I have not tested this yet.

If need be, maybe we could pop the data out of the textLayer and put them in a relative layout on top of the page canvas?

[hluedeke]

If need be, maybe we could pop the data out of the textLayer and put them in a relative layout on top of the page canvas?

Much easier said than done. The data in the text layer is being recursively drawn with calculated scales and transformations. It could potentially be very difficult to get that to work correctly in our own implementation.

[courtneypattison]

Freaking recursion!

[hluedeke]

Same here - this one is done for now, correct? We can open a new issue for zoom box

[courtneypattison]

Yeah, lets do that!