Re: css3 background

I have to say, IE 9 really does have the best implementation of 'dotted' and 'dashed'. It really blows Webkit and Gecko out of the water when it comes to the consistent roundness of the dots and how lines join at the corners and around curves (I don't recall off hand how Opera fares).

When you say, "Dashed lengths are twice the width", I'm curious: is that as measured along the outside of the border, along the inside, or down the middle (going around corners and curves, those would yield different results)? And do you center the dash on each corner when possible? 

On Oct 19, 2011, at 12:12 PM, Brian Manthos <brianman@microsoft.com> wrote:

> Francis Boumphrey:
>> Various browsers use various paradigms for transitions between
>> border-styles in rounded-borders - particularly with dashed and
>> dotted. The correct form shold be spelt out.
> 
> The rendering requirements for conformance of styles is very broad.  Observe the descriptions:
> http://www.w3.org/TR/css3-background/#the-border-style
> 
> 
> Speaking for IE ...
> 
> IE9 retains historical behavior of making the dashed corner joins aesthetically appealing when possible, carrying that over to the new rounded scenarios.  Dashed lengths are twice the width.  Space between dashes is generally equal to the border width rather than double it.  I say generally because that space is expanded slightly when there's extra slack that isn't large enough to allow an additional dash to be added.  In contrast, the example rendering in Figure 5 shows a double-width spacing alternative and doesn't "make the corners look good" which I think is significantly less visual appealing.
> 
> IE's dotted rendering always produces circles -- not ellipses, not rectangles, not heart shapes in the corners.  When positioning dots, the spacing of same-sized dots starts the same as the diameter of the dots and is grown to distribute the dots within the available space; spacing between dots is consistent between dots along a non-rounded sides and rounded sides for consistent thickness borders.  IE9 attempts to place corner dots first and position middle dots second; similar to the dashed respect for corner aesthetics.  IE9 introduces two-tone dots in some non-rounded and rounded scenarios, but intentionally avoids split-colored dots when it would produce distortion or other undesirable effects.  To my knowledge, IE remains the only browser that places dots along the curve of a rounded border (introduced in IE9 Preview 1 in March 2010).  Further, attention was paid during IE9 development to producing renderings for mixed thickness rounded borders with dotted style; in such cases the placement and spacing between dots is more complicated.
> 
> Note that for dotted style, dashed style, and rounding via border-radius, IE9 has special behavior for small thicknesses (1px) and small radii (< 3px or so) that relax some of the requirements (such as dash corner placements) in the interest of significant performance gains.
> 
> While we're on the topic, IE9 branched from prior releases in another way:  Inset and Outset renderings were changed to align better with the sample renderings in the specification.  Previously they looked more like Groove and Ridge.  While this change wasn't strictly required for conformance (to my knowledge), we felt it was the right choice for IE9+ document modes.
> 
> 
> There are some improvements in IE10 for rendering quality in some extreme edge cases as well as some performance improvements, but fundamentally the algorithm is the same as in IE9.
> 
> 
> 
> 
> Getting back to your original question...
> 
> Before transition consistency even becomes possible the idle state rendering would need to be made much more consistent across browsers.
> 
> Nonetheless, can you elaborate on what specific aspect(s) of transitions relative to border styles you find particularly troubling?  Maybe a narrow portion of the overall problem can be solved easily and could address those concerns.
>

Received on Thursday, 20 October 2011 04:29:55 UTC