Assistance needed in updating some CSS style sheets to support Ultra HD / 4K monitors

CSSMeeting Schedule AssistantUltra HD

Ultra HD and 4K Display Issues

What exactly is the problem?

Technology is always on the move isn’t it? One of the things that is constantly changing is the quality of the screen image (whether on a TV or a Monitor). This is referred to at the resolution.

The resolution has now become so large that it is referred to as Ultra HD, or 4K. You can read more about 4K here and there are other articles about this technology online.

Friends are starting to use computers with such high resolution screens and this has been affecting Meeting Schedule Assistant.

For example, using Mozilla Firefox, this is what the printable version of the schedule looks like (note you might be using a different schedule style):

Viewed with Mozilla Firefox
Sample schedule viewed with Mozilla Firefox

Even with my computer monitor this schedule style is not the most efficient as it is not taking up all the available space on the screen. There was a reason for this. I wanted to force the view to represent the actual piece of paper.

Now, in Firefox you can use CTRL+SHIFT+M  to adjust the resolution and simulate Ultra HD / 4K. This is what happens to the display when I use, for example, a resolution of 4096 X 2160:

Simulating Ultra HD
Simulating a Ultra HD monitor with 4096 X 2160 resolution

As you can see, the amount of space is even worse now and you have to do a lot of scrolling to see the schedule visually.

At the moment the friends have been getting around this issue by temporarily reverting to a lower screen resolution. Then once done, they revert back to their usual resolution.

I had a read of this topic and have come to the conclusion that the style sheet used in this instance is not setup correctly. For example:

CSS Styling
The widths are being set using pixel values.

That is the first problem. Using physical pixel widths is fine until we start to think about higher definition monitors. Now the value must be adjusted accordingly.

The article also encourages setting font sizes using em values as opposed to pt values. At the moment we are using pt values.

How Can You Help?

Meeting Schedule Assistant comes supplied with several predefined schedule style templates. I am looking for someone who meets these criteria:

  • Is using a Ultra HD / 4K monitor.
  • Understands about HTML / CSS authoring.

If you are in a position to help then what I would like you to do is assist me with upgrading the CSS style sheets so that they are compatible with these higher resolutions.

Some examples about how to deal with this are provided for us in the aforementioned article. However, it is important that we keep in mind the context of how these schedules are being displayed. It is in a WebBrowser control (which is a wrapper for Internet Explorer version 7).

In addition, we also have to keep in mind the printing side of things, whether to a literal printer or to a virtual PDF printer.

Please leave a comment below (in this blog) if you can help me! I thank you in advance.