Firefox 22 screen dpi

[Martin Wynne]

Firefox 22 has wrecked every web site for users on 120dpi screens or higher. 1px is no longer 1 pixel on the screen and all images are fuzzy. This is the worst Firefox update in living memory:

https://support.mozilla.org/en-US/questions/962945

Pressing Ctrl-Minus twice restores the previous web page, but are we expected to tell all our users to do that?

Martin.

[Martin Wynne]

What is the suggested fix for this, if any? Firefox 23 appears not to be reverting to common sense.

Obviously sizes in pt units should respect the screen dots per inch setting because 1pt is 1/72nd of an inch. But it is ludicrous for 1px not to be ALWAYS 1 pixel regardless of the screen dpi. Otherwise what does the px unit mean?

This change has been a nightmare for Firefox users on 120dpi (Windows "Medium") and higher. Are other browsers going to follow this?

When I write width:400px; I expect it to mean that the element will be displayed 400 pixels wide on all screens everywhere when set to 100%. This is especially important for CAD screenshots and line graphics images, and SWF videos of the same.

Is there a fix for this? There are ways for individual users to go into the Firefox config and change settings, or to zoom out twice (80% of 120 = 96) but we can't seriously tell users on 120dpi to do such things simply to see Help files as intended with crisp images.

The only other alternative is to tell everyone to revert to 96dpi, which makes everything else in Windows far too small for me and everyone else who chose 120dpi to avoid this.

Or not to use Firefox, if we can be sure other browsers won't be following this.

regards,

Martin.

[Tim Green]

Hi Martin,

If the Firefox programmers want to break their browser experience then that is 100% their problem. I don't see the slightest reason for anyone to cater to it or work around it. On the contrary: Web programmers should not work around this idiocy. The user experience should be as unpleasant as possible, and should stay that way until the Firefox programmers fix it.

Browser programmers have had a free lunch for much too long. They have always been able to depend on web designers creating workaround for the browser programmers' sloppiness and laziness. That is why browsers are still such a Babylonian mess. Just let it be broken.

[Martin Wynne]

Just let it be broken.

Thanks Tim.

The problem there is that users always blame the web site rather than the browser.

Fortunately this problem affects only users savvy enough to have changed to 120dpi, and presumably therefore savvy enough to understand what is happening. Although I believe 120dpi is now the default on some wide-screen systems.

Martin.

[Simon Dismore]

My first thought when I read this thread was a bit uncharitable, I'm afraid. If you're developing for the web, you aren't supposed to think in device pixels. The browser has been expected to rescale pixel values since at least CSS1 if not earlier. CSS pixels == device pixels is undocumented behaviour. You rely on it at your peril.

Then I had second thoughts. I can see how it would be better for Martin (and the rest of us) to have single-pixel lines on screenshots display properly. Windows 8 defaults to 125% so this is going to happen more often. IE seems to have the same issue, and other browsers might well go this way in future, especially mobile.

A straightforward solution is to double the size of the screenshots (Photoshop 200% nearest neighbour) and then display them at 50%. This makes them a lot sharper and, as they're presumably all in PNG format, the bigger images will still be relatively small files.

But that technique isn't perfect, so I had a nose around for code to do the resizing in JavaScript. I can't upload an HTML file, so here it is inline. Just copy it into an empty HTML doc and save. Note: the code was inspired by an article on the Menacing Cloud website. If you use this example, it's entirely at your own risk. It does not work in IE. It does not test for the high pixel densities on some tablets and smartphones. But it's a start.

Code: Select all

<!DOCTYPE html>
<html>

