Skip to content

[css-borders-4][editorial] Moved logical border properties from CSS Logical 1 to CSS Borders 4 #9592

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Dec 16, 2023
Merged

[css-borders-4][editorial] Moved logical border properties from CSS Logical 1 to CSS Borders 4 #9592

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8463087
[css-borders-4][editorial] Moved logical border properties from CSS L…
SebastianZ Nov 12, 2023
773d2b5
[css-borders-4] Merged logical with physical border property definitions
SebastianZ Nov 19, 2023
0f9dc00
[css-borders-4] Removed section defining 'logical' keyword
SebastianZ Nov 20, 2023
55486e1
[css-borders-4] Improved formatting
SebastianZ Nov 23, 2023
9d9a533
[css-borders-4] Renamed 'edge' to 'side'
SebastianZ Nov 23, 2023
84c2e48
[css-borders-4][editorial] Removed now incorrect note about flow-rela…
SebastianZ Dec 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
231 changes: 207 additions & 24 deletions css-borders-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,31 +29,31 @@ Introduction</h2>
This module is currently maintained as a diff against
the parts related to borders and box decorations of
CSS Backgrounds and Borders Module Level 3 [[CSS3BG]].
We will fold in the text once it's all formatted up and in CR again,
We will fold in the text once it’s all formatted up and in CR again,
as this will reduce the effort of keeping them in sync
(source diffs will be accurate in reflecting the differences).

<h2 id="borders">
Borders</h2>

<p class="issue">
Should logical border properties be moved from
<a href="https://www.w3.org/TR/css-logical-1/#border-properties">CSS Logical</a>
to here?
<p>The border can either be a predefined style (solid line, double
line, dotted line, pseudo-3D border, etc.) or it can be an image. In
the former case, various properties define the style ('border-style'),
color ('border-color'), and thickness ('border-width') of the border.
Comment on lines +39 to +42
Copy link
Collaborator

@fantasai fantasai Nov 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(This needs rewrapping, but so does the entire css-backgrounds-3 spec, so keeping it corresponding seems fine for now, and we will keep them in sync later after I re-wrap css-backgrounds-3. :) See css-cascade-* for what this looks like, and bin/xcommit.pl for why this is important.)


<h3 id="the-border-color">
<h3 id="border-color" oldids="the-border-color">
Line Colors: the 'border-color' properties</h3>

<pre class=propdef>
Name: border-top-color, border-right-color, border-bottom-color, border-left-color
Value: <<color>> | <<image-1D>>
Initial: currentcolor
Applies to: all elements
Inherited: no
Logical property group: border-color
Percentages: n/a
Computed Value: the computed color and/or a one-dimensional image function
Animation type: see prose
<pre class="propdef">
Name: border-top-color, border-right-color, border-bottom-color, border-left-color, border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color
Value: <<color>> | <<image-1D>>
Initial: currentcolor
Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
Inherited: no
Logical property group: border-color
Percentages: N/A
Computed Value: the computed color and/or a one-dimensional image function
Animation type: see prose
</pre>

<pre class="propdef shorthand">
Expand All @@ -70,13 +70,6 @@ Line Colors: the 'border-color' properties</h3>
The border width at each point
defines the |total width| of the stripes at that point.

'border-color' is a shorthand for the four 'border-*-color' properties.
The four values set the top, right, bottom and left border, respectively.
A missing left is the same as right,
a missing bottom is the same as top,
and a missing right is also the same as top.
This is resolved individually for each list item.

<div class="example">
Using multiple colors for each side:

Expand All @@ -96,11 +89,200 @@ Line Colors: the 'border-color' properties</h3>
<img src="images/multicolor-border-dotted.png" alt="">
</div>

'border-color' is a shorthand for the four 'border-*-color' properties.
The four values set the top, right, bottom and left border, respectively.
A missing left is the same as right,
a missing bottom is the same as top,
and a missing right is also the same as top.
This is resolved individually for each list item.

The [=flow-relative=] properties
'border-block-start-color',
'border-block-end-color',
'border-inline-start-color',
and 'border-inline-end-color'
correspond to the [=physical=] properties
'border-top-color',
'border-bottom-color',
'border-left-color',
and 'border-right-color'.
The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.

<pre class="propdef shorthand">
Name: border-block-color, border-inline-color
Value: <<'border-top-color'>>{1,2}
</pre>

These two <a>shorthand properties</a> set the
'border-block-start-color' &amp; 'border-block-end-color'
and
'border-inline-start-color' &amp; 'border-inline-end-color',
respectively.
The first value represents the <a>start</a> side color,
and the second value represents the <a>end</a> side color.
If only one value is given,
it applies to both the <a>start</a> and <a>end</a> sides.

<h3 id="border-style" oldids="the-border-style">
Line Patterns: the 'border-style' properties</h3>

<pre class="propdef">
Name: border-top-style, border-right-style, border-bottom-style, border-left-style, border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style
Value: <<line-style>>
Initial: none
Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
Inherited: no
Logical property group: border-style
Percentages: N/A
Computed value: specified keyword
Animation type: discrete
</pre>

