Skip to content

Commit 8463087

Browse files
SebastianZSebastianZ
committed
[css-borders-4][editorial] Moved logical border properties from CSS Logical 1 to CSS Borders 4
1 parent 35c34ef commit 8463087

File tree

1 file changed

+221
-3
lines changed

1 file changed

+221
-3
lines changed

‎css-borders-4/Overview.bs‎

Lines changed: 221 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,203 @@ Introduction</h2>
3636
<h2 id="borders">
3737
Borders</h2>
3838

39+
<h3 id="border-properties">
40+
Logical Borders</h3>
41+
42+
<h4 id="border-width">
43+
Logical Border Widths:
44+
the 'border-block-start-width', 'border-block-end-width', 'border-inline-start-width', 'border-inline-end-width' properties and 'border-block-width' and 'border-inline-width' shorthands</h4>
45+
46+
<pre class="propdef">
47+
Name: border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width
48+
Value: <<'border-top-width'>>
49+
Initial: medium
50+
Applies to: Same as 'border-top-width'
51+
Inherited: no
52+
Logical property group: border-width
53+
Percentages: n/a
54+
Computed value: Same as corresponding 'border-*-width' properties
55+
Animation type: by computed value type
56+
</pre>
57+
58+
These properties correspond to the
59+
'border-top-width', 'border-bottom-width', 'border-left-width', and 'border-right-width' properties.
60+
The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
61+
62+
<pre class="propdef shorthand">
63+
Name: border-block-width, border-inline-width
64+
Value: <<'border-top-width'>>{1,2}
65+
</pre>
66+
67+
These two <a>shorthand properties</a> set the
68+
'border-block-start-width' &amp; 'border-block-end-width'
69+
and
70+
'border-inline-start-width' &amp; 'border-inline-end-width',
71+
respectively.
72+
The first value represents the <a>start</a> edge width,
73+
and the second value represents the <a>end</a> edge width.
74+
If only one value is given, it applies to both the <a>start</a> and <a>end</a> edges.
75+
76+
<h4 id="border-style">
77+
Logical Border Styles:
78+
the 'border-block-start-style', 'border-block-end-style', 'border-inline-start-style', 'border-inline-end-style' properties and 'border-block-style' and 'border-inline-style' shorthands</h4>
79+
80+
<pre class="propdef">
81+
Name: border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style
82+
Value: <<'border-top-style'>>
83+
Initial: none
84+
Applies to: Same as 'border-top-style'
85+
Inherited: no
86+
Logical property group: border-style
87+
Percentages: n/a
88+
Computed value: Same as corresponding 'border-*-style' properties
89+
Animation type: discrete
90+
</pre>
91+
92+
These properties correspond to the
93+
'border-top-style', 'border-bottom-style', 'border-left-style', and 'border-right-style' properties.
94+
The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
95+
96+
<pre class="propdef shorthand">
97+
Name: border-block-style, border-inline-style
98+
Value: <<'border-top-style'>>{1,2}
99+
</pre>
100+
101+
These two <a>shorthand properties</a> set the
102+
'border-block-start-style' &amp; 'border-block-end-style'
103+
and
104+
'border-inline-start-style' &amp; 'border-inline-end-style',
105+
respectively.
106+
The first value represents the <a>start</a> edge style,
107+
and the second value represents the <a>end</a> edge style.
108+
If only one value is given, it applies to both the <a>start</a> and <a>end</a> edges.
109+
110+
<h4 id="border-color">
111+
Logical Border Colors:
112+
the 'border-block-start-color', 'border-block-end-color', 'border-inline-start-color', 'border-inline-end-color' properties and 'border-block-color' and 'border-inline-color' shorthands</h4>
113+
114+
<pre class="propdef">
115+
Name: border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color
116+
Value: <<'border-top-color'>>
117+
Initial: currentcolor
118+
Applies to: Same as 'border-top-color'
119+
Inherited: no
120+
Logical property group: border-color
121+
Percentages: n/a
122+
Computed value: Same as corresponding 'border-*-color' properties
123+
Animation type: by computed value type
124+
</pre>
125+
126+
These properties correspond to the
127+
'border-top-color', 'border-bottom-color', 'border-left-color', and 'border-right-color' properties.
128+
The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
129+
130+
<pre class="propdef shorthand">
131+
Name: border-block-color, border-inline-color
132+
Value: <<'border-top-color'>>{1,2}
133+
</pre>
134+
135+
These two <a>shorthand properties</a> set the
136+
'border-block-start-color' &amp; 'border-block-end-color'
137+
and
138+
'border-inline-start-color' &amp; 'border-inline-end-color',
139+
respectively.
140+
The first value represents the <a>start</a> edge color,
141+
and the second value represents the <a>end</a> edge color.
142+
If only one value is given, it applies to both the <a>start</a> and <a>end</a> edges.
143+
144+
<h4 id="border-shorthands">
145+
Logical Border Shorthands:
146+
the 'border-block-start', 'border-block-end', 'border-inline-start', 'border-inline-end' properties and 'border-block' and 'border-inline' shorthands</h4>
147+
148+
<pre class="propdef shorthand">
149+
Name: border-block-start, border-block-end, border-inline-start, border-inline-end
150+
Value: <<'border-top-width'>> || <<'border-top-style'>> || <<color>>
151+
</pre>
152+
153+
These properties correspond to the
154+
'border-top', 'border-bottom', 'border-left', and 'border-right' properties.
155+
The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
156+
157+
<pre class="propdef shorthand">
158+
Name: border-block, border-inline
159+
Value: <<'border-block-start'>>
160+
</pre>
161+
162+
These two <a>shorthand properties</a> set the
163+
'border-block-start' &amp; 'border-block-end'
164+
or
165+
'border-inline-start' &amp; 'border-inline-end',
166+
respectively,
167+
both to the same style.
168+
169+
<!-- intentionally cannot set two sides independently;
170+
see discussion in https://github.com/w3c/csswg-drafts/issues/3519 -->
171+
172+
<h3 id="logical-shorthand-keyword">
173+
Four-Directional Shorthand Properties: the 'border-width', 'border-style', and 'border-color' shorthands</h3>
174+
175+
The shorthand properties for borders
176+
set values for physical properties by default.
177+
But authors can specify
178+
the <dfn value for="border-color, border-style, border-width">logical</dfn> keyword
179+
at the beginning of the property value
180+
to indicate that the values map to the Logical properties instead of the physical ones.
181+
39182
<p class="issue">
40-
Should logical border properties be moved from
41-
<a href="https://www.w3.org/TR/css-logical-1/#border-properties">CSS Logical</a>
42-
to here?
183+
The proposed syntax for this feature is <a href="https://github.com/w3c/csswg-drafts/issues/1282">under discussion</a>
184+
and is almost guaranteed to change from what is described here.
185+
This section remains in the draft to promote discussion of alternatives,
186+
to document the affected properties,
187+
and to specify the expected impact on the interpretation
188+
of whatever syntactic switch is ultimately chosen.
189+
190+
The following [[!CSS2]] border shorthand properties
191+
accept the ''margin/logical'' keyword:
192+
<ul>
193+
<li>'border-width'
194+
<li>'border-style'
195+
<li>'border-color'
196+
</ul>
197+
198+
The syntax for these properties is effectively changed by replacing
199+
<pre class="prod">&lt;<var>value-type</var>&gt;{1,4}</pre>
200+
201+
with
202+
<pre class="prod">logical? &lt;<var>value-type</var>&gt;{1,4}</pre>
203+
204+
When the ''margin/logical'' keyword is present in the value,
205+
the values that follow are assigned to its Logical longhands
206+
as follows:
207+
208+
<ul>
209+
<li>If only one value is set,
210+
the value applies to all four Logical <a>longhands</a>.
211+
<li>If two values are set, the first is for block-start and block-end,
212+
the second is for inline-start and inline-end.
213+
<li>If three values are set, the first is for block-start,
214+
the second is for inline-start and inline-end,
215+
and the third is for block-end.
216+
<li>If four values are set, they apply to
217+
the block-start, inline-start, block-end, and inline-end sides
218+
in that order.
219+
</ul>
220+
221+
<div class="example">
222+
In the following example, the two rules are equivalent:
223+
224+
<pre class="lang-css">
225+
blockquote {
226+
border: logical 1em 2em 3em 4em;
227+
}
228+
blockquote {
229+
border-block-start: 1em;
230+
border-inline-start: 2em;
231+
border-block-end: 3em;
232+
border-inline-end: 4em;
233+
}
234+
</pre>
235+
</div>
43236