<head>
	<title>Force 100%</title>
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
	<script type='text/javascript'>
		// inspired by http://menacingcloud.com/source/js/highPixelDensity.js

		// when the document is ready, process all the images
		// --------------------------------------------------
		$(document).ready(function() {
			processTaggedImages();
		});


		// query the device pixel ratio
		//-----------------------------
		function getDevicePixelRatio() {
			if(window.devicePixelRatio === undefined) {
				// No pixel ratio available. Assume 1:1
				return 1;
			}
			return window.devicePixelRatio;
		}

		// process those images that have the force100percent class
		//---------------------------------------------------------
		function processTaggedImages() {
			var DevicePixelRatio;
			DevicePixelRatio = getDevicePixelRatio();
			if(DevicePixelRatio > 1) {
				var images = $('img.force100percent');
				// scale each image's width back to the size in device pixels
				for(var i = 0; i < images.length; i++) {
					images.eq(i).width(images.eq(i).width() / DevicePixelRatio);
				}
			}
		}
	</script>
</head>

<body>
	<div>
		<h1>Force 100%</h1>
		<p>In IE 10.0.7 and Firefox 22 the CSS pixel size is scaled to follow the Windows DPI setting. 
		If the scale is not 1:1 any single-pixel lines in images become blurred.</p>
		<p>The example uses JavaScript and jQuery to resize an image so that it is displayed at 100% in device pixels. 
		It was inspired by an article on the Menacing Cloud website.</p>
		<p>If you use this example, it's entirely at your own risk. 
		It does not work in IE. It does not test for the high pixel densities on some tablets and smartphones.</p>
		<h3>Sample</h3>
		<p>The first image is not resized. The second image is resized. Tested in Firefox nightly 24.0a1 and 25.0a1. 
		Refresh (F5) after zooming.</p>
		<img src="http://templot.com/companion/startup_pad.png" />
		<img class="force100percent" src="http://templot.com/companion/startup_pad.png" />
	</div>
	<div>
		<h3>Bibliography</h3>
		<ul>
			<li><a href="https://support.mozilla.org/en-US/questions/961160">Graphics are large and blurry</a> (Mozilla support)</li>
			<li><a href="http://menacingcloud.com/?c=highPixelDensityDisplays">Optimising for High Pixel Density Displays</a> (Menacing Cloud )</li>
			<li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255104(v=vs.85).aspx">devicePixelRatio property</a> (IE Dev Center)</li>
			<li><a href="http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html">More about devicePixelRatio</a> (QuirksMode)</li>
			<li><a href="http://www.quirksmode.org/m/tests/widthtest.html">Screen size test page</a> (QuirksMode)</li>
		</ul>
	</div>
</body>

</html>

[Simon Dismore]

Here's a version with support for IE, and slightly improved logic:

Code: Select all

<!DOCTYPE html>
<html>

<head>
   <title>Force 100% in Firefox and IE</title>
   <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
   <script type='text/javascript'>
      // inspired by http://menacingcloud.com/source/js/highPixelDensity.js

      // when the document is ready, process all the images
      // --------------------------------------------------
      $(document).ready(function() {
         processTaggedImages();
      });


      // query the device pixel ratio
      //-----------------------------
      function getDevicePixelRatio() {
         // default to 1:1 if the actual value can't be determined
         var Ratio = 1;
         if (window.devicePixelRatio) {
            Ratio = window.devicePixelRatio;
         }
         else
         {
            // try for IE's screen ratio
            if(screen.deviceXDPI) {
                Ratio = screen.deviceXDPI / screen.logicalXDPI;
            }
         }
	      return Ratio;
      }

      // process those images that have the force100percent class
      //---------------------------------------------------------
      function processTaggedImages() {
         var DevicePixelRatio;
         var images, image;
         var i;
         DevicePixelRatio = getDevicePixelRatio();
         if(DevicePixelRatio == 1) {
	         $('span.errormessage').text("DevicePixelRatio == 1, so there's no need to resize");
         }
	     else {
	         images = $('img.force100percent');
	         // scale each image's width back to the size in device pixels
	         for(i = 0; i < images.length; i++) {
		         image = images.eq(i);
		         image.width(image.width() / DevicePixelRatio);
	         }
	         $('span.errormessage').text(images.length + " image(s) were resized");
         }
      }
   </script>
</head>

