[dip] Proposal for display size and density independent pixel.

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

[dip] Proposal for display size and density independent pixel.

Prashant Kisanrao Nevase
Samsung Enterprise Portal mySingle

Dear CSS Working Group,

 

There are many displays for different devices available for rendering the contents. e.g. big screens, projected screens, TVs, computer monitors, tablets, IVI displays, phablets, phones, wearables, etc. These displays have different sizes and different resolutions and number of pixels or dots per inch (display pixel density or simply called display density) varies for different displays. Due to this writing the contents which will work across different displays seamlessly or with less modification has become difficult and content developer has to consider many different displays e.g. different contents for mobile devices, desktop monitors, etc.

 

I want to propose "pixel", making it independent of "display size" and "display densities". Many mobile platforms (Android, iOS, WinMo, Tizen, etc.) support display density independent pixel, but display size (pixels measured diagonally) is not taken care any of the platform. Hence contents rendered gets occupied differently on different displays. Also desktop platforms do not support this. So web page opened on 12 inches display looks different than it opened on 21 inches display.

 

Making this css standard will help web pages render with similar layout on any display.

 

It proposes having new meta name "pixel" as given below -

 

<meta name="pixel" content="baseline-density=640;" ></div>

 

Then pixel scale factor for computing DIP (display independent pixel) is as given below -

 

device_baseline_density = baseline_density / display_size;
pixel_scale_factor = dots_per_inch / device_baseline_density;

 

where

baseline_density = Value of baseline-density property [input from web page]
display_size = Display size in inches (measured diagonally) [taken from platform]
device_baseline_density = Baseline density for the target display on which web page is to be rendered. [output]
dots_per_inch = Number of pixels per inch on the target display. [taken from platform]
pixel_scale_factor = Scale factor for pixel for target display [output]

 

By multiplying the css pixel by pixel scale factor, we get similar layouts for the contents.

 

For more details, kindly have a look at
https://github.com/prashant-samsung/dip/

 

~ Prashant Nevase

 

Reply | Threaded
Open this post in threaded view
|

Re: [dip] Proposal for display size and density independent pixel.

Florian Rivoal-4
Hi,

I believe that the use cases your are thinking about are already addressed in specifications by the @viewport rule (maybe in combination with media queries, depending on the situation).

Unfortunately, this is not yet supported in most browsers. At the moment, only IE and Edge support it, and they support it on desktop and mobile. Opera Mobile <= 12 also does but that's not a very relevant browser these days.


Could you please refer to that specification, and see it it would solve your problems?

 - Florian

On May 25, 2016, at 12:19, Prashant Kisanrao Nevase <[hidden email]> wrote:

Dear CSS Working Group,

 

There are many displays for different devices available for rendering the contents. e.g. big screens, projected screens, TVs, computer monitors, tablets, IVI displays, phablets, phones, wearables, etc. These displays have different sizes and different resolutions and number of pixels or dots per inch (display pixel density or simply called display density) varies for different displays. Due to this writing the contents which will work across different displays seamlessly or with less modification has become difficult and content developer has to consider many different displays e.g. different contents for mobile devices, desktop monitors, etc.

 

I want to propose "pixel", making it independent of "display size" and "display densities". Many mobile platforms (Android, iOS, WinMo, Tizen, etc.) support display density independent pixel, but display size (pixels measured diagonally) is not taken care any of the platform. Hence contents rendered gets occupied differently on different displays. Also desktop platforms do not support this. So web page opened on 12 inches display looks different than it opened on 21 inches display.

 

Making this css standard will help web pages render with similar layout on any display.

 

It proposes having new meta name "pixel" as given below -

 

<meta name="pixel" content="baseline-density=640;" ></div>

 

Then pixel scale factor for computing DIP (display independent pixel) is as given below -

 

device_baseline_density = baseline_density / display_size;
pixel_scale_factor = dots_per_inch / device_baseline_density;

 

where

baseline_density = Value of baseline-density property [input from web page]
display_size = Display size in inches (measured diagonally) [taken from platform]
device_baseline_density = Baseline density for the target display on which web page is to be rendered. [output]
dots_per_inch = Number of pixels per inch on the target display. [taken from platform]
pixel_scale_factor = Scale factor for pixel for target display [output]

 

By multiplying the css pixel by pixel scale factor, we get similar layouts for the contents.

 

For more details, kindly have a look at 
https://github.com/prashant-samsung/dip/

 

~ Prashant Nevase

 

<201605250850950_4XEV4D4T.gif>


Reply | Threaded
Open this post in threaded view
|

Re: Re: [dip] Proposal for display size and density independent pixel.

Prashant Kisanrao Nevase

Hi,

 

There are two things -

 

