HN Explorer

4 comments

[ 5.0 ms ] story [ 22.2 ms ] thread
davebees
The crispEdges circle doesn't look good – but it's certainly not “blurry”.
flipstewart
Touché. It's just a mess. Thanks for putting that out, I'll update the tip.
chrisdroukas
Interesting.

If I'm reading this right, the result shouldn't be surprising (though maybe inappropriately named?). Consider:

  {shape-rendering: crisp-edges;}
  Indicates that the user agent should attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels.
Would a circle not be a graphic you'd want to be geometrically precise, making {shape-rendering: geometric-precision;} the most appropriate choice?
flipstewart
Absolutely. And maybe the edges in my first picture are crisper. I guess it's all a matter of how you look at it.

But I found the names a little counter-intuitive.