<body>
   <div>
      <h1>Force 100% in Firefox and IE</h1>
      <p>In recent versions of IE and Firefox the CSS pixel size is scaled to follow the Windows DPI setting. 
      If the scale is not 1:1 any single-pixel lines in images become blurred.</p>
      <p>The example uses JavaScript and jQuery to resize an image so that it is displayed at 100% in device pixels. 
      It was inspired by an article on the Menacing Cloud website.</p>
      <p>If you use this example, it's entirely at your own risk. 
      The code does not allow for the high pixel densities on some tablets and smartphones. 
      I've tried it in Firefox nightly 24.0a1 and 25.0a1, Firefox 22.0, IE 10.0.9200.16635 and Chrome 28.0.1500.95,
	  all running on Windows 8, with the page served from IIS8 on Windows Server 2012.</p>
      <h3>Sample</h3>
      <p>The first image should not be affected. The second image should be resized in Firefox and IE.
      To re-run the script after zooming, re-load the page.
	  In IE you'll need to hold the Shift key while clicking the refresh button in the address bar.</p>
      <p>Result:&nbsp;<span class="errormessage"><em>the script has failed to run!</em></span></p>
      <img src="http://templot.com/companion/startup_pad.png" />
      <img class="force100percent" src="http://templot.com/companion/startup_pad.png" />
   </div>
   <div>
      <h3>Bibliography</h3>
      <ul>
         <li><a href="https://support.mozilla.org/en-US/questions/961160">Graphics are large and blurry</a> (Mozilla support)</li>
         <li><a href="http://menacingcloud.com/?c=highPixelDensityDisplays">Optimising for High Pixel Density Displays</a> (Menacing Cloud )</li>
         <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255104(v=vs.85).aspx">devicePixelRatio property</a> (IE Dev Center)</li>
         <li><a href="http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html">More about devicePixelRatio</a> (QuirksMode)</li>
         <li><a href="http://www.quirksmode.org/m/tests/widthtest.html">Screen size test page</a> (QuirksMode)</li>
      </ul>
   </div>
</body>

</html>

[Tim Green]

Hi Simon,

Thanks for posting this. Could you check the email address of your forum account please: I'm getting bounceback messages saying that it doesn't exist any more.

[Simon Dismore]

it doesn't exist any more.

Hi Tim, sorry about that. We replaced our local mail server with Office365 last year. That email address is a single-purpose account and I hadn't appreciated that it was still current. It should be enabled again now. - Simon

[Martin Wynne]

Hi Simon,

Many thanks for that and the PM.

I couldn't get the jquery stuff to work -- it resized the first image and set the rest of the images to width zero.

So I have rewritten it in conventional form and it works GREAT!

Code: Select all

function get_device_pixel_ratio()
{
  var ratio=1.0;

  if (window.devicePixelRatio)
  {
    ratio=window.devicePixelRatio;
  }
  else
  {
     // try for IE screen ratio
    if (screen.deviceXDPI)
    {
      ratio=screen.deviceXDPI/screen.logicalXDPI;
    }
  }
  return ratio;
}
          
function fix_all_images_dpi()
{
  var device_pixel_ratio;
  var images=document.getElementsByTagName('img');
  var image;
  var i;
			 
  device_pixel_ratio=get_device_pixel_ratio();
            
  if (device_pixel_ratio!=1.0)
  {
    for (i=0; i<images.length; i++)
    {
      image=images[i];
      image.width=image.width/device_pixel_ratio;
    }
  }
}
   

Many thanks again, also for the reference links.

Martin.

[Simon Dismore]

resized the first image and set the rest of the images to width zero

Sorry, that version was executing the resize function prematurely: if an image doesn't have an explicit width, it defaults to 0 until the image is loaded. As a result, the code was setting some images widths to half of zero.

Here is a corrected version v0.03. I've also replaced the templot graphics with smaller images from the online Help & Manual documentation, so it is more generally applicable. This is the last version I expect to post here now.

All the best
- Simon

Code: Select all

<!DOCTYPE html>
<html>

