Hi Nickolas,
You are correct in assuming that the units vw and vh are proportional to the page’s width and height (respectively). The command center on the other hand simply applies the CSS rule text-align: center; to the parent’s element, which (usually) occupies 100% of its own parent’s width.
Another thing that you should keep in mind is that unless you specifically set your font size to be proportional to your page’s dimensions, you will necessarily end up with different renderings depending on the page’s size. Also, most if not all browsers allow their user to set limits on font sizes, or to simply disable CSS styles (though people rarely do that).
One thing that is highly unpredictable is something like this:
newText("This is a very very very very very very very very very very very very very very very very long text.")
.css("font-size", "4em")
.print()
,
newButton("Click me")
.size(100,50)
.print("center at 50vw", "middle at 50vh")
Because your text is very long and its font size is quite big, chances are that small-resolution pages will wrap it and use multiple lines, so that it will end up overflowing the vertical center of the page, where the button is displayed (minus 50/2=25px). Besides, the print command simply appends the element below the other elements already on the page, including the progress bar.
In the case I give as an example, one solution would be this:
newText("This is a very very very very very very very very very very very very very very very very long text.")
.print()
.cssContainer({
"overflow-y": "scroll",
"width": "100vw",
"height": "calc(50vh - 25px - 60px)", // 60px = estimate of progress bar height
"min-height": "unset"
})
.css("font-size", "3vw") // Proportional to page's width
,
newButton("Click me")
.size(100,50)
.print("center at 50vw", "middle at 50vh")
It’s not perfect, but at least it’s responsive. Another option would be to print every element using coordinates, so you know exactly where they will be displayed on the page, and use size accordingly. But at the end of the day, there’s no magic recipe to have a universal rendering, every efficient web design necessitates a good amount of work, sometimes with quite sophisticated CSS rules (e.g. using the @media rule)
Jeremy