Web page getting destroyed by DPI setting in windows OS

HCL Domino Domino Forum
1

In WinXP if you go to the desktop, right click, go to the settings tab then click the advanced button, there is a General tab which has DPI settings (Font Size for W2K). They both have the same impact.

I designed my web page to fit a 1024X768 screen. All is good … except for 2 users. I found out after a significant amount of troubleshooting that they had the DPI setting set to Large fonts. At first I wasn’t able to reproduce the symptoms, but when I chanmged that setting on my computer, I got the sme thing.

In fact even the LDD site is all screwed up with this setting set to large fonts.

How can I by-pass this setting? Since I have absolute-positioning in some elements of the page, they’re overlapped because some rows of my view are now wrapping (even if I set the NOWRAP and a CSS style to prevent it) and taking up 2 lines.

Any help about this is greatly appreciated.

2

Subject: Web page getting destroyed by DPI setting in windows OS

It depends how you are defining your font-size within your CSS. Generally speaking using pt or em as a measure will result in the fonts being changed by DPI settings. If positioning of the text is critical then you may need to use px as the measure (pixels).

However there is a school of thought that accepts that content should be separate from style (hence the wider use of CSS and even XML). There are a certain set of users for whom having large fonts or screen readers is a necessity (through disability). In addition there are a variety of users using portable devices to access information with very low screen resolution.

Ideally a good website design should cater for all of these users without “breaking” when the resolution or font size is different to a dictated setting.

YMMV - Rufus.

3

Subject: RE: Web page getting destroyed by DPI setting in windows OS

First off, thanks for your responses.

The font size is defined in pixels in my CSS.

Also, my problem stems from the fact that I have a view being displayed in a $$ViewTemplate which contains a table which contains the $$ViewBody field.

There is a border all around the user interface and one for a left-hand side menu (without frames). My problem occurs because the view’s height is variable because when word wrapping occurs because of the large fonts in one or many columns, some lines take up twice as much vertical real-estate.

To make my border, I used a 1 pixel high image that gets repeated, but I can’t tell it to repeat for 100%. I must specify a height in pixels so it repeats.

So I defined a fixed height for the rowspanned cell (it is rowspanned to accomodate the view in the right-hand side of the screen) so that the image would repeat creating a vertical border.

Since the view is so much higher, the rowspanned cell is not high enough and the whole row is stretched. Thsi causes my vertical border to be vertically centered, but not completed at either the top or bottom. It also stretches the menu in the left part of the screen. So when the menu is stretched down, the elements with absolute positioning appear to be over the left menu.

Man I’m sure everyone is confused as hell.

I need a way to prevent the large fonts from making text wrap in the view columns. I also need to be able to make the image which makes up my vertical borders wrap for 100% of the height regardless of what the height is.

Judging from your responses, I’m pretty sure these can’t be accomplished with the design I’ve created.

This is where a more senior web programmer could have helped in the planning stages(I’ve only been coding Javascript, HTML and DHTML for 2 years).

I realise the settings exist for visually impaired users, but those same users are now saying it’s hard to use the aplication because things don’t line up properly and they have to scroll a lot. (They are of course using the lowest resolution which doesn’t help things).

I also know it would have been better to code for a smaller width screen, but it would have made it impossible to display everything the project requires. Regular users using the application would have seen a 60% empty page just to accomodate the negligible percentage of users who need glasses and refuse to wear them.

This is an intranet application by the way.

Thanks for the information and input, it is much appreciated.

Luc

4

Subject: RE: Web page getting destroyed by DPI setting in windows OS

Why not use CSS for the border rather than an sized image? Can you mail me a sample as an HTML file (or give us a safe public link to a sample)? There’s gotta be a way to straighten it out without impairing usability – and it’s probably right out there in the open, right beside the spot where you’re looking. (That’s an almost universal truth, isn’t it.)

5

Subject: RE: Web page getting destroyed by DPI setting in windows OS

YGM Stan. Sorry about the 3MB footprint of the database, I should have compacted it after removing stuff and sending you the database. But since you’re on gmail, you can take it hehehe

Luc

6

Subject: Web page getting destroyed by DPI setting in windows OS

You can absolute-position by em, ex and pt as well – em and ex will be based on the font-size declared in BODY (or in the containing div if you are using absolute inside of a relative or another absolute). You may find that float and clear give you better results.

What it really boils down to, though, is that the user font settings are there for a reason. Your pages may not be pretty with two-inch-tall letters on the screen, but it should still work. People don’t set their machines up for big fonts because they like the like the look, but rather so that they can see (and read) the screen. We’re the ones that need to be flexible.

I find that developing using Firefox and running through CTRL+ and CTRL- can show me which parts of the page aren’t degrading well and need to be looked at.