Difference between revisions of "KDE Visual Design Group/HIG/Units"
Line 17: | Line 17: | ||
DPI is often used interchangeably with PPI, pixel per inch. | DPI is often used interchangeably with PPI, pixel per inch. | ||
+ | |||
+ | <div style="background: #bdc3c7; padding: 4px;"> | ||
+ | {| | ||
+ | | [[Image:DesignerIcon.svg|32px|For designers]] | ||
+ | || Don't confuse this with the DPI setting in photoshop, krita, ... . For mockups you can just ignore this setting or choose a what ever value you like. | ||
+ | |} | ||
+ | </div> | ||
== PPI / DPI independent pixels == | == PPI / DPI independent pixels == | ||
Line 27: | Line 34: | ||
<br/><br/> | <br/><br/> | ||
− | <span style="color: red">Except explicilty stated otherwise, all HIG pages, draft, mockups, ... pixels/px are always DPI independent pixels.</span> | + | <div style="background: #bdc3c7; padding: 4px;"> |
+ | {| | ||
+ | | [[Image:DevIcon.svg|32px|For developers]] | ||
+ | ||<span style="color: red">Except explicilty stated otherwise, all HIG pages, draft, mockups, ... pixels/px are always DPI independent pixels.</span> | ||
+ | |} | ||
+ | </div> | ||
<br/><br/> | <br/><br/> | ||
=== DPI independent pixels in KDE === | === DPI independent pixels in KDE === | ||
− | As a developer, if you want to use DPI independent pixels use units.devicePixelRatio as a multiplier on physical pixels. Since units.devicePixelRatio is a float, make sure to round the results. Most of the time you want to floor it. | + | <div style="background: #bdc3c7; padding: 4px;"> |
+ | {| | ||
+ | | [[Image:DevIcon.svg|32px|For developers]] | ||
+ | ||As a developer, if you want to use DPI independent pixels use units.devicePixelRatio as a multiplier on physical pixels. Since units.devicePixelRatio is a float, make sure to round the results. Most of the time you want to floor it. | ||
+ | |} | ||
+ | </div> | ||
=== Fonts === | === Fonts === | ||
Line 43: | Line 60: | ||
There are special base units in plasma: | There are special base units in plasma: | ||
− | * units.smallSpacing | + | * units.smallSpacing |
− | * units.largeSpacing | + | * units.largeSpacing |
− | * units.gridUnit | + | * units.gridUnit |
− | |||
These are not only DPI independent but scale according to the font settings too. While designing, be careful not to rely on the ratio between units.smallSpacing and units.largeSpacing because these change depending on font settings. | These are not only DPI independent but scale according to the font settings too. While designing, be careful not to rely on the ratio between units.smallSpacing and units.largeSpacing because these change depending on font settings. | ||
Line 53: | Line 69: | ||
|} | |} | ||
A rectangle defined with <span style="color: #3daee9">units.smallSpacing</span> | A rectangle defined with <span style="color: #3daee9">units.smallSpacing</span> | ||
+ | |||
+ | <div style="background: #bdc3c7; padding: 4px;"> | ||
+ | {| | ||
+ | | [[Image:DesignerIcon.svg|32px|For designers]] | ||
+ | || For mockup and design you can use these values:<br/> | ||
+ | * units.smallSpacing = 4px | ||
+ | * units.largeSpacing = 18px | ||
+ | * units.gridUnit = 18px | ||
+ | |} | ||
+ | </div> | ||
== From design to code == | == From design to code == |
Revision as of 06:39, 19 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
![]() |
DPI is often used interchangeably with PPI, pixel per inch.
![]() |
Don't confuse this with the DPI setting in photoshop, krita, ... . For mockups you can just ignore this setting or choose a what ever value you like. |
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.
![]() |
A rectangle defined with physical pixels and DPI independent pixels.
![]() |
Except explicilty stated otherwise, all HIG pages, draft, mockups, ... pixels/px are always DPI independent pixels. |
DPI independent pixels in KDE
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.
![]() |
base units in plasma
There are special base units in plasma:
- units.smallSpacing
- units.largeSpacing
- units.gridUnit
These are not only DPI independent but scale according to the font settings too. While designing, be careful not to rely on the ratio between units.smallSpacing and units.largeSpacing because these change depending on font settings.
![]() |
A rectangle defined with units.smallSpacing
![]() |
For mockup and design you can use these values:
|
From design to code
For any mockup, please help the developers by specifying all measurements, either in the mockup itself or in an extra guide to the mockup. It is a lot of work and it is error prone for developers trying to measure everything from a mockup. Even if the mockup is in a file format that would allow exact measurements, don't expect the developer to know how to do it.
BAD There are no measures. |
GOOD Try to be as detailed as necessary, but you don't have to provide measurement for objects that can be easily calculated. For example the size of the dark rectangle can be easily obtained. |
recomended spacings
If you design try to use the recomended values for margin and paddings, to ensure a uniform appearance. See Placement and Spacing for more details.
![]() |
1 Row {
2 spacing: units.largeSpacing
3 Rectangle {
4 ...
5 }
6 Rectangle {
7 ...
8 }
9 }
1 Row {
2 spacing: 2 * units.smallSpacing
3 Rectangle {
4 ...
5 }
6 Rectangle {
7 ...
8 }
9 }
arbitrary px values
When needed, you can use arbitrary px values for your mockups. As a developer you need to use units.devicePixelRatio to make these values DPI independent.
![]() |
1 Row {
2 spacing: units.smallSpacing
3 Rectangle {
4 height: units.largeSpacing
5 width: Math.floor(2 * units.devicePixelRatio)
6 }
7 Text {
8 ...
9 }
10 }
ratio
Sometimes the ratio between dimensions is more important then the actually values.
![]() |
1 Grid {
2 columns: 3
3 ...
4 Repeater {
5 model: 9
6 ...
7 Rectangle {
8 width: grid.width / 3
9 height: grid.height / 3
10 ...
11 }
12 }
13 }