44237
<h3 id="the-border-color">
45238
Line Colors: the 'border-color' properties</h3>
@@ -99,6 +292,29 @@ Line Colors: the 'border-color' properties</h3>
99292
<h2 id="corners">
100293
Corners</h2>
101294

295+
<h3 id="border-radius-properties">
296+
Logical Corner Rounding:
297+
the 'border-start-start-radius', 'border-start-end-radius', 'border-end-start-radius', 'border-end-end-radius' properties</h3>
298+
299+
<pre class="propdef">
300+
Name: border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius
301+
Value: <<'border-top-left-radius'>>
302+
Initial: Same as 'border-top-left-radius'
303+
Applies to: Same as 'border-top-left-radius'
304+
Inherited: no
305+
Logical property group: border-radius
306+
Percentages: Same as 'border-top-left-radius'
307+
Computed value: Same as corresponding physical 'border-*-radius' properties
308+
Animation type: by computed value type
309+
</pre>
310+
311+
These properties correspond to the
312+
'border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius', and 'border-bottom-right-radius' properties.
313+
The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation',
314+
with the first start/end giving the block axis side,
315+
and the second the inline-axis side
316+
(i.e. patterned as 'border-<var>block</var>-<var>inline</var>-radius').
317+
102318
<h3 id="corner-sizing">
103319
Corner Sizing: the 'border-radius' and 'border-*-radius' shorthand properties</h3>
104320

@@ -817,6 +1033,8 @@ Additions since [[CSS3BG]]</h3>
8171033
* added 'corner-shape' and related 'corners' shorthand
8181034
* added <a href="#partial-borders">partial borders</a> via 'border-limit' and 'border-*-clip' properties
8191035
* turned 'box-shadow' into a shorthand and added longhands
1036+
* moved logical border properties from [[CSS-LOGICAL-1]] to this spec.
1037+
and called them "logical" instead of "flow-relative" like in other specs
8201038

8211039
<h2 id="acknowledgments">
8221040
Acknowledgments</h2>

0 commit comments

Comments
 (0)