W3C home > Mailing lists > Public > public-mobile-a11y-tf@w3.org > January 2016

RE: pixels, DPs, points (was Re: MATF Minutes 7 January 2016)

From: Kathy Wahlbin <kathyw@ia11y.com>
Date: Thu, 7 Jan 2016 20:39:15 +0000
To: "Patrick H. Lauke" <redux@splintered.co.uk>, "public-mobile-a11y-tf@w3.org" <public-mobile-a11y-tf@w3.org>
Message-ID: <f7da693c2fe142bea40164d8f594a76f@ia11y.com>
Hi Patrick -

Thank you for the information.  We were trying to figure this out on the call today and were researching what dp, pt vs px meant on mobile.  I really appreciate the information.

Best,

Kathy
CEO & Founder
Interactive Accessibility

T (978) 443-0798  F (978) 560-1251  C (978) 760-0682
E kathyw@ia11y.com  
www.InteractiveAccessibility.com

NOTICE: This communication may contain privileged or other confidential information. If you are not the intended recipient, please reply to the sender indicating that fact and delete the copy you received. Thank you.


-----Original Message-----
From: Patrick H. Lauke [mailto:redux@splintered.co.uk] 
Sent: Thursday, January 7, 2016 3:35 PM
To: public-mobile-a11y-tf@w3.org
Subject: pixels, DPs, points (was Re: MATF Minutes 7 January 2016)

On 07/01/2016 17:19, Kim Patch wrote:

> http://lists.w3.org/Archives/Public/public-mobile-a11y-tf/2015Dec/

>
> Kathy: android says 48 DP and iOS says pixels –

iOS talks about "points" (see bottom of
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LayoutandAppearance.html#//apple_ref/doc/uid/TP40006556-CH54-SW1)
where "points" is Apple's device-independent measurement (not to be confused with CSS pt). Unless I'm wildly mistaken, 1 Apple pt = 1 CSS px (in the case of web content, this assumes that the page is using the ideal viewport of width=device-width)

In the case of android, 1 DP is also = 1 CSS px (when width=device-width)

> Kathy: a pixel is the visual angle, DP is the same at some distance – 
> common confusion point ... someone else has a conversion one DPI 
> equals .75 pixels
>
> <Kathy> ldpi: 1 dp = 0.75 px mdpi: 1 dp = 1 px hdpi: 1 dp = 1.5 px
> xhdpi: 1 dp = 2 px xxhdpi: 1 dp = 3 px xxxhdpi: 1 dp = 4 px

Note that those px values are not correct when a page uses width=device-width (which sets the ideal viewport, and harmonises any difference in pixel density of the hardware - in short, it's the reason why say on iOS you don't have to care whether or not it's a retina or non-retina iPhone, as the width will always be reported as 320 CSS px regardless of physical pixel count/density)

> Jan: there's a way once the device has told you how far it assumes 
> from the person's eyes to convert

This is not something that authors need to concern themselves with (and, particularly for web content, not something they can actually query). 
It's something that should be left up to the underlying device/OS. So, speaking specifically about web content, you set width=device-width in your viewport, the browser switches to using its ideal viewport, and you simply go about using the same CSS px values for your content and controls...it's the browser/OS' job to use a sensible ideal viewport that takes into consideration its screen size, presumed viewing distance, and to map that against its actual physical pixel count to work out the best mapping of CSS px to physical hardware pixels.

In short: define a size in CSS pixels, as that is inherently device and resolution independent when using the ideal viewport via width=device-width.

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke http://flickr.com/photos/redux/ | http://redux.deviantart.com

twitter: @patrick_h_lauke | skype: patrick_h_lauke

Received on Thursday, 7 January 2016 20:39:41 UTC

This archive was generated by hypermail 2.3.1 : Thursday, 7 January 2016 20:39:41 UTC