[mediaqueries] Improve the note highlighting that resolution is not the physical pixel density, and clarifying how non square pixels work

Author: frivoal

mediaqueries/Overview.bs

@@ -1010,10 +1010,24 @@ resolution</h3>
 	spec=cssom-view>page zoom</a> but assuming a <a spec=cssom-view>pinch zoom</a>
 	of 1.0.
 
-	<p class="note"><<resolution>> does not refer to the number of physical dots physical length units, but to the number of physical dots per CSS unit
-
 	When querying media with non-square pixels, 'resolution' queries the density in the vertical dimension.
 
+	<div class="note"><<resolution>> does not refer to the number of device
+	pixels per physical length unit, but the number of device pixels per css
+	pixels. This mapping is done by the user agent, so it is always known to the
+	user agent.
+
+	If the user agent either has no knowledge of the geometry of physical pixels,
+	or knows about the geometry physical pixels and they are (close enough to)
+	square, it would not map a different number of device pixels per css pixels
+	along each axis, and the would therefore be no difference between the vertical
+	and horizontal resolution.
+
+	Otherwise, if the UA choses to map a different number along each axis,
+	this would be to respond to physical pixels not being square either. How
+	the UA comes to this knowledge is out of scope, but having enough information
+	to take this decision, it can invert the mapping should the device be rotated 90 degrees.</div>
+
 	For printers, this corresponds to the screening resolution
 	(the resolution for printing dots of arbitrary color).
 	Printers might have a different resolution for grayscale printing.

mediaqueries/Overview.html

@@ -1426,10 +1426,24 @@ <h3 class="heading settled" data-level=5.1 id=resolution><span class=secno>5.1 <
 	device, i.e. the density of the pixels, taking into account the <a data-link-spec=cssom-view data-link-type=dfn href=http://dev.w3.org/csswg/cssom-view-1/#page-zoom title="page zoom">page zoom</a> but assuming a <a data-link-spec=cssom-view data-link-type=dfn href=http://dev.w3.org/csswg/cssom-view-1/#pinch-zoom title="pinch zoom">pinch zoom</a>
 	of 1.0.</p>
 
-	<p class=note><a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#resolution-value title="<resolution>">&lt;resolution&gt;</a> does not refer to the number of physical dots physical length units, but to the number of physical dots per CSS unit
-
 <p>When querying media with non-square pixels, <a class=property data-link-type=propdesc href=#descdef-media-resolution title=resolution>resolution</a> queries the density in the vertical dimension.</p>
 
+	<div class=note><a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#resolution-value title="<resolution>">&lt;resolution&gt;</a> does not refer to the number of device
+	pixels per physical length unit, but the number of device pixels per css
+	pixels. This mapping is done by the user agent, so it is always known to the
+	user agent.
+
+<p>If the user agent either has no knowledge of the geometry of physical pixels,
+	or knows about the geometry physical pixels and they are (close enough to)
+	square, it would not map a different number of device pixels per css pixels
+	along each axis, and the would therefore be no difference between the vertical
+	and horizontal resolution.</p>
+
+<p>Otherwise, if the UA choses to map a different number along each axis,
+	this would be to respond to physical pixels not being square either. How
+	the UA comes to this knowledge is out of scope, but having enough information
+	to take this decision, it can invert the mapping should the device be rotated 90 degrees.</div><p></p>
+
 <p>For printers, this corresponds to the screening resolution
 	(the resolution for printing dots of arbitrary color).
 	Printers might have a different resolution for grayscale printing.</p>