<head>
	<title>Force 100%</title>
	<!-- IMPORTANT: jQuery is *already* included in Help & Manual's WebHelp output. The next line should only be used for stand-alone tests -->
	<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
	<script type='text/javascript'>
		// inspired by http://menacingcloud.com/source/js/highPixelDensity.js

		// query the device pixel ratio
		//-----------------------------
		function getDevicePixelRatio() {
			// default to 1:1 if the actual value can't be determined
			var ratio = 1;
			if (window.devicePixelRatio) {
				ratio = window.devicePixelRatio;
			}
			else
			{
				// try for IE's screen ratio
				if(screen.deviceXDPI) {
					ratio = screen.deviceXDPI / screen.logicalXDPI;
				}
			}
			return ratio;
		}

		// process those images that have the force100percent class
		//---------------------------------------------------------
		function processTaggedImages() {
			var devicePixelRatio;
			var images, image;
			var oldwidth, newwidth;
			var i;
			devicePixelRatio = getDevicePixelRatio();
			if(devicePixelRatio == 1) {
				$('span.errormessage').text("DevicePixelRatio == 1, so there's no need to resize");
			}
			else {
				images = $('img.force100percent');
				// scale each image's width back to the size in device pixels
				for(i = 0; i < images.length; i++) {
					image = images.get(i);
					oldwidth = image.width;
					newwidth = oldwidth / devicePixelRatio;
					image.width= newwidth;
					console.log("Resized image " + i + " from " + oldwidth + " to " + newwidth);
				}
				$('span.errormessage').text(images.length + " image(s) were resized");
			}
		}
	</script>
</head>

<body onload="processTaggedImages();">
<div>
	<h1>Force 100% in Firefox and IE, v0.03</h1>
	<p>In recent versions of IE and Firefox the CSS pixel size is scaled to follow the Windows DPI setting.
		If the scale is not 1:1 any single-pixel lines in images become blurred.</p>
	<p>The example uses JavaScript and jQuery to resize an image so that it is displayed at 100% in device pixels.
		It was inspired by an article on the Menacing Cloud website.</p>
	<p>If you use this example, it's entirely at your own risk.
		The code does not allow for the high pixel densities on some tablets and smartphones.
		I've tried it in Firefox nightly 24.0a1 and 25.0a1, Firefox 22.0, IE 10.0.9200.16635 and Chrome 28.0.1500.95,
		all running on Windows 8, with the page served from IIS8 on Windows Server 2012.</p>
	<h3>Sample</h3>
	<p>In each pair of images, the first should not be resized, and the second should be resized in Firefox and IE.
		To re-run the script after zooming, refresh the page.</p>
	<p>Result:&nbsp;<span class="errormessage"><em>the script has failed to run!</em></span></p>
	<img src="//www.helpandmanual.com/help/rb_insertgraphic.png" />
	<img src="//www.helpandmanual.com/help/rb_insertgraphic.png" class="force100percent" /><br>
	<img src="//www.helpandmanual.com/help/wn_exp_pinned.png" />
	<img src="//www.helpandmanual.com/help/wn_exp_pinned.png" class="force100percent" /><br>
	<img src="//www.helpandmanual.com/help/wn_dpi.png" />
	<img src="//www.helpandmanual.com/help/wn_dpi.png" class="force100percent" /><br>
	<img src="//www.helpandmanual.com/help/toc_toolbar.png" />
	<img src="//www.helpandmanual.com/help/toc_toolbar.png" class="force100percent" /><br>
	<img src="//www.helpandmanual.com/help/dlg_publish_button.png" />
	<img src="//www.helpandmanual.com/help/dlg_publish_button.png" class="force100percent" /><br>

</div>
<div>
	<h3>Bibliography</h3>
	<ul>
		<li><a href="https://support.mozilla.org/en-US/questions/961160">Graphics are large and blurry</a> (Mozilla support)</li>
		<li><a href="http://menacingcloud.com/?c=highPixelDensityDisplays">Optimising for High Pixel Density Displays</a> (Menacing Cloud )</li>
		<li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255104(v=vs.85).aspx">devicePixelRatio property</a> (IE Dev Center)</li>
		<li><a href="http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html">More about devicePixelRatio</a> (QuirksMode)</li>
		<li><a href="http://www.quirksmode.org/m/tests/widthtest.html">Screen size test page</a> (QuirksMode)</li>
	</ul>