1. https://drafts.csswg.org/css-device-adapt/  does not specify how the pixel computation should be done. As I referred Android chrome browser source code, it has different device scale factor than iphone would consider. So this loses the similarity expected. So even though web page specifies viewport meta, there might be different web pages needed to support different platforms having same display size.

 

2. Display size is not taken. Viewport meta property implementations consider only display densities. Display size also plays important role along with display density. As per current browser implementations, following case is not solved by viewport meta property.

 

This proposal is regarding to have similar lengths as proportional to display screen. e.g. If 100 pixels measures 1 inch on one device having  display size 5 inches, then on same size display of any resolution, it should measure 1 inch. If display size is 10 inches, then 100 pixels should measure 2 inches (proportionally).

 

css-device-adapt is the exact place where I want to propose new property.

 

~ Prashant Nevase

 

------- Original Message -------

Sender : Florian Rivoal<[hidden email]>

Date : May 25, 2016 13:11 (GMT+05:30)

Title : Re: [dip] Proposal for display size and density independent pixel.

 

Hi,

I believe that the use cases your are thinking about are already addressed in specifications by the @viewport rule (maybe in combination with media queries, depending on the situation).

Unfortunately, this is not yet supported in most browsers. At the moment, only IE and Edge support it, and they support it on desktop and mobile. Opera Mobile <= 12 also does but that's not a very relevant browser these days.


Could you please refer to that specification, and see it it would solve your problems?

 - Florian

On May 25, 2016, at 12:19, Prashant Kisanrao Nevase <[hidden email]> wrote:

Dear CSS Working Group,


 

There are many displays for different devices available for rendering the contents. e.g. big screens, projected screens, TVs, computer monitors, tablets, IVI displays, phablets, phones, wearables, etc. These displays have different sizes and different resolutions and number of pixels or dots per inch (display pixel density or simply called display density) varies for different displays. Due to this writing the contents which will work across different displays seamlessly or with less modification has become difficult and content developer has to consider many different displays e.g. different contents for mobile devices, desktop monitors, etc.


 

I want to propose "pixel", making it independent of "display size" and "display densities". Many mobile platforms (Android, iOS, WinMo, Tizen, etc.) support display density independent pixel, but display size (pixels measured diagonally) is not taken care any of the platform. Hence contents rendered gets occupied differently on different displays. Also desktop platforms do not support this. So web page opened on 12 inches display looks different than it opened on 21 inches display.


 

Making this css standard will help web pages render with similar layout on any display.


 

It proposes having new meta name "pixel" as given below -


 

<meta name="pixel" content="baseline-density=640;" ></div>


 

Then pixel scale factor for computing DIP (display independent pixel) is as given below -


 

device_baseline_density = baseline_density / display_size;
pixel_scale_factor = dots_per_inch / device_baseline_density;


 

where

baseline_density = Value of baseline-density property [input from web page]
display_size = Display size in inches (measured diagonally) [taken from platform]
device_baseline_density = Baseline density for the target display on which web page is to be rendered. [output]
dots_per_inch = Number of pixels per inch on the target display. [taken from platform]
pixel_scale_factor = Scale factor for pixel for target display [output]


 

By multiplying the css pixel by pixel scale factor, we get similar layouts for the contents.


 

For more details, kindly have a look at 
https://github.com/prashant-samsung/dip/


 

~ Prashant Nevase


 

<201605250850950_4XEV4D4T.gif>


 

 

Reply | Threaded
Open this post in threaded view
|

Re: [dip] Proposal for display size and density independent pixel.

Andrew Fedoniouk
In reply to this post by Prashant Kisanrao Nevase
Why not just 1dip; ?

In "ideal, well thought CSS world" 1px should be a physical device pixel and 
1dip should be a 1/96 of inch measured on *device rendering surface* (screen, paper).

Current CSS way of defining physical size of 1px (using view angle and arbitrary distances [1]) is quite strange (at least).

If I need to define button size to be comfortably touchable then I want it be width:96dip  
That width:96dip will occupy exactly the same area on different devices. Finger touch area does not depend on how hand is stretched.

That's why "measured on device rendering surface" requirement. Can we have something like this in CSS?


-- 
Andrew Fedoniouk.

http://sciter.com



On Tue, May 24, 2016 at 8:19 PM, Prashant Kisanrao Nevase <[hidden email]> wrote:

Dear CSS Working Group,

 

There are many displays for different devices available for rendering the contents. e.g. big screens, projected screens, TVs, computer monitors, tablets, IVI displays, phablets, phones, wearables, etc. These displays have different sizes and different resolutions and number of pixels or dots per inch (display pixel density or simply called display density) varies for different displays. Due to this writing the contents which will work across different displays seamlessly or with less modification has become difficult and content developer has to consider many different displays e.g. different contents for mobile devices, desktop monitors, etc.

 

