-
Notifications
You must be signed in to change notification settings - Fork 790
Expand file tree
/
Copy pathOverview.bs
More file actions
749 lines (625 loc) · 28.2 KB
/
Overview.bs
File metadata and controls
749 lines (625 loc) · 28.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
<pre class='metadata'>
Title: CSS Logical Properties and Values Level 1
Shortname: css-logical
Level: 1
Status: FPWD
Work Status: Revising
Group: csswg
ED: https://drafts.csswg.org/css-logical/
TR: https://www.w3.org/TR/css-logical/
Editor: Rossen Atanassov, Microsoft, ratan@microsoft.com, w3cid 49885
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
Abstract: This module introduces logical properties and values that provide the author with the ability to control layout through logical, rather than physical, direction and dimension mappings. The module defines logical properties and values for the features defined in [[CSS21]]. These properties are writing-mode relative equivalents of their corresponding physical properties.
Ignored Terms: div, dl, dfn
Ignored Vars: *
Link Defaults: css2 (property) width/height/min-width/min-height/max-width/max-height
</pre>
<pre class="link-defaults">
spec:css-writing-modes-3; type:dfn; text:start
spec:css-writing-modes-3; type:dfn; text:end
</pre>
<h2 id="intro">
Introduction</h2>
Note: See [[!CSS3-WRITING-MODES]] for a proper introduction to writing modes;
this module assumes familiarity with its terminology.
Because different writing systems are written in different directions,
a variety of <a>writing modes</a> exist:
left to right, top to bottom;
right to left, top to bottom;
bottom to top, right to left;
etc.
logical concepts like the “start” of a page or line
map differently to physical concepts like the “top” of a line or “left edge” of a paragraph.
Some aspects of a layout are actually relative to the writing directions,
and thus will vary when the page is translated to a different system;
others are inherently relative to the page's physical orientation.
<div class="example">
For example,
lists, headings, and paragraphs are typically left-aligned in English;
but actually they are start-aligned, because in Arabic the same constructs are right-aligned,
and a multilingual document will need to accommodate both writing systems accordingly.
However the drop shadows on buttons on a page must remain consistent throughout,
so their offset will be chosen based on visual considerations and physical directions,
and not vary by writing system.
</div>
Since CSS was originally designed with only physical coordinates in its controls,
this module introduces text-flow–relative equivalents
so that declarations in a CSS style sheet can be expressed
in <a>flow-relative</a> terms.
It defines the mapping and cascading of equivalent properties,
some new properties and values equivalent to those in CSS2.1,
and the principles used to derive their syntaxes.
Future CSS specifications are expected to incorporate both sets of coordinates
in their property and value definitions,
so this module will not track the introduction of <a>flow-relative</a> variants
of newer CSS features.
<a href="http://www.w3.org/TR/css-writing-modes/">CSS Writing Modes</a>’ <a href="https://www.w3.org/TR/css-writing-modes-3/#abstract-box">Abstract Box Terminology</a> section
defines how to map between flow-relative and physical terms.
This mapping controls the interpretation of flow-relative keywords and properties.
<div class="issue">
<strong>Things That Are Unstable</strong>
Since implementation of parts of this module is effectively required
for shipping an implementation of CSS Writing Modes on the Web
(in order to correctly implement the default HTML styles),
The CSSWG resolved that although the draft is not very stable overall,
the requisite features in
<a href="#directional-keywords"></a> and <a href="#box"></a>
are approved for shipping.
However, there are a number of unstable features in this draft
(which are not required for implementing the HTML default style sheet, incidentally),
and these are:
<ul>
<li><del>The 'float' and 'clear' keywords,
because it is not yet clear what the upcoming 2-dimensional syntax of 'float' will be.</del>
(This has been resolved as of April 2017.)
<li><del>The 'inset-*' properties,
because the name of the prefix is undecided.
(It used to be 'offset-*', but ended up conflicting with another CSS feature.)</del>
(This has been resolved as of June 2017.)
<li>The ''border/logical'' keyword on shorthands,
because the name of the keyword may change or it may be replaced by some other syntactic marker.
<li>The 'background-image-transform' and 'border-image-transform' properties,
because they have, as far as the editor is aware,
received no review from anyone and may or may not be well-designed.
</ul>
Comments and suggestions are welcome on these issues.
Please file them in GitHub, tweet them to @csswg, or send them to www-style@w3.org.
</div>
<h2 id="directional-keywords">
Flow-Relative Values: <css>block-start</css>, <css>block-end</css>, <css>inline-start</css>, <css>inline-end</css></h2>
Properties that accept physical directional keyword values
('top', 'bottom', 'left', or 'right') are redefined
to also accept the appropriate <a>flow-relative</a> directional keywords.
In such cases,
the flow-relative values can be used in place of the corresponding physical values.
For properties that take multiple keywords,
combinations of flow-relative and physical values are not allowed
(unless otherwise specified in a future specification).
Properties can be either 1-dimensional or 2-dimensional.
When contextually constrained to one dimension,
the flow-relative keywords are abbreviated.
<h3 id="caption-side">
Logical Values for the 'caption-side' Property</h3>
<pre class="propdef partial">
Name: caption-side
New values: inline-start | inline-end
</pre>
These two values are added only for implementations that support
''caption-side/left'' and ''caption-side/right'' values for 'caption-side'.
The existing ''caption/top'' and ''caption/bottom'' values are idiosyncratically redefined
as assigning to the <a>block-start</a> and <a>block-end</a> sides of the table, respectively.
The mapping on this property uses the <a>writing mode</a> of the element’s <a>containing block</a>
(that is, the table wrapper box).
<h3 id="float-clear">
Flow-Relative Values for the 'float' and 'clear' Properties</h3>
<pre class="propdef partial">
Name: float, clear
New values: inline-start | inline-end
</pre>
The mapping on these properties uses the <a>writing mode</a> of the element’s <a>containing block</a>.
Note: These properties are 1-dimensional in CSS2,
but are planned to be expanded to two dimensions,
and therefore are given unabbreviated <a>flow-relative</a> keywords.
<h3 id="text-align">
Flow-Relative Values for the 'text-align' Property</h3>
<pre class="propdef partial">
Name: text-align
New values: start | end
</pre>
These values are normatively defined in [[!CSS3TEXT]].
<h3 id="resize">
Flow-Relative Values for the 'resize' Property</h3>
<pre class="propdef partial">
Name: resize
New values: block | inline
</pre>
<h2 id="page">
Flow-Relative Page Classifications</h2>
In CSS, all pages are classified by user agents as either left pages or right pages. [[!CSS21]]
Which page is first in a spread, however,
depends on whether the page progression is left-to-right or right-to-left.
To allow control of page breaking to the page
that is on the earlier or later side of a spread,
rather than to the left or right side of a spread,
this module introduces the following additional keywords
for the 'page-break-after' and 'page-break-before' properties [[!CSS21]]:
<dl dfn-type="value" dfn-for="logical-page">
<dt><dfn>recto</dfn>
<dd>
Equivalent to 'right' in left-to-right page progressions
and 'left' in right-to-left page progressions.
<dt><dfn>verso</dfn>
<dd>
Equivalent to 'left' in left-to-right page progressions
and 'right' in right-to-left page progressions.
</dl>
These values are further defined in [[!CSS3-BREAK]].
Although authors typically place page numbers using physical placements,
the contents of headers often follows conventions depending
on which page in the spread is earlier.
Therefore the following flow-relative <a href="https://www.w3.org/TR/CSS21/page.html#page-selectors">page selectors</a>
are also added to support flow-relative page selection:
<dl dfn-type="value" dfn-for="logical-page-selector">
<dt><dfn>:recto</dfn>
<dd>
Equivalent to ':right' in left-to-right page progressions
and ':left' in right-to-left page progressions.
<dt><dfn>:verso</dfn>
<dd>
Equivalent to ':left' in left-to-right page progressions
and ':right' in right-to-left page progressions.
</dl>
The flow-relative page selectors have specificity equal to
the ':left' and ':right' page selectors.
<h2 id="box">
Flow-Relative Box Model Properties</h2>
This specification introduces new CSS properties
that are flow-relative equivalents
of physical box model properties.
The specified values of these properties are separate from
the specified values of the parallel physical properties,
but the flow-relative and physical properties share computed values.
Which pairs of properties share computed values
depends on the element’s computed values of
'writing-mode', 'direction', and 'text-orientation'.
Note: Depending on the element’s own writing mode
simplifies the cascading calculations
and gives a straightforward model for authors to reason about.
However, it is problematic in many cases,
see for example <a href="https://www.w3.org/mid/20161108202634.GA7235@mail.internode.on.net">this discussion</a>.
A computed value that has flow-relative and physical properties as input
is determined by applying the CSS cascade to declarations of both.
Overriding is not determined by whether a declaration is flow-relative or physical,
but only by the rules of the CSS cascade [[!CSS3-CASCADE]].
<p class="note">
Note that this requires implementations to maintain
relative order of declarations within a CSS declaration block,
which was not previously required for CSS cascading.
</p>
<div class="example">
For example, given the following rule:
<pre class="lang-css">
p {
margin-inline-start: 1px;
margin-left: 2px;
margin-inline-end: 3px;
}
</pre>
In a paragraph with computed 'writing-mode' being ''horizontal-tb''
and computed 'direction' being ''ltr'',
the computed value of 'margin-left' is ''2px'',
since for that 'writing-mode' and 'direction',
'margin-inline-start' and 'margin-left' share a computed value,
and the declaration of 'margin-left'
is after the declaration of 'margin-inline-start'.
However, if the computed 'direction' were instead ''rtl'',
the computed value of 'margin-left' is ''3px'',
since 'margin-inline-end' and 'margin-left' share a computed value,
and the declaration of 'margin-inline-end'
is after the declaration of 'margin-left'.
</div>
[[CSSOM!]] APIs that return computed values
(such as <code>getComputedStyle()</code>)
must return the same value for equivalent pairs of such properties.
<h3 id="dimension-properties">
Logical Height and Logical Width: the 'block-size' and 'inline-size' properties</h3>
<pre class="propdef">
Name: block-size, inline-size
Value: <<'width'>>
Initial: auto
Applies to: Same as 'width' and 'height'
Inherited: No
Percentages: As for the corresponding physical property
Media: visual
Computed value: Same as 'width', 'height'
Animatable: Same as 'width', 'height'
</pre>
These properties correspond to the
'width' and 'height' properties.
The mapping depends on the element's 'writing-mode'.
<pre class="propdef">
Name: min-block-size, min-inline-size
Value: <<'min-width'>>
Initial: 0
Applies to: same as 'width' and 'height'
Inherited: No
Percentages: As for the corresponding physical property
Media: visual
Computed value: Same as 'min-width', 'min-height'
Animatable: Same as 'min-width', 'min-height'
</pre>
These properties correspond to the
'min-width' and 'min-height' properties.
The mapping depends on the element's 'writing-mode'.
<pre class="propdef">
Name: max-block-size, max-inline-size
Value: <<'max-width'>>
Initial: none
Applies to: same as 'width' and 'height'
Inherited: no
Percentages: As for the corresponding physical property
Media: visual
Computed value: Same as 'max-width', 'max-height'
Animatable: Same as 'max-width', 'max-height'
</pre>
These properties correspond to the
'max-width' and 'max-height' properties.
The mapping depends on the element's 'writing-mode'.
<h3 id="margin-properties">
Flow-relative Margins:
the 'margin-block-start', 'margin-block-end', 'margin-inline-start', 'margin-inline-end' properties and 'margin-block' and 'margin-inline' shorthands</h3>
<pre class="propdef">
Name: margin-block-start, margin-block-end, margin-inline-start, margin-inline-end
Value: <<'margin-top'>>
Initial: 0
Applies to: Same as 'margin-top'
Inherited: no
Percentages: As for the corresponding physical property
Media: visual
Computed value: Same as corresponding 'margin-*' properties
Animatable: Same as 'margin-top'
</pre>
These properties correspond to the 'margin-top', 'margin-bottom', 'margin-left', and 'margin-right' properties.
The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
<pre class="propdef shorthand">
Name: margin-block, margin-inline
Value: <<'margin-left'>>{1,2}
</pre>
These two <a>shorthand properties</a> set the
'margin-block-start' & 'margin-block-end'
and
'margin-inline-start' & 'margin-inline-end',
respectively.
The first value represents the <a>start</a> edge style,
and the second value represents the <a>end</a> edge style.
If only one value is given, it applies to both the <a>start</a> and <a>end</a> edges.
<h3 id="inset-properties">
Flow-relative Offsets:
the 'inset-block-start', 'inset-block-end', 'inset-inline-start', 'inset-inline-end' properties and 'inset-block', 'inset-inline', and 'inset' shorthands</h3>
<pre class="propdef">
Name: inset-block-start, inset-block-end, inset-inline-start, inset-inline-end
Value: <<'top'>>
Initial: auto
Applies to: positioned elements
Inherited: no
Percentages: As for the corresponding physical property
Media: visual
Computed value: Same as corresponding 'top'/'right'/'bottom'/'left' properties
Animatable: Same as 'top'
</pre>
These properties correspond to the
'top', 'bottom', 'left', and 'right' properties.
The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
<pre class="propdef shorthand">
Name: inset-block, inset-inline
Value: <<'top'>>{1,2}
</pre>
These two <a>shorthand properties</a> set the
'inset-block-start' & 'inset-block-end'
and
'inset-inline-start' & 'inset-inline-end',
respectively.
The first value represents the <a>start</a> edge style,
and the second value represents the <a>end</a> edge style.
If only one value is given, it applies to both the <a>start</a> and <a>end</a> edges.
<pre class="propdef shorthand">
Name: inset
Value: <<'top'>>{1,4}
</pre>
This <a>shorthand property</a> sets the
'top', 'right', 'bottom', and 'left' properties.
Values are assigned to its <a>sub-properties</a> as for 'margin'.
<h3 id="padding-properties">
Flow-relative Padding:
the 'padding-block-start', 'padding-block-end', 'padding-inline-start', 'padding-inline-end' properties and 'padding-block' and 'padding-inline' shorthands</h3>
<pre class="propdef">
Name: padding-block-start, padding-block-end, padding-inline-start, padding-inline-end
Value: <<'padding-top'>>
Initial: 0
Applies to: all elements
Inherited: no
Percentages: As for the corresponding physical property
Media: visual
Computed value: Same as corresponding 'padding-*' properties
Animatable: Same as 'padding-top'
</pre>
These properties correspond to the
'padding-top', 'padding-bottom', 'padding-left', and 'padding-right' properties.
The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
<pre class="propdef shorthand">
Name: padding-block, padding-inline
Value: <<'padding-left'>>{1,2}
</pre>
These two <a>shorthand properties</a> set the
'padding-block-start' & 'padding-block-end'
and
'padding-inline-start' & 'padding-inline-end',
respectively.
The first value represents the <a>start</a> edge style,
and the second value represents the <a>end</a> edge style.
If only one value is given, it applies to both the <a>start</a> and <a>end</a> edges.
<h3 id="border-properties">
Flow-relative Borders</h3>
<h4 id="border-width">
Flow-relative Border Widths:
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>
<pre class="propdef">
Name: border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width
Value: <<'border-top-width'>>
Initial: medium
Applies to: all elements
Inherited: no
Percentages: n/a
Media: visual
Computed value: Same as corresponding 'border-*-width' properties
Animatable: Same as 'border-top-width'
</pre>
These properties correspond to the
'border-top-width', 'border-bottom-width', 'border-left-width', and 'border-right-width' properties.
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' & 'border-block-end-width'
and
'border-inline-start-width' & 'border-inline-end-width',
respectively.
The first value represents the <a>start</a> edge width,
and the second value represents the <a>end</a> edge width.
If only one value is given, it applies to both the <a>start</a> and <a>end</a> edges.
<h4 id="border-style">
Flow-relative Border Styles:
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>
<pre class="propdef">
Name: border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style
Value: <<'border-top-style'>>
Initial: none
Applies to: all elements
Inherited: no
Percentages: n/a
Media: visual
Computed value: Same as corresponding 'border-*-style' properties
Animatable: Same as 'border-top-style'
</pre>
These properties correspond to the
'border-top-style', 'border-bottom-style', 'border-left-style', and 'border-right-style' properties.
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' & 'border-block-end-style'
and
'border-inline-start-style' & 'border-inline-end-style',
respectively.
The first value represents the <a>start</a> edge style,
and the second value represents the <a>end</a> edge style.
If only one value is given, it applies to both the <a>start</a> and <a>end</a> edges.
<h4 id="border-color">
Flow-relative Border Colors:
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>
<pre class="propdef">
Name: border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color
Value: <<'border-top-color'>>
Initial: currentcolor
Applies to: all elements
Inherited: no
Percentages: n/a
Media: visual
Computed value: Same as corresponding 'border-*-color' properties
Animatable: Same as 'border-top-color'
</pre>
These properties correspond to the
'border-top-color', 'border-bottom-color', 'border-left-color', and 'border-right-color' properties.
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' & 'border-block-end-color'
and
'border-inline-start-color' & 'border-inline-end-color',
respectively.
The first value represents the <a>start</a> edge style,
and the second value represents the <a>end</a> edge style.
If only one value is given, it applies to both the <a>start</a> and <a>end</a> edges.
<h4 id="border-shorthands">
Flow-relative Border Shorthands:
the 'border-block-start', 'border-block-end', 'border-inline-start', 'border-inline-end' properties and 'border-block' and 'border-inline' shorthands</h4>
<pre class="propdef shorthand">
Name: border-block-start, border-block-end, border-inline-start, border-inline-end
Value: <<'border-top-width'>> || <<'border-top-style'>> || <<color>>
</pre>
These properties correspond to the
'border-top', 'border-bottom', 'border-left', and 'border-right' properties.
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' & 'border-block-end'
and
'border-inline-start' & 'border-inline-end',
respectively.
<h3 id="logical-shorthand-keyword">
Four-Directional Shorthand Properties: the 'margin', 'padding', 'border-width', 'border-style', and 'border-color' shorthands</h3>
The shorthand properties for margin, padding, and border
set values for physical properties by default.
But authors can specify
the <dfn value for="margin, padding, border-color, border-style, border-width">logical</dfn> keyword
at the beginning of the property value
to indicate that the values map to the flow-relative properties instead of the physical ones.
<p class="issue">
other candidates of the keyword are: ''relative'', ''script'',
''writing-mode'', ''beas'', or the value itself (e.g., ''vertical-lr-ltr'')
The following [[!CSS21]] shorthand properties
(and additionally the new 'inset' shorthand defined above)
accept the ''margin/logical'' keyword:
<ul>
<li>'margin'
<li>'padding'
<li>'border-width'
<li>'border-style'
<li>'border-color'
</ul>
The syntax for these properties is effectively changed by replacing
<pre class="prod"><<var>value-type</var>>{1,4}</pre>
with
<pre class="prod">logical? <<var>value-type</var>>{1,4}</pre>
When the ''margin/logical'' keyword is present in the value, the values that follow are
assigned to the flow-relative properties as follows:
<ul>
<li>If only one value is set, the value applies to all four flow-relative <a>longhands</a>.
<li>If two values are set, the first is for block-start and block-end,
the second is for inline-start and inline-end.
<li>If three values are set, the first is for block-start,
the second is for inline-start and inline-end,
and the third is for block-end.
<li>If four values are set, they apply to
the block-start, inline-start, block-end, and inline-end sides
in that order.
</ul>
<div class="example">
In the following example, the two rules are equivalent:
<pre class="lang-css">
blockquote {
margin: logical 1em 2em 3em 4em;
}
blockquote {
margin-block-start: 1em;
margin-inline-start: 2em;
margin-block-end: 3em;
margin-inline-end: 4em;
}
</pre>
</div>
<h2 id="background-and-borders">
Logical Background and Border Images</h2>
[[!CSS3BG]] is handled separately because it can fill an area with specified images,
and the area to fill can be rotated or flipped depending on the text flow.
<h3 id="background-image-transform-prop">
Background Image Transform: The ''background-image-transform'' property</h3>
<pre class="propdef">
Name: background-image-transform
Value: logical | physical | rotate
Initial: physical
Applies to: all elements
Inherited: yes
Percentages: n/a
Media: visual
Computed value: as specified
Animatable: discrete
</pre>
<p class="issue">
is this the right default? we need to investigate which is more common
This property defines whether background images are transformed
to match to the value of 'writing-mode' property,
and whether 'background-size' widths and heights are flow-relative or physical.
Values have the following meanings:
<dl dfn-type="value" dfn-for="background-image-transform">
<dt><dfn>logical</dfn></dt>
<dd>
The values for the 'background-size' property are flow-relative.
The background images are transformed to match to the flow-relative axis.
<dt><dfn>physical</dfn></dt>
<dd>
The values for the 'background-size' property are physical.
The background images remain unchanged.
<dt><dfn>rotate</dfn></dt>
<dd>
Similar t
8677
o ''background-image-transform/logical'', except that the <a>inline base direction</a> is ignored.
The result is affected only by the <a>block flow direction</a>.
</dl>
<h3 id="background-repeat-prop">
The 'background-repeat' property</h3>
The ''repeat-x'' and ''repeat-y'' values are physical,
but in CSS3 this property can also accept double values
to specify horizontal and vertical behaviors separately.
The double values are considered flow-relative
if the ''background-image-transform/logical'' keyword is specified,
otherwise physical.
<p class="issue">
should also add repeat-horizontal and repeat-vertical for the physical value?
<h3 id="border-image-transform-prop">
Border Image Transform: The 'border-image-transform' property</h3>
<pre class="propdef">
Name: border-image-transform
Value: logical | physical | rotate
Initial: rotate
Applies to: All elements, except internal table elements when 'border-collapse' is ''collapse''
Inherited: yes
Percentages: n/a
Media: visual
Computed value: as specified
Animatable: discrete
</pre>
<p class="issue">
is this the right initial default?
This property defines whether border images are transformed
to match to the value of 'writing-mode' property,
with the reference writing mode being
''writing-mode: horizontal-tb; direction: ltr''.
Values have the following meanings:
<dl dfn-type="value" dfn-for="border-image-transform">
<dt><dfn>logical</dfn></dt>
<dd>
The values for the border-image-* properties are flow-relative.
The border images are transformed to match to the flow-relative axis.
<dt><dfn>physical</dfn></dt>
<dd>
The values for the border-image-* properties are physical.
The border images remain unchanged.
<dt><dfn>rotate</dfn></dt>
<dd>
Similar to ''border-image-transform/logical'',
except that the <a>inline base direction</a> is ignored.
The result is affected only by the <a>block flow direction</a>.
</dl>
The following properties use the value of this property
to determine how directional mappings are done:
<ul>
<li>'border-image-slice'
<li>'border-image-width'
<li>'border-image-outset'
<li>'border-image-repeat'
<li>'border-image'
</ul>
<h2 id="acknowledgements">Acknowledgements</h2>
Cameron McCormack, David Baron, Shinyu Murakami, Tab Atkins
<h2 id="changes">
Changes</h2>
Changes since the earler Editors Drafts include:
<ul>
<li>Making all properties cascade using the <a>writing mode</a> specified on the element, not on its parent.
<li>Making the ordering of longhands within 'margin'-like shorthands put inline-start before inline-end.
<li>Adding the '*-inline' and '*-block' shorthand forms for margins/borders/padding.
<li>Renaming the <css>outset-*</css> properties to 'inset-*' and marking an issue for discussion.
<li>Adding an Introduction section.
<li>Updating to current terminology of CSS Writing Modes.
<li>Miscellaneous prose cleanup.
</ul>