Can anyone think of a way I can discover a users pixels per inch? I want to ensure that a image displays in a web browser exactly the size I need it to, so using a combination of resolution (which I can get from the user agent) and pixels per inch I could do this.
However, I'm not sure if there is any way to discover a users pixels per inch, ideally using JavaScript or some other non-invasive method.
Any suggestions?
Thanks,
CJ
You could use the following javascript function to get the DPI.
<script type="text/javascript">
var dpi = {
v: 0,
get: function (noCache) {
if (noCache || dpi.v == 0) {
e = document.body.appendChild(document.createElement('DIV'));
e.style.width = '1in';
e.style.padding = '0';
dpi.v = e.offsetWidth;
e.parentNode.removeChild(e);
}
return dpi.v;
}
}
alert(dpi.get(true)); // recalculate
alert(dpi.get(false)); // use cached value
</script>
However, I think it will always return 96 on windows machines.
As far as I know, there is no way for the operating system to determine the actual physical dimensions of the viewport. So, it might very well be that it is actually impossible for software to know the real-life DPI.
However, professionals is certain branches make sure that the on screen DPI matches the real-life DPI. In those case the above javascript would probably be sufficient.
Note:
Tested the above code in Opera 9, IE6 & 7 and Firefox 3.6 on WinXP and Win2k.
Update:
Added the noCache param. But I doubt it will have any effect. I tested it with zoom in FireFox and Opera on the above mentioned windows versions and they keep quoting the DPI as '96', regardless of the amount of zoom. Would be interesting to see what mobile devices make of this.
You could do as the drawing packages of old did, and display a stretchable ruler. Have your users drag the virtual ruler until it matches a physical ruler they've put against the screen.
Not a serious suggestion for production use, but probably the only way to actually get the right answer :(.
The safest and easiest would be to tell the browser what size you want the image. CSS supports inch and metrics, so you could specify the image like any of these examples:
<img src="image.png" style="width:15cm;height:10cm;" alt="Centimeters" />
<img src="image.png" style="width:5.9in;height:3.9in;" alt="Inches" />
<img src="image.png" style="width:150mm;height:100mm;" alt="Millimeters" />
Displays today support 96px/inch or 72pixels/inch .
You can get the HTTP request User-Agent header
User-Agent: Mozilla/5.0 (Linux; X11)
this one will tell you the operating system and from here you can make a decision.
This may be very tough - even if you somehow manage to scale the rendered image based on dpi, how do you prevent the user from scaling the image in his browser directly?
Have you considered some rich interface technologies like flash or Silverlight? They may give you additional options.
Related
Not sure if this is an Edge or more general Windows 10 question, but trying to get pinned site tile to work I'm encountering some rather strange behavior.
First of all, are application tile images cached aggressively? It seems that once a site was pinned, changes to the relevant meta elements seem to be ignored. Un-pinning, clearing browser cache and doing a Windows clean-up of temp files/temp internet files has no effect. Even completely removing the meta elements, then trying to pin the site, still reuses the old ones. This makes debugging/testing rather difficult. Is there something I'm missing? How can the tile information be flushed?
Secondly, it seems that the specified msapplication-TileColor is not handled correctly - in the example below I'm using transparent PNG files for the icons themselves, setting a tile color
<meta name="application-name" content="The Paciello Group (TPG)">
<meta name="msapplication-TileColor" content="#1b75bc">
<meta name="msapplication-TileImage" content="/images/tpg-white-trans-144.png">
<meta name="msapplication-square70x70logo" content="/images/tpg-white-trans-70.png">
<meta name="msapplication-square150x150logo" content="/images/tpg-white-trans-150.png">
<meta name="msapplication-square310x310logo" content="/images/tpg-white-trans-310.png">
However, checking the color that's actually used, it seems to be closer to #2672EC than #1b75bc. Could this be because of some color profile issue? Could it be that color profile information in the PNG is affecting the rendering of the actual specific tile color?
They messed up, first Windows 10 release it was taking msapplication-tilecolor, after first mass update around 5th of August, they took away tilecolor as well, made it default blue (or whatever user preferences are)
We also need text color as well
First of all, are application tile images cached aggressively?
Yes, remote tile images are cached, and they're cached separately from the normal internet cache. To update an image without changing the URL, you have to add a new query string parameter, so that it's considered a new URL.
How can the tile information be flushed?
The cached entries are stored in the registry at...
HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\PushNotifications\wpnidm
You probably can find the related image cache entry and delete it for debugging purposes, but I won't make any promises.
Secondly, it seems that specified msapplication-TileColor is not handled correctly
Looks like SiSL has your answer for that: "They messed up, first Windows 10 release it was taking msapplication-tilecolor, after first mass update around 5th of August, they took away tilecolor as well, made it default blue (or whatever user preferences are)"
I found the cache path!
Go to a path similar to this: "C:\Users\UserName\AppData\Local\Packages\Microsoft.MicrosoftEdge_8wekyb3d8bbwe\LocalState\PinnedTiles".
The folder "Microsoft.MicrosoftEdge_8wekyb3d8bbwe" might have a bit different name.
The cached files (Images, XML...) of the tiles you pinned will be inside the folders in this path.
Delete as much as you want.
I am not sure this is about the color, though. I've been testing this MSTiles feature recently and it looks like on Win10 it now uses one of the icons you set for the website (for me it seems to utilize largest icon from webmanifest). It completely ignores what I write in metatags of browserconfig.xml file for icons, as well (square* and wide* elements), which seems to result in the fact I can only set tile's size to small or medium.
I want to build a website that looks exactly the same across all screen width's, which means the whole website will scale according to the screen's, or more accurately, the viewport's width.
This is relatively easy to do for SVG images and I have all images correctly scaling according to the viewport's width. The viewport's width is the point of reference, from which all images scale. However, the point of reference for the text is different between any desktop browser and the iPhone's Safari (and I assume any mobile browser).
According to my research there seem to be two possible reasons for different sized text: a difference in the default CSS's or a difference in the rendering engines. Since I can't find any reference to pixel sized text on Chrome's default CSS or Firefox's default CSS, I assume this setting comes from the rendering engine.
My IP is dynamic so I can't provide a live example, but here are the screens comparing the same site in iPhone's Safari and Chrome on the desktop. Notice the huge difference in the size of the text.
Is there any way I can make the text have the same relative size in both these browsers?
I found the answer in JavaScript:
onresize=onload=function(){
document.body.style.fontSize=window.innerWidth/20+"px"
}
which sets the text size according to the viewport's width on the body element. Since all the text set in em's is sized in relation to their parents, all the text is sized correctly from the body element.
Furthermore, if you want to avoid the cascading hell by using rems and respect the original layout design from a let's say 1024px width you can stick with this:
onresize = onload = function(){
document.querySelector("html").style.fontSize = ( innerWidth * 100 ) / 1024 + "%";
}
You should try CSS Unit vw, like this:
body { font-size: 1.5vw; }
However, i am not sure it is supported by mobile browsers...
EDIT
Check for browser compatibility here.
On my website lukewattchow.zzl.org/ I have made it so that when the browser window scales down the website also scales down. However the text inside the divs need to scale down with the background, and images at the same time. Can anyone help?
i assume you will require some Javascript to adjust font size of the BODY based on some fraction of the browser's width:
(untested pseudo-code; since i never write anything HTML, CSS, or ECMAScript)
var body = document.getElementById("theBody");
var fontSizeInPixels = (16*1680)/document.documentElement.clientHeight;
//nominal font size of 12pt (16px) with a 1650px wide browser window
body.style.font-size = fontSizeInPixels+"px";
Edit:
Microsoft had a good article on handling dpi changes:
Making the Web Bigger: DPI Scaling and Internet Explorer 8
Maybe this answer that I just wrote in other question about the same problem can help you
I know this is a bit of a silly question, but I can't work out how to make a transparent PNG work in IE6. I've tried several things, but they haven't worked. I was wondering if anyone could let me know of a suitable hack?
Thanks in advance,
AD72
Hey use jQueries pngFix. Works like a charm! http://jquery.andreaseberhard.de/pngFix/
have you tried this method? link text
i have tried a number of png hacks fore IE6 and this is the best one that resolves all of the problems that ie has with pngs. good luck
Here's the code we use that seems to work fine.
// from http://labs.unitinteractive.com/unitpngfix.php
var clear="/images/template/clear.gif" //path to clear.gif
pngfix=function(){var els=document.getElementsByTagName('*');var ip=/\.png/i;var i=els.length;while(i-- >0){var el=els[i];var es=el.style;if(el.src&&el.src.match(ip)&&!es.filter){es.height=el.height;es.width=el.width;es.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+el.src+"',sizingMethod='crop')";el.src=clear;}else{var elb=el.currentStyle.backgroundImage;if(elb.match(ip)){var path=elb.split('"');var rep=(el.currentStyle.backgroundRepeat=='no-repeat')?'crop':'scale';es.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+path[1]+"',sizingMethod='"+rep+"')";es.height=el.clientHeight+'px';es.backgroundImage='none';var elkids=el.getElementsByTagName('*');if (elkids){var j=elkids.length;if(el.currentStyle.position!="absolute")es.position='static';while (j-- >0)if(!elkids[j].style.position)elkids[j].style.position="relative";}}}}}
window.attachEvent('onload',pngfix);
Ive used the one from TwinHelix or the jquery one mentioned above.
The PNG form of image is Post Notational Graphic and is primarily described in a law in the era of Queen Victoria of England and therefore is primarily for use in Great Britain. The software for creating and displaying a PNG image is sourced from and protected by England and the different display software versions required for all browsers and different and new browser versions and content environments may not have been commissioned to be done and the incompatibilities could persist for some time. Originally the agreement was with MS and the IE browser only for displaying PNG and it is possible a number of unofficial hacks and decodes have been developed for other browsers with varying success. PNG is officially and completely renderable only when used in a defined list of nations and provinces.
I need to build a custom designed bar chart that displays some simple data. Below are my requirements. Can anyone suggest the best web technology for my requirements.
high browser compatibility
ability to draw shapes
ability to fill shapes with gradients
ability to have onclick and onmouseover events for the different shapes (bars in the chart).
Thanks guys. I was thinking of using svg but looking for suggestions.
How about Raphaël - it's SVG/VML.
It says:
Browser compatibility:
Raphaël currently supports Firefox
3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
Ability to draw shapes
circle, rect, ellipse, image, text, path
Ability to fill shapes with gradients
yes
Ability to have onclick and onmouseover events
yes:
... every graphical object you
create is also a DOM object, so you
can attach JavaScript event handlers
or modify them later.
Everything in the reference
On top of that, there's a plugin called gRaphael which makes the creation of charts easier.
Simple data - Google Charts API or Google Visualization API may suit you.
Details for all features of image charts can be found on the Chart feature list
You may also take a look at the comparison of the Charts API and the Visualization API.
Another candidate of course is JQuery SVG - if you're already familiar with jquery you may prefer this one.
There's a comparison of JQuery SVG and Raphaël on SO:
jQuery SVG vs. Raphael
I recommend using Adobe Flex. Below is an example of how easy pie chart creation can be in Flex:
<mx:Panel title="Pie Chart">
<mx:PieChart id="myChart"
dataProvider="{expenses}"
showDataTips="true"
>
<mx:series>
<mx:PieSeries
field="Amount"
nameField="Expense"
labelPosition="callout"
/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{myChart}"/>
Based on your criteria:
high browser compatibility: Flex is used on more than 95% of all browsers and behaves the same in all browsers. No more need to check if your web app is running in ie, firefox, chrome, etc... because any browser that has a flash player is compatible.
ability to draw shapes: Flash's greatest strength is the ability to draw. Charts are completely customizable and skinnable to achieve the look you need.
Ability to fill shapes with gradients - done easily by setting style attributes or a custom skin.
ability to have onclick and onmouseover events for the different shapes - see this link for some easy ways to create user interactions with charts.
Hi i hope this link may help you i found it while searching for a solution similar to what you're looking for:
http://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chart
i'm trying gRaphael, i'm having difficulties on finding documentation though. you have to read the code and use the exploded instead of the min.js
I would like to share jquery.jqplot.js. It has lots of jQuery options, but depends on other plugins such as syntaxhighliter etc.