My maths just doesn't seem to be adding up. I've created an image where 30 pixels represents 1 inch. When I save the image, I want it to be scaled by a certain amount so that the pixels are converted to the correct inches.
What do I scale by??!!!
I'm currently scaling by 3.2 but I'm not sure if that's correct because the measurements seem off.
I am not 100% sure what you are asking for, but I assume you are looking for a tool that maps pixels to inches on the screen. This varies by screen resolution and size, if you calculate the DPI (https://www.sven.de/dpi/ shown as PPI) of the monitor you want to show it on you can use this to get the desired conv:
http://auctionrepair.com/pixels.html
Related
This question relates to web development.
I'm going to start by apologizing for the horrible title but I wasn't sure how to title this. CSS pixels and how they interact with screen resolutions confuse me a bit already, when you add "intermediate pixel layers" and image drawing it's even more nebulous. So here's my actual question:
Let's say that we have an image set to display as 2x1 (css pixels) on a web page. And we instead feed it a 4x1 image (rasterized). The browser will fit this image to the 2x1 css pixels we specified earlier. But, would we technically be able to see all 4x1 pixels on a setup where 1 CSS pixels = 2 device pixels? Or would it instead resize the 4x1 image to 2x1 then display each pixel twice? And does this change on a per browser/device basis?
Bonus points: How does this play into accessibility tools that zoom into web content for the visually impaired? (if at all).
Answering my own question. The short answer is YES browsers will show different amounts of detail based on screen resolution.
CSS pixels ARE NOT screen pixels. If an image is 600x600 pixels and you decide to display it in a CSS-defined area of 300x300 (img:{width:300px;height:300px}), it could display as 300x300 screen pixels or it could display as 600x600 screen pixels. Which of the two it is will depend on the end user's OS screen resolution.
Example:
I created a 4x1 pixel png image:
I added this image to an html page and sized it with a img:{width:2px; height:1px;}. For good measure, I also added a blue div with div:{width:2px; height:1px;} bellow it.
I then set the "css resolution" of the page to half that of my OS screen resolution (If the OS was set to 2000x2000 I made sure that the full html page had a css widthxheight of 1000x1000px). So each css pixel would contain 4 screen pixels.
This is how it displayed:
Both the image and the blue div are 2px wide (that's css pixels) but they display as 4 screen pixels. In the case of the blue div, it duplicates the pixels to fit the screen resolution. But in the case of the image, it displays all 4 individual pixels. In both cases, it duplicates the pixels vertically to fit the screen resolution (technically it's probably more of a stretch than a duplication, but you get the idea).
I'm not entirely sure about this but I'm assuming at this stage that all browsers act in a similar fashion.
If I have all widths on my website set to 1920px
How will it look on higher resolutions (4k for example)? Will it only fill a portion of the site and leave the rest white around it (because this is what happens when I zoom out)?
I guess what I'm really asking is: If I think about the whole website as an image, can I scale it all at once keeping proportion?
EDIT: After some research and trying, i solved it by setting width to 100% and view height (vh) after my needs.
According to the CSS3 values spec, px is an absolute physical length and is supposed to map to approximate real-world dimensions:
The reference pixel# is the visual angle of one pixel on a device with
a pixel density of 96dpi and a distance from the reader of an arm’s
length. For a nominal arm’s length of 28 inches, the visual angle is
therefore about 0.0213 degrees. For reading at arm’s length, 1px thus
corresponds to about 0.26 mm (1/96 inch).
This means that the device itself should be scaling your px measurement appropriately for the display - in terms of 4k, you'll likely see 4 physical pixels for each CSS pixel. This is usually user-configurable in the operating system though, so that isn't a guarantee.
Hardcoding the width of a site is usually a bad idea though - what happens when the browser isn't full screen? How does it appear on mobile devices? You should consider using relative length units like % and em to make your layout more flexible and adapt to these situations.
I have a small touchscreen display that we are serving up HTML pages to. The physical dimensions of the LCD is 4.624cm wide by 3.508cm high. Creating a div with a width & height set appropriately creates a much smaller rectangle on the display.
Why would cm not translate to the real dimensions on the screen? What adjustment do I need to make so I can work in centimeters, instead of pixels?
As w3c docs states:
The so-called absolute units (cm, mm, in, pt and pc) mean the same in CSS as everywhere else, but only if your output device has a high enough resolution. On a laser printer, 1cm should be exactly 1 centimeter. But on low-resolution devices, such as computer screens, CSS doesn't require that. And indeed, the result tends to be different from one device to another and from one CSS implementation to another.
http://www.w3.org/Style/Examples/007/units.en.html#units
I have an area in my application that I would like to print. How would I go about printing a page at 300DPI or 72dpi?
So far, I've thought that I have to get the DPI first and set the width and height so the end result is 300dpi.
So if someone wants to print a 4x5 area at 300dpi then I have to take the width and height x current resolution to get there.
I have tried printed in a photo paper 4x6. heres what I did: for example if i have 1800x1200, ill resize the image by using this formula: scale = 72 / 300. You resize your image using Matrix the scale value you got from the formula. 72 is 72 twips (no way around this), 300 for 300 dpi.
it will get the desired result, more or less. in the end it sucks and flex never had a great printing support so abandon all hope. better use the native OS's printing service.
I need to put in my site div which is exactly 25cm width ( 10 inch) in every display. How I can do it ?
You can simply use the cm unit in CSS:
#mydiv { width: 25cm; }
Note that, as others pointed out, the result still depends on the correct reading of the monitor size by the operating system.
See the spec for more information.
How I can do it ?
You can't. Update: apparently, you can on many modern systems: Check out #Tomas's answer. It seems not to be always entirely reliable, though.
Old answer: You can't. Monitors display different numbers of pixels. The pixel size varies wildly from monitor to monitor.
There are ways to interpolate the pixel size if you know the monitor size. This information is sometimes available to the operating system; however, it is impossible for a web site to get hold of this information.
The only way to go would be to have the user do a calibration. For example, ask the user to hold an A4 piece of paper to the monitor, and use a draggable ruler to determine the area it covers. Using that information, you can then calculate how many pixels you will need to show 25 centimeters.
Update: #Tomas claims in his answer that using CSS cm values works on screen.
This is in fact true on my Windows 7 and 23" Plug&Play TFT Monitor (1920x1080 Pixels): 21cm translates perfectly to the short side of a A4 sheet of paper in Chrome 7, IE6(!), IE7, Firefox 3.6.
It doesn't seem to be entirely reliable, though: #Yi Jiang can't get it to work on a TFT using Ubuntu Linux; also, older Monitors may not send through their size information so it'll be impossible for the OS to determine a correct size.
Here's a simple JSFiddle for testing.
You can't. A program can only get the true physical dimensions of a screen by interrogating EDID as values returned by the Windows API are not reliable. A program can get the true values for resolution (e.g.1280 x 1024) and screen dpi, but browsers can't do any of this by themselves.
There is a constant confusion between the "physical dpi" of a screen and "screen dpi". The physical dpi, more properly called pixels per inch, is obtained by dividing the maximum pixel width of the screen by the physical (ruler) width in inches. The pixels per inch are fixed by the manufacturing process. The screen dpi is a number that the user can set via the Control Panel and it's only purpose is to convert a value in inches into a number of pixels. The user settable screen dpi value has no direct relationship whatever with the physical dpi (pixels per inch) and is just a number with a default value of 96. There is nothing magic about 96, or 120
Number of screen pixels = number of inches x screen dpi
It's as simple as that.
The reason 21 cm on a 23 inch monitor at 1920 x 1080 "translates" to the width of an A4 sheet (21 cm) is because with a 23 inch diagonal the screen width is 20.05 inches and at 1920 pixels across the pixel density is 95.76 pixels per inch.
With screen dpi default value of 96 then for one inch: pixels = 1 x 96 = 96 pixels
The pixel density of the 23 inch screen is 95.76 pixels per inch which matches the number of pixels you get, when specifying a length of one inch, with the default screen dpi value of 96.
If screen dpi is changed in the Control Panel, or the monitor video resolution is changed, then 21 cm would not match the width of a sheet of A4.
You will need to get hold of the resolution of the display and the dot pitch of the monitor to be able to calculate this.
Given these two values you'll be able to calculate the number of pixels you need.
However, you can't get hold of this information from a web site.
Given that you state it's a <div> in a site, we know you're in a web browser environment.
Sadly for you, the web browser doesn't have any way to find out the screen's DPI. You can find out what the screen resolution is, so you'll know whether the user has 1024x760 or whatever, but you'll never know whether those 1024x768 pixels are being displayed on an iPhone sized screen or a billboard, or anything in between.
Sorry about that.
I believe the layout engine would need to know three things to make this possible:
Screen resolution
DPI
Physical monitor size
As far as I'm aware, it doesn't know all three.