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

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

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

Praveen Puglia
Currently, when we create a dotted or dashed border, the only things we can modify are the width of the border and the color of it. There is no way we can control what the distance should be between dots or dashes. It all depends on the browser vendors and how they render them.

It is, however, often necessary to tweak those to get a better suited borders. Example:

1. Varied distances between dashes/dots

Instead of a border like this...
- - - - - - - - - - - - - - - - -
a border like this...
-  -  -  -  -  -  -  -  -  -  -  -
or 
-    -    -    -    -    -    -    -

2. Circular dots for dotted borders. Way to create

Instead of just this...
■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
 

Right now, the only way to accomplish these is to use border-image which isn't really flexible for changing things on the fly. Each style would need a new image to be made. Otherwise use gradients to emulate these which doesn't take part into box-model calculations as border does.

How about introducing new properties/values to address these? For example

border-separation : which could take a <length> value and adjust the distance between two dashes/dots.

A new border-style value: dotted-round or dotted-circle or a better name ?

This is probably my first proposal of some sort so please advice me if I need to include more details or format the emails in a different way.

--
Cheers!
Praveen  praveenpuglia.com  @praveenpuglia
Reply | Threaded
Open this post in threaded view
|

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

fantasai
On 06/08/2016 05:17 AM, Praveen Puglia wrote:

> Currently, when we create a dotted or dashed border, the only things we can modify are the width of the border and the color
> of it. There is no way we can control what the distance should be between dots or dashes. It all depends on the browser
> vendors and how they render them.
>
> It is, however, often necessary to tweak those to get a better suited borders. Example:
>
> 1. Varied distances between dashes/dots
>
> Instead of a border like this...
> - - - - - - - - - - - - - - - - -
> a border like this...
> -  -  -  -  -  -  -  -  -  -  -  -
> or
> -    -    -    -    -    -    -    -

There's been some discussion of enabling this in Backgrounds and
Borders Level 4, however nothing concrete has been drafted up yet.
(Additional control over borders hasn't been a high priority.)

> 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

Reply | Threaded
Open this post in threaded view
|

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

Gérard Talbot-2
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


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

- - - - -

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

Reply | Threaded
Open this post in threaded view
|

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

Praveen Puglia

On Thu, Jun 9, 2016 at 6:06 AM, Gérard Talbot <[hidden email]> 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
Reply | Threaded
Open this post in threaded view
|

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

Gérard Talbot-2
Le 2016-06-08 23:20, Praveen Puglia a écrit :

> On Thu, Jun 9, 2016 at 6:06 AM, Gérard Talbot <[hidden email]>
> 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.