• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Converting PDF user units in PDF Extract API's output to browser compatible pixel values

Explorer ,
Feb 24, 2023 Feb 24, 2023

Copy link to clipboard

Copied

What formula can be used to convert PDF user units into browser-compatible measurement units (for eg: pixels)?

 

For eg: `TextDecorationThickness`'s value is in PDF user units, how should this be translated into pixels or any other browser compatible value?

TOPICS
General , How to , PDF Extract API , PDF Services API

Views

1.4K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 24, 2023 Feb 24, 2023

Copy link to clipboard

Copied

Generally, the units are 72 points per inch. Also, note that the coordinate system has it's origin (0,0) at the bottom left of the page. The values are already browser compatible in that you can use "xx pt" to represent points in CSS.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 24, 2023 Feb 24, 2023

Copy link to clipboard

Copied

 

That makes republishing simpler! Thanks for the clarity @Joel_Geraci. So, would it be correct to assume that the co-ordinates mentioned in BBox can be represented as "xx pt" without any conversion?

 

While I will refer to the schema here when required, is there anything else one needs to consider when using the co-ordinate values?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 27, 2023 Feb 27, 2023

Copy link to clipboard

Copied

With the BBox, you will need take into consideration that the coordinate system origin points for PDF and HTML canvas are flipped. As I mentioned, the origin for a PDF page is at the bottom left, HTML canvas is at the top left. What you can do is use the BBox to calculate the height and width and simply use the "pt" units for setting those dimensions.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 27, 2023 Feb 27, 2023

Copy link to clipboard

Copied

Yes, you had mentioned earlier. Thanks for reiterating the same.

Not a frontend expert here, but in my experience `pt` are usually used for print purposes and `px` for screens. While browsers have been known to make the conversion between `pt` to `px` automatically, not sure if email clients will make the same conversion. Any recommendations on how to use these values for browsers and email clients?

Would using the formula `0.75pt = 1px`, work?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 27, 2023 Feb 27, 2023

Copy link to clipboard

Copied

Would using the formula `0.75pt = 1px`, work?

 

Not really. A point is a fixed size. Pixel sizes are relative to the pixel density of the monitor.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 27, 2023 Feb 27, 2023

Copy link to clipboard

Copied

Hmm, yes. Conversion between absolute units and relative units is not usually advisable and device dependent.

Can you confirm if using `pt` for styling in email templates had been tested to see if it works well?

It is understandable that this is tricky, because PDFs are for read-only or, printing purposes which explains the choice of using absolute units. Wanting to understand from Adobe's experience to know what works best for use for on-screen purposes. especially when the W3 specs advice using relative units.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 28, 2023 Feb 28, 2023

Copy link to clipboard

Copied

HTML email isn't something I have any expertise in. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 28, 2023 Feb 28, 2023

Copy link to clipboard

Copied

Assuming HTML on the web, as shown during demos by Adobe, should work well with `pt`, shouldn't it?

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 01, 2023 Mar 01, 2023

Copy link to clipboard

Copied

*for HTML

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 08, 2023 Mar 08, 2023

Copy link to clipboard

Copied

@Joel_Geraci Would appreciate it if clarity can be added for the above.

 

`Assuming for HTML on the web, as shown during demos by Adobe, should work well with `pt`, shouldn't it?`

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 08, 2023 Mar 08, 2023

Copy link to clipboard

Copied

There's no right answer, because this is not a standardised or recognised process. Adobe's demos just demo technology, they aren't necessarily good models for production. You need to do your own tests in as many use cases as possible. Be sure to test in mobile browsers, and on high pixel density monitors.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 09, 2023 Mar 09, 2023

Copy link to clipboard

Copied

Yes, this is not a standardized or recognised process. However, was looking to see if Adobe or @Joel_Geraci had some insights to share here.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 09, 2023 Mar 09, 2023

Copy link to clipboard

Copied

All I can suggest it to try some stuff and see if it works for your use case. When I convert PDF to HTML using the output from Extract, I'm generally not trying to replicate the PDF layout, I'm republishing it so I don't expect the measurements to be even close. If I want the exact layout in an HTML page without it being a PDF viewer experience, I use our Embed API in IN_LINE mode so the PDF just acts like an image.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 09, 2023 Mar 09, 2023

Copy link to clipboard

Copied

LATEST

Using Embed API is an interesting approach. Thanks for sharing. 

 

I'm republishing it so I don't expect the measurements to be even close.

Until now was assuming republishing to be as reproducing the PDF in a different file format. Thanks for adding g

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources