Making visuals (more) consistent across different display resolutions

[Ncomeau]

Hi again Jeremy,

Sorry to bombard you with posts, but I figured this question was sufficiently different from my recent one and that it should be a separate topic.

Another issue some of my fellow lab members have been experiencing is buttons/text on any given trial either overlapping, or appearing in significantly different places than they would when I open the experiment.
Right now, I am using functions like .center() and .css(“position”, …) or just .print(“Xvw”,”Yvh”) for positioning that I thought should be based on the webpage height and width but maybe that’s not the case. In looking through other forum posts,
it doesn’t seem like there’s a great way to keep the display consistent across different screen resolutions but I was wondering if there was anything I could do to at least not have things be so wildly different from person to person.

One of my ideas is to do a bit of an overhaul on what I currently have by explicitly making the position parameters absolute, or relative to a canvas that I set up to contains them, rather than static (which I believe is the default unless PCIbex wrappers do that differently).
My background with CSS is pretty limited though, so I wanted to check with you to see if you had a recommendation first before changing everything around.

Thanks again,

Nickolas

[Jeremy]

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

[Author]

Posts