Re: [css3-background] More options for dashed and dotted borders

On Thu, Jun 9, 2016 at 6:06 AM, Gérard Talbot <www-style@gtalbot.org> wrote:

> Le 2016-06-08 17:20, fantasai a écrit :
>
>> On 06/08/2016 05:17 AM, Praveen Puglia wrote:
>>
>
> 2. Circular dots for dotted borders. Way to create
>>> ●●●●●●●●●●●●●●●●●●●●●
>>> Instead of just this...
>>> ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
>>>
>>
>> This is actually a browser bug... The CSS spec requires round dots. :)
>>   https://www.w3.org/TR/css3-background/#the-border-style
>>
>> ~fantasai
>>
>
>
I never knew that the spec actually required the dots to be circular.
Thanks for this. I also realized that on Firefox 46, I do see circular dots
for dotted border. However it starts with a square dot on the corners. A
funny side effect of this is that for some borders, it creates this glyph "♥".
Example -

.box {
    width: 40px;
    height: 40px;
    border: 20px dotted;
}


> Possible tests:
>
>
> http://test.csswg.org/suites/css2.1/nightly-unstable/html4/border-bottom-style-003.htm
>
> https://www.w3.org/Style/CSS/Test/CSS1/20070302/sec5517.htm
>
> - - - - -
>

This reminds me that specs are just recommendation and not hard coded rules
that browser vendors must follow and pass every single thing.


>
> Chromium bug report:
> Issue 349985: Improve dashed/dotted line drawing
> https://bugs.chromium.org/p/chromium/issues/detail?id=349985
>
> "
> Technically speaking, according to the CSS spec, we should be drawing
> round dots for dotted lines (borders, text decoration) but instead we draw
> squares.
> "
> https://bugs.chromium.org/p/chromium/issues/detail?id=349985#c1
>
> - - - - -
>
> Webkit bug report:
> Bug 25737: Dotted borders look different on Safari, Chrome and Firefox
> https://bugs.webkit.org/show_bug.cgi?id=25737
>
> ["dotted" should be "a series of round dots"]
> https://bugs.webkit.org/show_bug.cgi?id=25737#c4
>
> [Dotted line means round "dots". It's not a dashed line as rendered in
> WebKit.]
> https://bugs.webkit.org/show_bug.cgi?id=25737#c6
>
> Gérard
>

I am happy to see some of those bugs in assigned state. Hopefully it will
get fixed sometime in future.

These all talk about the dotted border but it would be of great help if we
as developers got chance to tweak the distance between two dots/dashes
using some property. I, myself, have come across this requirement every
time I have used dashed/dotted borders and I get to see questions about
this ability on StackOverflow time to time. We all end up using the
gradients hack to do this but that isn't robust.

I( and probably a  lot like me ) would definitely love something like
*border-separation *property( I mentioned in my first mail ) to give us
this liberty.

-- 
Cheers!
Praveen ◉ praveenpuglia.com ◉ @praveenpuglia
<https://twitter.com/praveenpuglia>