Difference between revisions of "KDE Visual Design Group/HIG/Units"

Jump to: navigation, search
(Created page with "__NOTOC__ == Purpose == This pages gives an overview about different units used in KDE and Plasma == Pixel == A (physical) pixel is a physical point in a raster image, or the...")
 
Line 4: Line 4:
  
 
== Pixel ==
 
== Pixel ==
A (physical) pixel is a physical point in a raster image, or the smallest addressable element in an all points addressable display device. <span style="color: red">Be careful not to confuse it with PPI independent pixels</span>
+
A (physical) pixel or dot is a physical point in a raster image, or the smallest addressable element in an all points addressable display device. <span style="color: red">Be careful not to confuse it with DPI independent pixels</span>
  
== PPI - pixels per inch ==
+
== DPI - pixels per inch ==
Pixel density is the number of (physical) pixels that fit into an inch. Different screens have different PPI.
+
Pixel density is the number of (physical) pixels or dots that fit into an inch. Different screens have different DPI.
 
<br/><br/>
 
<br/><br/>
 
<b>screen density = screen width (or height) in pixels / screen width (or height) in inches</b>
 
<b>screen density = screen width (or height) in pixels / screen width (or height) in inches</b>
 
<br/><br/>
 
<br/><br/>
  
PPI is often used interchangeably with DPI, dots per inch.
+
{|
 +
|[[Image:Pixel.qml.png|Different DPIs on desktop and mobile]]
 +
|}
  
== PPI independent pixels ==
+
DPI is often used interchangeably with PPI, pixel per inch.
A PPI independet pixel is scaled to look uniform on any screen regardless of the PPI. A lot of platforms, eg iOS, Android, the Web, replaced the old (physical) px with a PPI px. So most the time you read about pixel/px they actually talk about PPI independent pixels. Qt (and QML) support PPI independent pixels in newer versions, but because KDE and Plasma support older versions of Qt too, one can not assume that pixels used in Qt or QML apps are ppi independent.
+
 
 +
== PPI / DPI independent pixels ==
 +
A DPI independet pixel is scaled to look uniform on any screen regardless of the DPI. A lot of platforms, eg iOS, Android, the Web, replaced the old (physical) px with a DPI px. So most the time you read about pixel/px they actually talk about DPI independent pixels. Qt (and QML) support DPI independent pixels in newer versions, but because KDE and Plasma support older versions of Qt too, one can not assume that pixels used in Qt or QML apps are DPI independent.
 +
 
 +
{|
 +
|[[Image:Dpi.qml.png|Different DPIs on desktop and mobile]]
 +
|}
 +
A rectangle defined with <span style="color: #da4453">physical pixels</span> and <span style="color: #27ae60">DPI independent pixels</span>.
  
 
<br/><br/>
 
<br/><br/>
<span style="color: red">Note to developers: Except explicilty stated otherwise, all HIG pages, draft, mockups, ... pixels/px are always PPI independent pixels.</span>
+
<span style="color: red">Note to developers: Except explicilty stated otherwise, all HIG pages, draft, mockups, ... pixels/px are always DPI independent pixels.</span>
 
<br/><br/>
 
<br/><br/>
  
 +
=== Fonts ===
 +
Since KDE allows the user to change the font settings any dimensions defined with px, no matter if they are DPI independent or not, make problems together with text.
 +
 +
{|
 +
|[[Image:Font.qml.png|Using DPI independet pixel with different font setting]]
 +
|}
 +
 +
== base units in plasma ==
 +
There are two special base units in plasma:
 +
 +
* units.smallSpacing
 +
* units.largeSpacing
  
== base units ==
+
These two are not only DPI independent but scale according to the font settings too.
 +
 +
{|
 +
|[[Image:Units.qml.png|Using units.smallSpacing with different font setting]]
 +
|}
 +
A rectangle defined with <span style="color: #3daee9">units.smallSpacing</span>

Revision as of 08:30, 7 September 2017

Purpose

This pages gives an overview about different units used in KDE and Plasma

Pixel

A (physical) pixel or dot is a physical point in a raster image, or the smallest addressable element in an all points addressable display device. Be careful not to confuse it with DPI independent pixels

DPI - pixels per inch

Pixel density is the number of (physical) pixels or dots that fit into an inch. Different screens have different DPI.

screen density = screen width (or height) in pixels / screen width (or height) in inches

Different DPIs on desktop and mobile

DPI is often used interchangeably with PPI, pixel per inch.

PPI / DPI independent pixels

A DPI independet pixel is scaled to look uniform on any screen regardless of the DPI. A lot of platforms, eg iOS, Android, the Web, replaced the old (physical) px with a DPI px. So most the time you read about pixel/px they actually talk about DPI independent pixels. Qt (and QML) support DPI independent pixels in newer versions, but because KDE and Plasma support older versions of Qt too, one can not assume that pixels used in Qt or QML apps are DPI independent.

Different DPIs on desktop and mobile

A rectangle defined with physical pixels and DPI independent pixels.



Note to developers: Except explicilty stated otherwise, all HIG pages, draft, mockups, ... pixels/px are always DPI independent pixels.

Fonts

Since KDE allows the user to change the font settings any dimensions defined with px, no matter if they are DPI independent or not, make problems together with text.

Using DPI independet pixel with different font setting

base units in plasma

There are two special base units in plasma:

  • units.smallSpacing
  • units.largeSpacing

These two are not only DPI independent but scale according to the font settings too.

Using units.smallSpacing with different font setting

A rectangle defined with units.smallSpacing


Content is available under Creative Commons License SA 4.0 unless otherwise noted.