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

Le 2016-06-08 23:20, Praveen Puglia a écrit :
> 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.
> 

Browser vendors do have to follow and pass every single 
(required-by-the-spec) tests if they want to claim 100% compliance of a 
CSS spec or CSS module (again for required tests). CSS1 was not 
specifically mentioning "round dots" but CSS2.1 is. Speaking of passing 
tests, both Chrome (v. 6) and Safari (v.5.0.2) implementation reports

https://www.w3.org/Style/CSS/Test/CSS2.1/20100917/reports/implementation-report-Chrome6.0.472.63.data

https://www.w3.org/Style/CSS/Test/CSS2.1/20101001/reports/implementation-report-Safari5.0.2.data

http://www.w3.org/Style/CSS/Test/CSS2.1/20100917/reports/

https://www.w3.org/Style/CSS/Test/CSS2.1/20101001/reports/

claim to pass the border-bottom-style-003 but, in all fairness, this is 
not true. The pass conditions of the border-bottom-style-003 test should 
probably have been more specific by stating explicitly black filled 
circles or something like that.

Gérard

>> 
>> 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.

Received on Thursday, 9 June 2016 05:19:07 UTC