What is the best unit of measurement to use when creating a visual editor in HTML?

Question

css

Good afternoon. There is a task to create a visual editor, at the end of which you need to generate a JPG image or a PDF file. When creating a "document", you need to make sure that the dimensions can be set in cm, mm and pixels. Well, like in Adobe Photoshop. You also need to take into account the DPI value somehow later.

I plan to make an editor on jQueryUI using drag and drop elements, jQuery position() is used to determine the position of an element ... it gives the position in pixels. As I worked, I noticed several problems:

1) One problem is that if you set the document dimensions in centimeters, for example, the size of an A4 sheet, 21x29cm, then on different monitors, the number of pixels included in these 21cm always varies. I checked it on three different monitors with diagonals of 19, 24 and 27. At least there is a difference.
2) By itself, this position() method has some problems with calculating the position and size of the object. For example, if you set a DIV with a width of 790 pixels, and inside you drag an object with a length of 60 px, and drag the object to the edge of the DIV, then this method will return the width of the object 60px, and the starting position in width is only 726 for example. That's 726 + 60 = 786, which is a few pixels off the DIV's full size of 790px.
Considering that the worksheet should then be able to scale and this problem with pixels on different monitors, it turns out that some relative units of measurement will do for me.

Here is an example of this editor .

In connection with the above, a question arose. What units of measurement or what methods of work would you advise to use, so that regardless of the scale of the worksheet and monitor settings, the document could always be edited in a way that is uniformly understood by any device. If it matters, then the content of the document (worksheet) is always HTML code and CSS styles. Because the editor will be used by people who don’t understand a damn thing about HTML or CSS, you need to save them from these problems in advance.

I only have one solution in my head.

Большую сторону документа независимо от ориентации, задаем в жестких пикселях, например 1000px, а меньшую сторону, соответственно пропорциям документа. И после этого все перемешения обьектов делать внутри этих тысячу пикселей, каким бы по размеру документ не был, но когда настанет время генерировать картинку или PDF, зная сколько сантиметров входит в эту тысячу пикселей и какой DPI мы задавали документу в начале, можно все переумножать, рассчитать и в итоге сгенерировать нужный для нас контент с необходимымы параметрами

But I would like to get advice from people more knowledgeable in the subject

Answer 1

Much depends on how the "stretching" should work with fluid layout: size fonts or not?
In general: calc(), vmin, vmax, vw, vh (and percentages for nested blocks) should be enough to "hold" all sizes without changing the appearance on different monitors and resolutions.

Answer 2

I only have one solution in my head.

Good. This is how scaling works. But it's better to do it a little differently, without setting the exact size, but let everything stretch to the full width with a proportional height. Then, when it will be necessary to render everything, you scale it to the desired size. Thus, it will be possible to make a comfortable width of the workspace and scale calmly, and do not forget to scale the elements themselves accordingly. As a result, it will be possible to play the same way both from a computer and from a tablet and even a phone.