The [=flow-relative=] properties
'border-block-start-style',
'border-block-end-style',
'border-inline-start-style',
and 'border-inline-end-style'
correspond to the [=physical=] properties
'border-top-style',
'border-bottom-style',
'border-left-style',
and 'border-right-style'.
The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.

<pre class="propdef shorthand">
Name: border-block-style, border-inline-style
Value: <<'border-top-style'>>{1,2}
</pre>

These two <a>shorthand properties</a> set the
'border-block-start-style' &amp; 'border-block-end-style'
and
'border-inline-start-style' &amp; 'border-inline-end-style',
respectively.
The first value represents the <a>start</a> side style,
and the second value represents the <a>end</a> side style.
If only one value is given,
it applies to both the <a>start</a> and <a>end</a> sides.

<h3 id="border-width" oldids="the-border-width">
Line Thickness: the 'border-width' properties</h3>

<pre class="propdef">
Name: border-top-width, border-right-width, border-bottom-width, border-left-width, border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width
Value: <<line-width>>
Initial: medium
Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
Inherited: no
Logical property group: border-width
Percentages: N/A
Computed value: absolute length, [=snapped as a border width=]; zero if the border style is ''border-style/none'' or ''border-style/hidden''
Animation Type: by computed value
</pre>

The [=flow-relative=] properties
'border-block-start-width',
'border-block-end-width',
'border-inline-start-width',
and 'border-inline-end-width'
correspond to the [=physical=] properties
'border-top-width',
'border-bottom-width',
'border-left-width',
and 'border-right-width'.
The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.

<pre class="propdef shorthand">
Name: border-block-width, border-inline-width
Value: <<'border-top-width'>>{1,2}
</pre>

These two <a>shorthand properties</a> set the
'border-block-start-width' &amp; 'border-block-end-width'
and
'border-inline-start-width' &amp; 'border-inline-end-width',
respectively.
The first value represents the <a>start</a> side width,
and the second value represents the <a>end</a> side width.
If only one value is given,
it applies to both the <a>start</a> and <a>end</a> sides.

<h3 id="border-shorthands" oldids="the-border-shorthands">
Border Shorthand Properties</h3>

<pre class="propdef shorthand">
Name: border-top, border-right, border-bottom, border-left, border-block-start, border-block-end, border-inline-start, border-inline-end
Value: <<line-width>> || <<line-style>> || <<color>>
Initial: See individual properties
Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
Inherited: no
Percentages: N/A
Computed value: see individual properties
Animation Type: see individual properties
</pre>

The [=flow-relative=] properties
'border-block-start',
'border-block-end',
'border-inline-start',
and 'border-inline-end'
correspond to the [=physical=] properties
'border-top',
'border-bottom',
'border-left',
and 'border-right'.
The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.

<pre class="propdef shorthand">
Name: border-block, border-inline
Value: <<'border-block-start'>>
</pre>

These two <a>shorthand properties</a> set the
'border-block-start' &amp; 'border-block-end'
or
'border-inline-start' &amp; 'border-inline-end',
respectively,
both to the same style.

<!-- intentionally cannot set two sides independently;
see discussion in https://github.com/w3c/csswg-drafts/issues/3519 -->

<h2 id="corners">
Corners</h2>

<h3 id="border-radius" oldids="the-border-radius">
Corner Sizing: the 'border-*-*-radius' properties</h3>

<pre class=propdef>
Name: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius
Value: <<length-percentage [0,&infin;]>>{1,2}
Initial: 0
Applies to: all elements (but see prose)
Inherited: no
Logical property group: border-radius
Percentages: Refer to corresponding dimension of the <a>border box</a>.
Computed value: pair of computed <<length-percentage>> values
Animation Type: by computed value
</pre>

The [=flow-relative=] properties
'border-start-start-radius',
'border-start-end-radius',
'border-end-start-radius',
and 'border-end-end-radius'
correspond to the [=physical=] properties
'border-top-left-radius',
'border-bottom-left-radius',
'border-top-right-radius',
and 'border-bottom-right-radius'.
The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation',
with the first start/end giving the block axis side,
and the second the inline-axis side
(i.e. patterned as 'border-<var>block</var>-<var>inline</var>-radius').

<h3 id="corner-sizing">
Corner Sizing: the 'border-radius' and 'border-*-radius' shorthand properties</h3>
Corner Sizing Shorthands: the 'border-radius' and 'border-*-radius' shorthand properties</h3>

<h4 id="corner-sizing-side-shorthands">
Sizing The Corners Of One Side:
Expand Down Expand Up @@ -817,6 +999,7 @@ Additions since [[CSS3BG]]</h3>
* added 'corner-shape' and related 'corners' shorthand
* added <a href="#partial-borders">partial borders</a> via 'border-limit' and 'border-*-clip' properties
* turned 'box-shadow' into a shorthand and added longhands
* moved logical border properties from [[CSS-LOGICAL-1]] to this spec.

<h2 id="acknowledgments">
Acknowledgments</h2>
Expand Down