I want to propose "pixel", making it independent of "display size" and "display densities". Many mobile platforms (Android, iOS, WinMo, Tizen, etc.) support display density independent pixel, but display size (pixels measured diagonally) is not taken care any of the platform. Hence contents rendered gets occupied differently on different displays. Also desktop platforms do not support this. So web page opened on 12 inches display looks different than it opened on 21 inches display.

 

Making this css standard will help web pages render with similar layout on any display.

 

It proposes having new meta name "pixel" as given below -

 

<meta name="pixel" content="baseline-density=640;" ></div>

 

Then pixel scale factor for computing DIP (display independent pixel) is as given below -

 

device_baseline_density = baseline_density / display_size;
pixel_scale_factor = dots_per_inch / device_baseline_density;

 

where

baseline_density = Value of baseline-density property [input from web page]
display_size = Display size in inches (measured diagonally) [taken from platform]
device_baseline_density = Baseline density for the target display on which web page is to be rendered. [output]
dots_per_inch = Number of pixels per inch on the target display. [taken from platform]
pixel_scale_factor = Scale factor for pixel for target display [output]

 

By multiplying the css pixel by pixel scale factor, we get similar layouts for the contents.

 

For more details, kindly have a look at
https://github.com/prashant-samsung/dip/

 

~ Prashant Nevase

 



Reply | Threaded
Open this post in threaded view
|

Re: Re: [dip] Proposal for display size and density independent pixel.

Prashant Kisanrao Nevase
Samsung Enterprise Portal mySingle

For fixed sizes, CSS already defines absolute units like (in, cm, mm, pt, pc). These can be used when it is expected to have fixed size for the element. But when lengths are expected to be relative, it is difficult to compute each and every length which is relative to display width and height. The easiest way is define lengths in pixels by taking reference of development display. But then it makes strange layouts on different sizes of displays or even on same size display with different display resolution. The proposed idea is making this pixel independent of display size and resolution, which will make

 

1 CSS pixel = 1 device pixel if pixel meta property is not specified OR


1 CSS pixel = X * 1 device pixel when pixel meta property is defined. (The pixel scale factor (X ) would be computed as proposed to be independent of display size and display resolution).

 

~ Prashant Nevase

 

------- Original Message -------

Sender : Andrew Fedoniouk<[hidden email]>

Date : May 30, 2016 01:46 (GMT+05:30)

Title : Re: [dip] Proposal for display size and density independent pixel.

 

Why not just 1dip; ?

In "ideal, well thought CSS world" 1px should be a physical device pixel and 
1dip should be a 1/96 of inch measured on *device rendering surface* (screen, paper).

Current CSS way of defining physical size of 1px (using view angle and arbitrary distances [1]) is quite strange (at least).

If I need to define button size to be comfortably touchable then I want it be width:96dip  
That width:96dip will occupy exactly the same area on different devices. Finger touch area does not depend on how hand is stretched.

That's why "measured on device rendering surface" requirement. Can we have something like this in CSS?


-- 
Andrew Fedoniouk.

http://sciter.com



On Tue, May 24, 2016 at 8:19 PM, Prashant Kisanrao Nevase <[hidden email]> wrote:

Dear CSS Working Group,

 

There are many displays for different devices available for rendering the contents. e.g. big screens, projected screens, TVs, computer monitors, tablets, IVI displays, phablets, phones, wearables, etc. These displays have different sizes and different resolutions and number of pixels or dots per inch (display pixel density or simply called display density) varies for different displays. Due to this writing the contents which will work across different displays seamlessly or with less modification has become difficult and content developer has to consider many different displays e.g. different contents for mobile devices, desktop monitors, etc.

 

I want to propose "pixel", making it independent of "display size" and "display densities". Many mobile platforms (Android, iOS, WinMo, Tizen, etc.) support display density independent pixel, but display size (pixels measured diagonally) is not taken care any of the platform. Hence contents rendered gets occupied differently on different displays. Also desktop platforms do not support this. So web page opened on 12 inches display looks different than it opened on 21 inches display.

 

Making this css standard will help web pages render with similar layout on any display.

 

It proposes having new meta name "pixel" as given below -

 

<meta name="pixel" content="baseline-density=640;" ></div>

 

Then pixel scale factor for computing DIP (display independent pixel) is as given below -

 

device_baseline_density = baseline_density / display_size;
pixel_scale_factor = dots_per_inch / device_baseline_density;

 

where

baseline_density = Value of baseline-density property [input from web page]
display_size = Display size in inches (measured diagonally) [taken from platform]
device_baseline_density = Baseline density for the target display on which web page is to be rendered. [output]
dots_per_inch = Number of pixels per inch on the target display. [taken from platform]
pixel_scale_factor = Scale factor for pixel for target display [output]

 

By multiplying the css pixel by pixel scale factor, we get similar layouts for the contents.

 

For more details, kindly have a look at
https://github.com/prashant-samsung/dip/

 

~ Prashant Nevase