Mobile app version of vmapp.org
Login or Join
Barnes591

: DPI scaling - fonts - Browser Compatibility Problems Many times windows 7 users, go at Control Panel - Display Options and choose a custom DPI setting (ie 110%) to increase font size in cases

@Barnes591

Posted in: #Accessibility #CrossBrowser #Fonts

Many times windows 7 users, go at Control Panel - Display Options and choose a custom DPI setting (ie 110%) to increase font size in cases that they have big monitors and cannot see clearly.

In this case, some of the web designs break in the latest version of Opera 11 and Internet Explorer 9. (One web design breaks in one browser, and the other design in the other browser!).
This does not happen in all computers with dpi scaling.
In some computer it breaks on IE9, on some other it doesn't.

What I mean is that fonts become huge, and textes go out of their boxes, breaking the correct flow of elements.

I just use the standard fonts.

I prefer to use HTML5/CSS3. I usually use reset.css or normalize.css lately from HTML5 boilerplate.

How I should develop, or what css hacks I should include to avoid dpi scaling break the designs?

I understand this is not a normal cross-browser compatibility question, but a very strange situation that happens only in specific cases, with specific browser-computer combination, but all those computers have dpi scaling. The matter is that with the same browser and same dpi scaling, the same problem may appear or not appear.

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Barnes591

2 Comments

Sorted by latest first Latest Oldest Best

 

@Kaufman445

The problem was about having fonts defined in em, whereas container width was in pixels.
Settings fonts also in pixels, resolves the problem.

Each browser was behaving differently in this case.

10% popularity Vote Up Vote Down


 

@Shanna517

This isn't really any different from the problem of people using way too low a resolution to view your site or using their browser zoom to increase the text size.

There's not much you can do about it except to test for it manually and see what is actually "breaking" the layout. But every layout is going to have practical limits on supported platforms and configurations.

You can explicitly specify the overflow mode for every single text containing element (and all of its parents), but you'll still end up with problems with different browsers rendering the same fonts slightly differently or variations in line-wrap or text-alignment/justification algorithms.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme