2

Seems that the HTML/CSS engine rounds values to the nearest whole px unit. Would be neat to have sizing to non-discrete values (floats).

EDIT: After closer observation (at least in Chrome), yes, the engine rounds widths/height to the nearest physical pixel. If you zoom in, then there are more physical pixels to alias to and therefore it is possible to render things closer to their specified decimal sizes. For proof, see https://jsfiddle.net/yu55vk1p/1. At first you see the div with size 0.25 is rendered as if it has width 0px. The last three divs are rendered as if they have width 1px. After zooming in, then they are rendered with differing sizes.

EDIT: After realizing what's happening, I guess my real question is "can we have anti-aliasing". Seems like the answer is no (at least not by default).

After further investigation, trying to apply anti-aliasing using CSS transform does apply anti-aliasing, but it applies anti-aliasing to content who's original 2D width/height is still aliased to the physical pixels. For example, compare the two example:

  1. https://jsfiddle.net/yu55vk1p/2
  2. https://jsfiddle.net/yu55vk1p/3

What you'll notice is that when the transform translate is 1.5px, the three visible divs are fuzzy because they are half-way between two pixels in the 3D space (physical pixels?). But, you'll also notice that the first two divs are still not visible, and the last three divs are the same size and equally fuzzy, which is a strong indicator that the 2-dimensional rendering is aliased to the physical pixels, converted to a texture, then anti-aliased after that.

So, the anti-aliasing that people say to enable with transforms doesn't really help the 2D raster that seems to happen first.

Can we have 2D rasterization before the texture is sent to the 3D rendering?

trusktr
  • 44,284
  • 53
  • 191
  • 263
  • 2
    What does a fraction of a pixel look like? – Paulie_D Oct 10 '16 at 17:33
  • It does allow floats... Here is a [jsfiddle](https://jsfiddle.net/7jgxjyuw/) with 22.4px wide div, checking the dev tools shows the calculated width at 22.391 for some reason.. at least on my screen – Jarod Moser Oct 10 '16 at 17:36
  • @Paulie_D in terms of width it looks like a vertical stack of pixels where half the pixels belong to the left element and half the pixels belong to the right. – kpie Oct 10 '16 at 17:36
  • @Paulie_D - the same as any other anti-aliased one? – enhzflep Oct 10 '16 at 17:38
  • are you referring to something like this - http://codepen.io/nagasai/pen/pELXmZ (Note: zoom to 300% to see difference) – Naga Sai A Oct 10 '16 at 17:40
  • @NagaSaiA Interesting! In that case, it does appear to be half a pixel. But in some other tests I was running, not the case. In the following fiddle, the divs appear to be rendered either 0px wide or 1px wide after rounding: https://jsfiddle.net/yu55vk1p – trusktr Oct 11 '16 at 00:08
  • @NagaSaiA Hmmm, after zooming in I see they are rendered. Is it because there's no anti-aliasing? – trusktr Oct 11 '16 at 00:09
  • The answer seems to be (at least in Chrome), that yes, it is supported, but only apparent when zooming in so that pixels are bigger than physical pixels, otherwise the subpixels are aliased to the physical pixels. For example, in this fiddle (https://jsfiddle.net/yu55vk1p/1) the first two pixesl are invisible because they are drawn as zero-width/height, and the three visible ones are drawn at one pixel width/height. When you zoom in, then they start being rendered at their differing sizes. – trusktr Oct 11 '16 at 00:25
  • Updated my question (sorry it's a little messy, but I think it's clear what I'm asking for now). – trusktr Oct 11 '16 at 00:52

2 Answers2

1

John Resig, creator of Jquery had written this article about sub pixel that might interest you.

Also there's been a similar question on stack overflow before that might give insight.

Community
  • 1
  • 1
Coding Tumbleweed
  • 122
  • 8
-3

There are a variety of measurements that you can use to define element size with css.

There is a complete table here:: https://www.tutorialspoint.com/css/css_measurement_units.htm

Unit    Description/Example
%   Defines a measurement as a percentage relative to another value, typically an enclosing element.    p {font-size: 16pt; line-height: 125%;}
cm  Defines a measurement in centimeters.   div {margin-bottom: 2cm;}
em  A relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each "em" unit would be 12pt; thus, 2em would be 24pt.    p {letter-spacing: 7em;}
ex  This value defines a measurement relative to a font's x-height. The x-height is determined by the height of the font's lowercase letter x.  p {font-size: 24pt; line-height: 3ex;}
in  Defines a measurement in inches.    p {word-spacing: .15in;}
mm  Defines a measurement in millimeters.   p {word-spacing: 15mm;}
pc  Defines a measurement in picas. A pica is equivalent to 12 points; thus, there are 6 picas per inch.    p {font-size: 20pc;}
pt  Defines a measurement in points. A point is defined as 1/72nd of an inch.   body {font-size: 18pt;}
px  Defines a measurement in screen pixels. p {padding: 25px;}
vh  1% of viewport height.  h2 { font-size: 3.0vh; }
vw  1% of viewport width    h1 { font-size: 5.9vw; }
vmin    1vw or 1vh, whichever is smaller    p { font-size: 2vmin;}
kpie
  • 9,588
  • 5
  • 28
  • 50