</div>
</body>

</html>

[Martin Wynne]

Many thanks for the update Simon.

I've been experimenting to find some code which will revert an entire page including images to look the same in Firefox 22 as it did in Firefox 21 (on 120dpi screens).

There must be an easier way, but this sort of works (running fix_page_dpi() in the body onload event):

Code: Select all

function get_device_pixel_ratio()
{
  var ratio=1.0;

  if (window.devicePixelRatio)
  {
    ratio=window.devicePixelRatio;
  }
  else
  {
     // try for IE's screen ratio
    if(screen.deviceXDPI)
    {
      ratio=screen.deviceXDPI/screen.logicalXDPI;
    }
  }

  return ratio;
}
          
function fix_page_dpi()
{
  var device_pixel_ratio=get_device_pixel_ratio();
  var scale_factor;

  var doc_height;
  var doc_width;
  
  var scaled_height;
  var scaled_width;

  var h_offset;
  var w_offset;
          
  if (device_pixel_ratio!=1.0)
  {

    document.body.style.width=parseFloat(device_pixel_ratio*100)+"%";

    doc_height=document.body.scrollHeight;
    doc_width=document.body.scrollWidth;

    scale_factor=1/device_pixel_ratio;

    scaled_height=doc_height*scale_factor;
    scaled_width=doc_width*scale_factor; 

    h_offset=device_pixel_ratio*(scaled_height-doc_height)/2;
    w_offset=device_pixel_ratio*(scaled_width-doc_width)/2;

    document.body.style.transform="scale("+parseFloat(scale_factor)+") translateX("+parseFloat(w_offset)+"px) translateY("+parseFloat(h_offset)+"px)";
  }
}

I say "sort of works" because it makes character spacing look a bit uneven, and it kills any embedded Flash video objects. So it's not perfect. Other ideas welcome -- I tried to do something with @viewport zoom in the CSS, but got nowhere.

At present this problem seems to be only in Firefox, but I've read that some versions of IE10 are now doing the same with 120dpi screens (my IE10 isn't). Also 120dpi is rapidly becoming the default on wide-screen devices and also in the Metro version of Windows8.

So fuzzy images look here to stay for everyone making Help screenshots.

Thanks again,

Martin.

[Tim Green]

Important warning:

Make sure that the online reference to jQuery on the Goggle server is unique:

Code: Select all

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>

I.e., you need to be sure that there is not already another jQuery source reference in the Help & Manual template. These are generally inserted automatically when you publish your project (you don't normally see them in the template when you edit it, unless a manual reference has been added in a skin), so you need to check the instructions in this topic in the help to make sure you are not doubling up. Adding the online reference to a Help & Manual template that already contains a reference to the version of jQuery that HM exports automatically will result in two versions of jQuery being accessible in the cache, and that could cause conflicts.

[Martin Wynne]

Thanks Tim. That's one reason why I don't use jQuery in my own experiments. As far as I can see ordinary javascript works just as well.

regards,

Martin.

[Simon Dismore]

Tim, thanks. I've inserted a warning into the code.

On the general point, I think it's helpful to force screenshots back to 100%, but there could be other elements that should zoom with the user's Windows setting. That was why I thought the filtering using the jQuery selector might help. It might be going a bit far to undo all zooming: after all, the user may have their own preference. If you are going to change the font size too, it might be better to have one of those A A A A A gadgets and persist the setting independently of the browser's own zoom. It could be a premium pack feature....

Cheers

[Martin Wynne]

On the general point, I think it's helpful to force screenshots back to 100%, but there could be other elements that should zoom with the user's Windows setting.

Hi Simon,

If they are defined in pt sizes they already zoom with the users dpi setting, and always did. That's what I can't understand about this new change to the meaning of px. If 1px isn't 1 pixel on the screen, what size is it?

I'm not asking for anything to be changed -- simply that web pages should look the same as they did before.

regards,

Martin.