I've noticed when using ruler tools from my browser extensions (I've tried multiple) that pixel specifications are typically short by 2 pixels. After noticing this on a site I'm working on, I tried a very simple html page with a div specified with a width and height of 200px and no border or padding. Measuring it out afterwards across multiple browsers and with various ruler tools, the actual rendered box both width and height is 2 pixels shy of my css.
So, curious why this is. What contributes to the "physical" size of the box, screen resolution perhaps? Not the end of the world if this is really how it is, seeing as how it seems to be a consistent thing.
EDIT
Per the comments and reply, my code, very simple:
<html>
<body>
<div style="width: 200px; height: 200px;background: red"></div>
</body>
</html>
And I'm measuring from outside-to-outside. Like here:
If the box you are drawing with your cursor starts inside the box you are measuring, it will be 2 pixels less than if the box you are using to measure starts outside the box you are measuring.
Here is a little graphic:
best is use reset css to ignore such issue
http://yuilibrary.com/yui/docs/cssreset/
I just measured the height of the box above with the (freeware) pixel ruler I wrote, A Ruler for Windows, and it measured just fine as 200 pixels.
I'm a little confused by your box inside the big red box, but the inside box measures a width of 50 if you count the burgundy boarder as part of what needs to be measured.
Of note, with A Ruler for Windows (when it is horizontal) the line on the left edge of the ruler counts as pixel one, and if the ruler is set to a length of (for example) 200, the line on the right edge of the ruler counts as pixel 200.
In other words if you are measuring something that is, for example 3 pixels wide, you would see the 1 pixel on the left to start the ruler, only one pixel in the middle, and finally one pixel on the right to end the ruler.
This is done in this way to allow the ruler to be moved to the two edges of your screen and to have those pixels on the edges counted.
Would it be possible that the two pixels you seem to be shy are the two 1 pixel widths on either end of the ruler?
ref: www.arulerforwindows.com
I'm chalking this up to browser weirdness. Taking screenshots of pages and comparing them in photoshop, they line up perfectly.
Related
I was looking at codes(via inspector mode)for the at the Airbnb mobile app version.Screenshot with extra pixel indicated in red marker As shown in the screenshot, there are extra pixels added to the image, image header("Online Experiences"), and description ("Unique activities... hosts."). I'm not a coder, so maybe I'm not understanding it correctly. From the development perspective, could someone explain why the blue block is defined in such manner?
From UX/UI perspective, designers would usually define the padding(green blocks), but don't think these extra pixels (indicated in red marker) are defined by designers.
If you look at the margin of the blue box, then you can see, that it's centered and the margin on the right has the same size as on the left side. So the responsiveness of that div box is correct.
The "extra pixels" part I think is because the picture can't fit your screen and the picture's attributes are set to keep it's x-y side ratio, plus I think there is a min-height and a width: 100% attribute for that picture.
Ideally the picture can accomplish both min-height and width: 100% css rules, but since the width of the picture is relatively so big comparing to your screen's width, the browser can't accomplish the width: 100% rule and this is how you see the result.
I would like to find out how to present a banner or logo on a responsive design but I can't find a question that is not flagged as bad or likely to be closed. I've tried numerous ways of phrasing the question and none of them are liked. So, I have no idea how to even present this question or even where to begin to look for the answer or how to ask the question. PLEASE, PLEASE give me an idea of how to word this so someone will see my question. I've tried web searches but nothing addresses the issue and I cannot even figure out how to work it.
In case someone sees this, what I am doing is taking a site that was not responsive and had a banner that was 1100 px wide by 110px in height. The trend seems to be to move away from such banners and use logos that are square or round instead or to use text for branding. If I just reduced the size of the banner to 500px wide then the height would proportionally decrease to only 40 or 50px if a percent value was used. That clearly won't look good on a small screen.
Also, if I reduced the image to a more square dimension the image isn't actually resizing by percent values when the CSS background-image style is used instead of an img tag surrounded by div tags. I haven't found a way to control alignment and size using percent values on the background-image property of a container. I could tell my client that we shouldn't use a wide banner in a responsive design but I don't know if that means I am missing an option.
A different image seems to be required on smaller displays using media queries. Can alignment and resizing as percent values be used with the background image CSS style or should different images be served using the img tag?
Lastly, on a high pixel density display tablet or even smartphone serve a large image due to the number of pixels wide being greater than 900px or 1000px? With high-density displays, it seems that even a smartphone could have a width greater than 1000px but that may not look right.
this will size it:
.img-class {
background-image: url('path/myImage.png');
background-size: 200px 200px;
}
first value is width, second value is height, you can also use %, or to scale the whole thing use a single value like for example: background-size: 80%;
A different image seems to be required on smaller displays using media
queries. Can alignment and resizing as percent values be used with the
background image CSS style or should different images be served using
the img tag?
Yes as long as you scale it down and not up, or it blurs out.
Lastly, on a high pixel density display tablet or even smartphone
serve a large image due to the number of pixels wide being greater
than 900px or 1000px? With high-density displays, it seems that even a
smartphone could have a width greater than 1000px but that may not
look right.
Just be sure your images are 'retina ready' and that's all, meaning if you want to place on your website a 200x200 px image, create it 400x400 px instead, then using css you force it to always be 200x200, so it will read a 400x400 and resize it to 200x200 making it not blurred on mobile.
Side note: If you have graphic images and not photographs, i recommend you using svg (vector images) now supported on all browsers, that are scalable so retina ready by default let's say, and way smaller in size.
I am trying to 3d transform a floor tile pattern in flash, But when i do so the tile lines become dotted (dashed) here is the screenshot
The best solution is as LDMS said, thickening your lines (even if it is an image), or if you can, enable Anti Aliasing (which i think is what smoothing does)
As for why this happens, this is due to texture sampling. You will probably see that if you move your camera around the gaps/dots in the lines move. Now without going into too many details these are the basics:
Close to your camera the amount of pixel from your image that fit into a pixel on your screen will be less then 1, meaning that one pixel from your image is bigger then an actual pixel on your screen, so it will just display that color from the image. But what happens, if your image is so far away that multiple pixels from your image are so small that they combined fit into one pixel on your screen? With smoothing and Anti Aliasing you run an algorithm to combine colors and get en estimated result. But if you do not do this it will have to pick a color, say we have 2 pixels of black (your line) and 2 of the red background for the same pixel on screen, it will (randomly or based on some variable) pick a color and display it without regard of the other colors.
This is why you sometimes see your line and sometimes the background.
I can reproduce this issue in both Chrome and Firefox.
This is SVG image in question:
https://www.iconfinder.com/icons/284101/editor_hambuger_list_menu_view_icon#size=512
And this is the minimum code which reproduces the problem:
<img
style="width: 15px; vertical-align: middle;"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxMnB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMiAxMiIgd2lkdGg9IjIycHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZWZzPjxwYXRoIGQ9Ik0wLjUwMDgzNjEzNCwwIEMwLjIyNDIzMTk3NSwwIDAsMC4yMTQwMzUwMzQgMCwwLjUwNDY4NDQ0OCBMMCwxLjQ5NTMxNTU1IEMwLDEuNzc0MDQ1MDggMC4yMTc3NDE3MjgsMiAwLjUwMDgzNjEzNCwyIEwyMS40OTkxNjM5LDIgQzIxLjc3NTc2OCwyIDIyLDEuNzg1OTY0OTcgMjIsMS40OTUzMTU1NSBMMjIsMC41MDQ2ODQ0NDggQzIyLDAuMjI1OTU0OTI0IDIxLjc4MjI1ODMsMCAyMS40OTkxNjM5LDAgTDAuNTAwODM2MTM0LDAgWiBNMC41MDA4MzYxMzQsNSBDMC4yMjQyMzE5NzUsNSAwLDUuMjE0MDM1MDMgMCw1LjUwNDY4NDQ1IEwwLDYuNDk1MzE1NTUgQzAsNi43NzQwNDUwOCAwLjIxNzc0MTcyOCw3IDAuNTAwODM2MTM0LDcgTDIxLjQ5OTE2MzksNyBDMjEuNzc1NzY4LDcgMjIsNi43ODU5NjQ5NyAyMiw2LjQ5NTMxNTU1IEwyMiw1LjUwNDY4NDQ1IEMyMiw1LjIyNTk1NDkyIDIxLjc4MjI1ODMsNSAyMS40OTkxNjM5LDUgTDAuNTAwODM2MTM0LDUgWiBNMC41MDA4MzYxMzQsMTAgQzAuMjI0MjMxOTc1LDEwIDAsMTAuMjE0MDM1IDAsMTAuNTA0Njg0NCBMMCwxMS40OTUzMTU2IEMwLDExLjc3NDA0NTEgMC4yMTc3NDE3MjgsMTIgMC41MDA4MzYxMzQsMTIgTDIxLjQ5OTE2MzksMTIgQzIxLjc3NTc2OCwxMiAyMiwxMS43ODU5NjUgMjIsMTEuNDk1MzE1NiBMMjIsMTAuNTA0Njg0NCBDMjIsMTAuMjI1OTU0OSAyMS43ODIyNTgzLDEwIDIxLjQ5OTE2MzksMTAgTDAuNTAwODM2MTM0LDEwIFoiIGlkPSJwYXRoLTEiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0ibWl1IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgaWQ9ImVkaXRvcl9saXN0X3ZpZXdfaGFtYnVnZXJfbWVudV9nbHlwaCI+PHVzZSBmaWxsPSIjMDAwMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48dXNlIGZpbGw9Im5vbmUiIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L2c+PC9nPjwvc3ZnPg==" /> Menu
You can play with it and see it in action at:
http://jsfiddle.net/adamovic/s3dZ2/1/
Anyone has an idea why this Scalable Vector Graphics gets resize where lines becomes unproportional and also any idea how to fix this good?
BTW, in production I'm resizing this image to 1EM, to appear next to text "Menu" but to reproduce this issue it is the simplest way.
UPDATE: Updated example from 11.5px to 15px, reproducing same issue.
In production I'm using width: 1EM; or something like that for responsive design, any idea how to responsive scale this image so that lines are proportional?
Maybe some fix like min-width and max-width could work, but I couldn't make it work ever with some mozilla image specific commands.
At 11.5 pixels in with the height of the image should be 6.3 pixels. Of those, 1.1 pixels should be the height of each black line, and 1.5 pixels the height of each white line. And on top of that the browser resizes the picture to 6 pixels height.
If the image had 1 pixels for each line (both white and black) and the size multiple of 5, it would look great.
Later edit
In the given picture a black line is 16.67% of image size(all lines reprezent 50%) and a white line is 25%. So... for a height of 8 pixels the a black line has a height of 1.3 pixels and a a white line 2 pixels. On paper the smallest image that looks good and unaltered has 2 pixels for black line and 3 for the white line, meaning an image with 12 pixels height.
Basically if one pixel has to share both white and black lines the browser will create a shade of gray that is the average of the two as it can only display one color.
EX: a pixel has to show 0.67 white(#FFFFFF or 255,255,255) and 0.33(#000000 or 0,0,0) black:
0.67*255 + 0.33*0 = 170.85 (aproximatly 171) so the color displayed is (#ABABAB or 171,171,171)
Theoretically, SVG image is infinitely scalable. In practice however, the screen has limited resolutions, so if you scale an SVG too small, it won't look very good due to pixelations.
To avoid this problem, you need to set a minimum size for the icon at the point where it still looks good. High quality small-sized vector iconsets would usually be designed to have in such a way that their major lines lie in a grid of integer proportion for many different sizes, so that they will look crisp on different sizes; some icon designers might also provide a separately-drawn raster icons for low resolutions.
Inferring from the size declaration in the SVG, the icon you linked seems to have been designed for 22x12 or multiples of it.
On small sizes, you probably should also use media-queries so that small icons are scaled in a step-ladder of sizes with sizes that are known to look good rather than strictly depending on the viewport size.
In Firefox and Chrome and Safari (latest all, on Mac 10.6.8) if I use a browser's developer tools to reduce the font size of the following span, I can watch the height (line-height) of the paragraph increase by a few pixels :
<p style="line-height: 40px; background: red;">
Some sample text some sample text.
<span style="font-size: 100%;">As this span's text size gets smaller, the paragraph gets taller.</span>
</p>
Can someone explain why this happens?
Ok, so I posted your sample html and inline css into js fiddle, here's the link:
http://jsfiddle.net/sauhL/
I then used firebug to change font-size:100%; down to 99, 98 and so forth. You are right, when you go down 1 by 1 for the font-size value, the red box gets a little bigger for a second.
The problem is that you have line-height predetermined as 40px, which causes what you called a 'bug' because line-height applied to different font sizes leads to different height renderings, and in the case of js fiddle, the linebreak is also a factor in the 'rendering' of the red box's height. After going down several points in %, there's no more expanding of the red box but rather a diminishing of size.
This is easily fixed by applying line-height:100% to the span which normalizes the height and makes sure there's no odd increases. You can expect these kinds of 'bugs' or anomalies when mixing fixed values (say 40px for example) with percentual values (100% or whatever).
Hope this solves your question