The following element is a pic, it can be parsed by PowerPoint. I got confused with it's
measuring units for a couple of hours.
English Metric units (EMUs), points, picas, and inches ?
DPI=96
xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main"
xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"
<p:pic>
....
<a:srcRect l="5556"/>
<p:spPr bwMode="auto">
<a:xfrm>
<a:off x="3545" y="759"/>
<a:ext cx="782" cy="150"/>
</a:xfrm>
.....
</p:spPr>
</p:pic>
English Metric Units are used for measuring sizes and positions of Vector Drawing and Pictures. Everything you need w.r.t. to Measuring Units in Open XML can be found here.
Hope this helped.
This involves more than a mere measure unit...
"DPI 96" comes from a VGA screen size of (or mode) 640x480... maybe other values you could find out there can be "DPI 72" for an EGA screen size of 640x350 or "DPI 48" for a CGA screen size of 640:200 ...
Those things came from the very beginning: MSDOS, Macintosh(Sw&Hw) and IBM PC. On those years (80's) there was several graphic modes each with their own pixel size that graphical drivers managed to draw on those very primitive monitors (very low resolutions and screen size, monochrome, no standars!). DPI 96 stands for "dot per inch 96x96", as VGA pixel is a square of 96x96. CGA and EGA have rectangular pixels of 48×96 and 72×96 respectively...
I'm sure that checking this URLs will help you...
Where does 96 DPI come from in Windows?
DPI & PPI explained
Related
When using "setMinimumHeight(...)/setMinimumWidth(...)" what units are the arguments in? I'm not turning up anything online, the book I bought doesn't address it and based on my experiments the units certainly aren't pixels. Thanks in advance.
Those parameters are measured in pixels, but there are other things at play here as well that unfortunately are harder to deal with and may be complicating your measurments.
Take a look at the following two images. The resolution of my screen remains at 3840x2160 but the "Scale Factor" that Windows suggests varies between 100% and 250%.
Scale Factor = 100%
Scale Factor = 250%
The ruler has actually changed size which could give you the impression that the size policy of these isn't equivalent to the pixel size. Note the size of each of these widgets starts at the grey, not at the blue. Additionally, even though Qt maintains the size of the widget in pixels independently from Windows' "Scale Factor", the same can't be said for the label in the center which does change in size depending on the scaling.
I don't know exactly how you are taking your measurements, what the GUI is, or what your display setting is, but those all can contribute to the confusion around sizing in Qt.
I read everywhere that resolution is defined by the number of pixels on a screen.
But if you imagine 1000 x 1000 pixels on a screen the size of 20 skyscrapers and compare it to 999 x 999 pixels on a box of matches, the resolution would make the skyscrapers screen look 'low-res' and the box of matches screen look 'high-res'. Instinctively, I would say that the box of matches screen is higher resolution than the skyscrapers screen.
Am I wrong to say this? Is resolution definitely defined by the total number of pixels instead of the dots per inch?
Indeed, in the context of displays, the term resolution says nothing about pixel density. As stated in Wikipedia's article on Display Resolution:
The term "display resolution" is usually used to mean pixel dimensions, the number of pixels in each dimension (e.g. 1920 × 1080), which does not tell anything about the pixel density of the display on which the image is actually formed: broadcast television resolution properly refers to the pixel density, the number of pixels per unit distance or area, not total number of pixels. In digital measurement, the display resolution would be given in pixels per inch (PPI)
Definition of resolution varies according with the context. Every thing has a measurement unit.
When you talk about screens(Monitors), screen has pixels not dots thats why its resolution is measured in Pixels.
And When you talk about printing or video it is all about dots per inch. In your case, Box of Match is not a screen, its on printed paper.
For eg: you might have heard people saying DPI's(not resolution) while scanning documents.
So don't get yourself confused with the definition of resolution that is meant for different context.
I'm told that DPI and Points are no longer relevant in terminology involving graphical displays on computer screens and mobile devices yet we use the term "High DPI Aware" and in Windows you can set the various DPI levels (96, 120, 144, 192).
Here is my understanding of the various terms that are used in displaying images on computer monitors and devices:
DPI = number of dots in one linear inch. But DPI refers to printers and printed images.
Resolution = the number of pixels that make up a picture whether it is printed on paper or displayed on a computer screen. Higher resolution provides the capability to display more detail. Higher DPI = Higher resolution, however, resolution does not refer to size, it refers to the number of pixels in each dimension.
DPI Awareness = an app takes the DPI setting into account, making it possible for an application to behave as if it knew the real size of the pixels.
Points and Pixels: (There are 72 points per inch.)
At 300 DPI, there are 300 pixels per inch. So 4.16 Pixels = 1 point.
At 96 DPI there are 1.33 pixels in one point.
Is there a nice way to "crisply" describe the relationship between DPI, PPI, Points, and Resolution?
You are correct that DPI refers to the maximum amount of detail per unit of physical length.
Computer screens are devices that have a physical size, so we speak of the number of pixels per inch they have. Traditionally this value has been around 80 PPI, but now it can be up to 400 PPI.
The notion of "High DPI Aware" (e.g. Retina) is based on the fact that physical screen sizes don't change much over time (for example, there have been 10-inch tablets for more than a decade), but the number of pixels we pack into the screens is increasing. Because the size isn't increasing, it means the density - or the PPI - must be increasing.
Now when we want to display an image on a screen has more pixels than an older screen, we can either:
Map the old pixels 1:1 onto the new screen. The physical image is smaller due to the increased density. People start to complain about how small the icons and text are.
Stretch the old image and fill in the extra details. The physical image is the same size, but now there are more pixels to represent the content. For example, this results in font curves being smoother and photographs showing more fine details.
The term DPI (Dots Per Inch) to refer to device or image resolution came into common use well before the invention of printers that could print multiple dots per pixel. I remember using it in the 1970's. The term PPI was invented later to accommodate the difference, but the old usage still lingers in places such as Windows which was developed in the 1980's.
The DPI assigned in Windows rarely corresponds to the actual PPI of the screen. It's merely a way to specify the intended scaling of elements such as fonts.
DPI vs. resolution – What’s the difference?
The acronym dpi stands for dots per inch. Similarly, ppi stands for pixels per inch. So, why have two different acronyms for measuring roughly the same thing? Because there is a key difference between the two and if you don’t understand this difference it can have a negative impact on your digital signage project.
Part of the confusion between the two terms stems from the fact that many people who use them are lazy and tend to use the terms interchangeably. The simplest way of thinking about them is that one is digital (ppi) and represents what you see on the computer screen and the other is physical (dpi) for example, how an image appears when you print it out on a piece of paper.
I suggest you to check this in-depth article talking about the technicality of this topic.
https://blog.viewneo.com/blog/72-dpi-resolution-vs-300-dpi-for-digital-solutions/
I have a question that have been on my mind for several time now: how should I prepare the images that I am going to use on a website to be retina-ready?
Yes, I have been spending hours on the interweb on this topic, but so far I haven't find the one 'ultimate answer'.
In this thread for example (link: image size for retina display), it is only mentioned that I need to double the dimensions. But how about the resolution?
Real life situation: an image is created using Photoshop (or whatever your fix) at dimension 400px x 200px, with resolution of 72 ppi.How should I modify this image?
800 x 400px at 72 ppi (just resize it, times two)
800 x 400px at 144 ppi (dimensions and resolution times two)
400 x 200px at 144 ppi (just double the resolution)
400 x 200px at 246 ppi (same dimension, higher resolution --I got the number 246 from some tutorial in designing ipad wallpaper)
...et cetera... ??
The target is to select the images and display them on both non-retina and retina displays (i.e. 'normal' computers / laptops, macs (both versions, retina and non), iDevices, Androids, et cetera)
Looking forward for any feedbacks :-)
You could use Retina.js to replace the image with a higher resolution version, but only if the users device is equipped with a retina display.
The question you link is correct. You need to double the size of the image to double the resolution.
What you are getting confused over is the PPI. PPI is Pixels Per Inch, it is simply a measure of how big a picture is, same as display dimensions.
One is not independent of the other.
An image of 400x200 will take up as much screen space on a 72 ppi display as a 800x400 image on a 144 ppi display. The difference is simply that the 144 ppi device is able to fit more pixels in one inch of screen space than the 72 ppi.
So, by doubling the resolution of a 72ppi image, you are indeed insuring that it looks the same/takes the same amount of screen space.
There's a new responsive images HTML5 standard. As of July 2014 it's only in beta builds of browsers yet. But the Picturefill polyfill is already available.
This article explains different use-cases quite well. But what you want here is to simply provide an alternative image for high-resolution (e.g. 'retina') displays:
<img srcset="small.jpg 1x, large.jpg 2x"
src="small.jpg"
alt="A rad wolf" />
Is there a recommended smallest button size under normal conditions?
By "recommended" I mean prescribed by some document like:
Apple HCI Guidelines
Windows UX Guidelines
or some ISO standard..
By "normal" conditions I mean:
desktop/office use
standard 96dpi monitor resolution
mouse/touchpad for pointing (no touchscreen)
non-disabled or visually impaired users
standard "theme" (no large fonts/icons)
Microsoft's UX Guide for Windows 7 and Vista recommends:
"Make click targets at least 16x16 pixels so that they can be easily clicked by any input device. For touch, the recommended minimum control size is 23x23 pixels (13x13 DLUs)." where"A dialog unit (DLU) is a device-independent metric where one horizontal dialog unit equals one-fourth of the average character width for the current font and one vertical dialog unit equals one-eighth of the character height for the current font. Because characters are roughly twice as high as they are wide, a horizontal DLU is roughly the same size as a vertical DLU, but it's important to realize that DLUs are not a square unit."
You may also want to look up Fitts' Law, which calculates the time necessary to complete an action as a function of the target size. That can help mathematically determine the trade-offs of different button sizes.
Well, I try to make important/common mouse targets as large as possible without looking bad, something about 20 pixels (assuming 96 DPI) height, and as much width as needed to accomodate labels. If the button has no labels, which is very rare, I found out it's actually comfortable to have an aspect like 20w/50h (with the icon on top, not center), since the mouse is easier to move horizontally. So it's also good to keep them in the same row.
In addition to what MsLis suggested the UX Guide also suggests a minimum width of 75 pixels specifically for Command Buttons.
UX Guide - Recommended sizing and spacing