Skip to content

Commit a32b4da

Browse files
tabatkinstabatkins
committed
[css-logical-props] fix linking errors
1 parent 9fd4f49 commit a32b4da

2 files changed

Lines changed: 104 additions & 36 deletions

File tree

‎css-logical-props/Overview.bs‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -291,18 +291,18 @@ the margin- and offset- block-start/block-end/inline-start/inline-end properties
291291
element's 'writing-mode', 'direction', and 'text-orientation'.
292292

293293
<h3 id="logical-shorthand-keyword">
294-
Shorthand Properties with ''logical'' Keyword</h3>
294+
Shorthand Properties with <css>logical</css> Keyword</h3>
295295

296296
The shorthand properties for margin, padding, and border set values
297-
for physical properties by default. But authors can specify the ''logical''
297+
for physical properties by default. But authors can specify the <dfn value for="margin, padding, border-color, border-style, border-width">logical</dfn>
298298
keyword at the beginning of the property value to indicate that the values
299299
map to the logical properties instead of the physical ones.
300300

301301
<p class="issue">
302302
other candidates of the keyword are: ''relative'', ''script'',
303303
''writing-mode'', ''beas'', or the value itself (e.g., ''vertical-lr-ltr'')
304304

305-
The following [[!CSS21]] shorthand properties accept the ''logical'' keyword:
305+
The following [[!CSS21]] shorthand properties accept the ''margin/logical'' keyword:
306306
<ul>
307307
<li>'margin'</li>
308308
<li>'padding'</li>
@@ -312,13 +312,14 @@ Shorthand Properties with ''logical'' Keyword</h3>
312312
</ul>
313313

314314
The syntax for these properties is effectively changed by replacing
315-
<pre>&lt;<var>value-type</var>&gt;{1,4}</pre>
315+
<pre class="prod">&lt;<var>value-type</var>&gt;{1,4}</pre>
316316

317317
with
318-
<pre>logical? &lt;<var>value-type</var>&gt;{1,4}</pre>
318+
<pre class="prod">logical? &lt;<var>value-type</var>&gt;{1,4}</pre>
319319

320320
When the logical keyword is present in the value, the values that follow are
321321
assigned to the logical properties as follows:
322+
322323
<ul>
323324
<li>If only one value is set, the value applies to all four logical sides.</li>
324325
<li>If two values are set, the first is for block-start and block-end,
@@ -336,17 +337,18 @@ Shorthand Properties with ''logical'' Keyword</h3>
336337

337338
<div class="example">
338339
In the following example, the two rules are equivalent:
339-
<pre><code class="css">
340-
<!-- -->blockquote {
341-
<!-- --> margin: logical 1em 2em 3em 4em;
342-
<!-- -->}
343-
<!-- -->blockquote {
344-
<!-- --> margin-block-start: 1em;
345-
<!-- --> margin-inline-end: 2em;
346-
<!-- --> margin-block-end: 3em;
347-
<!-- --> margin-inline-start: 4em;
348-
<!-- -->}
349-
<!----></code></pre>
340+
341+
<pre class="lang-css">
342+
blockquote {
343+
margin: logical 1em 2em 3em 4em;
344+
}
345+
blockquote {
346+
margin-block-start: 1em;
347+
margin-inline-end: 2em;
348+
margin-block-end: 3em;
349+
margin-inline-start: 4em;
350+
}
351+
</pre>
350352
</div>
351353

352354
<h2 id="background-and-borders">
@@ -376,6 +378,7 @@ Shorthand Properties with ''logical'' Keyword</h3>
376378
This property defines whether background images are transformed to match to
377379
the value of 'writing-mode' property, and whether 'background-size' widths and
378380
heights are logical or physical. Values have the following meanings:
381+
379382
<dl dfn-type="value" dfn-for="background-image-transform">
380383
<dt><dfn>logical</dfn></dt>
381384
<dd>
@@ -389,7 +392,7 @@ Shorthand Properties with ''logical'' Keyword</h3>
389392

390393
<dt><dfn>rotate</dfn></dt>
391394
<dd>
392-
Similar to ''logical'', except that the inline direction is ignored.
395+
Similar to ''background-image-transform/logical'', except that the inline direction is ignored.
393396
The result is affected only by the block flow direction.
394397
</dl>
395398

@@ -399,7 +402,7 @@ Shorthand Properties with ''logical'' Keyword</h3>
399402
The ''repeat-x'' and ''repeat-y'' values are logical, but in CSS3 this
400403
property can also accept double values to specify horizontal and vertical
401404
behaviors separately. The double values are considered logical if the
402-
''logical'' keyword is specified, otherwise physical.
405+
''background-image-transform/logical'' keyword is specified, otherwise physical.
403406

404407
<p class="issue">
405408
should also add repeat-horizontal and repeat-vertical for the physical value?
@@ -425,6 +428,7 @@ Shorthand Properties with ''logical'' Keyword</h3>
425428
value of 'writing-mode' property, with the reference writing mode being
426429
''writing-mode: horizontal-tb; direction: ltr''. Values have the following
427430
meanings:
431+
428432
<dl dfn-type="value" dfn-for="border-image-transform">
429433
<dt><dfn>logical</dfn></dt>
430434
<dd>
@@ -438,7 +442,7 @@ Shorthand Properties with ''logical'' Keyword</h3>
438442

439443
<dt><dfn>rotate</dfn></dt>
440444
<dd>
441-
Similar to ''logical'', except that the inline direction is ignored.
445+
Similar to ''border-image-transform/logical'', except that the inline direction is ignored.
442446
The result is affected only by the block flow direction.
443447
</dl>
444448

‎css-logical-props/Overview.html‎

Lines changed: 81 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,64 @@
6565

6666

6767
<meta content="Bikeshed 1.0.0" name="generator">
68+
<style>.highlight .hll { background-color: #ffffcc }
69+
.highlight { background: #ffffff; }
70+
.highlight .c { color: #708090 } /* Comment */
71+
.highlight .k { color: #990055 } /* Keyword */
72+
.highlight .l { color: #669900 } /* Literal */
73+
.highlight .n { color: #0077aa } /* Name */
74+
.highlight .o { color: #999999 } /* Operator */
75+
.highlight .p { color: #999999 } /* Punctuation */
76+
.highlight .cm { color: #708090 } /* Comment.Multiline */
77+
.highlight .cp { color: #708090 } /* Comment.Preproc */
78+
.highlight .c1 { color: #708090 } /* Comment.Single */
79+
.highlight .cs { color: #708090 } /* Comment.Special */
80+
.highlight .kc { color: #990055 } /* Keyword.Constant */
81+
.highlight .kd { color: #990055 } /* Keyword.Declaration */
82+
.highlight .kn { color: #990055 } /* Keyword.Namespace */
83+
.highlight .kp { color: #990055 } /* Keyword.Pseudo */
84+
.highlight .kr { color: #990055 } /* Keyword.Reserved */
85+
.highlight .kt { color: #990055 } /* Keyword.Type */
86+
.highlight .ld { color: #669900 } /* Literal.Date */
87+
.highlight .m { color: #990055 } /* Literal.Number */
88+
.highlight .s { color: #669900 } /* Literal.String */
89+
.highlight .na { color: #0077aa } /* Name.Attribute */
90+
.highlight .nc { color: #0077aa } /* Name.Class */
91+
.highlight .no { color: #0077aa } /* Name.Constant */
92+
.highlight .nd { color: #0077aa } /* Name.Decorator */
93+
.highlight .ni { color: #0077aa } /* Name.Entity */
94+
.highlight .ne { color: #0077aa } /* Name.Exception */
95+
.highlight .nf { color: #0077aa } /* Name.Function */
96+
.highlight .nl { color: #0077aa } /* Name.Label */
97+
.highlight .nn { color: #0077aa } /* Name.Namespace */
98+
.highlight .py { color: #0077aa } /* Name.Property */
99+
.highlight .nt { color: #0077aa } /* Name.Tag */
100+
.highlight .nv { color: #0077aa } /* Name.Variable */
101+
.highlight .ow { color: #999999 } /* Operator.Word */
102+
.highlight .mb { color: #990055 } /* Literal.Number.Bin */
103+
.highlight .mf { color: #990055 } /* Literal.Number.Float */
104+
.highlight .mh { color: #990055 } /* Literal.Number.Hex */
105+
.highlight .mi { color: #990055 } /* Literal.Number.Integer */
106+
.highlight .mo { color: #990055 } /* Literal.Number.Oct */
107+
.highlight .sb { color: #669900 } /* Literal.String.Backtick */
108+
.highlight .sc { color: #669900 } /* Literal.String.Char */
109+
.highlight .sd { color: #669900 } /* Literal.String.Doc */
110+
.highlight .s2 { color: #669900 } /* Literal.String.Double */
111+
.highlight .se { color: #669900 } /* Literal.String.Escape */
112+
.highlight .sh { color: #669900 } /* Literal.String.Heredoc */
113+
.highlight .si { color: #669900 } /* Literal.String.Interpol */
114+
.highlight .sx { color: #669900 } /* Literal.String.Other */
115+
.highlight .sr { color: #669900 } /* Literal.String.Regex */
116+
.highlight .s1 { color: #669900 } /* Literal.String.Single */
117+
.highlight .ss { color: #669900 } /* Literal.String.Symbol */
118+
.highlight .vc { color: #0077aa } /* Name.Variable.Class */
119+
.highlight .vg { color: #0077aa } /* Name.Variable.Global */
120+
.highlight .vi { color: #0077aa } /* Name.Variable.Instance */
121+
.highlight .il { color: #990055 } /* Literal.Number.Integer.Long */
122+
.highlight { background: hsl(24, 20%, 95%); }
123+
pre.highlight { padding: 1em; margin: .5em 0; overflow: auto; }
124+
:not(pre).highlight { padding: .1em; border-radius: .3em; }
125+
</style>
68126
</head>
69127

70128

@@ -778,11 +836,11 @@ <h3 class="heading settled" data-level="2.3" id="border-padding"><span class="se
778836

779837

780838
<h3 class="heading settled" data-level="2.4" id="logical-shorthand-keyword"><span class="secno">2.4. </span><span class="content">
781-
Shorthand Properties with <a class="css" data-link-type="maybe" href="#valdef-background-image-transform-logical">logical</a> Keyword</span><a class="self-link" href="#logical-shorthand-keyword"></a></h3>
839+
Shorthand Properties with <span class="css">logical</span> Keyword</span><a class="self-link" href="#logical-shorthand-keyword"></a></h3>
782840

783841

784842
<p>The shorthand properties for margin, padding, and border set values
785-
for physical properties by default. But authors can specify the <a class="css" data-link-type="maybe" href="#valdef-background-image-transform-logical">logical</a>
843+
for physical properties by default. But authors can specify the <dfn class="css" data-dfn-for="margin, padding, border-color, border-style, border-width" data-dfn-type="value" data-export="" id="valdef-margin-logical">logical<a class="self-link" href="#valdef-margin-logical"></a></dfn>
786844
keyword at the beginning of the property value to indicate that the values
787845
map to the logical properties instead of the physical ones.</p>
788846

@@ -792,7 +850,7 @@ <h3 class="heading settled" data-level="2.4" id="logical-shorthand-keyword"><spa
792850
<span class="css">writing-mode</span>, <span class="css">beas</span>, or the value itself (e.g., <span class="css">vertical-lr-ltr</span>)
793851

794852
</p>
795-
<p>The following <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> shorthand properties accept the <a class="css" data-link-type="maybe" href="#valdef-background-image-transform-logical">logical</a> keyword:</p>
853+
<p>The following <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> shorthand properties accept the <a class="css" data-link-type="maybe" href="#valdef-margin-logical">logical</a> keyword:</p>
796854

797855
<ul>
798856

@@ -816,16 +874,17 @@ <h3 class="heading settled" data-level="2.4" id="logical-shorthand-keyword"><spa
816874

817875
<p>The syntax for these properties is effectively changed by replacing</p>
818876

819-
<pre>&lt;<var>value-type</var>>{1,4}</pre>
877+
<pre class="prod">&lt;<var>value-type</var>><a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-num-range">{1,4}</a></pre>
820878

821879

822880
<p>with</p>
823881

824-
<pre>logical? &lt;<var>value-type</var>>{1,4}</pre>
882+
<pre class="prod">logical<a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> &lt;<var>value-type</var>><a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-num-range">{1,4}</a></pre>
825883

826884

827885
<p>When the logical keyword is present in the value, the values that follow are
828886
assigned to the logical properties as follows:</p>
887+
829888

830889
<ul>
831890

@@ -853,19 +912,19 @@ <h3 class="heading settled" data-level="2.4" id="logical-shorthand-keyword"><spa
853912
values?
854913

855914
</p>
856-
<div class="example" id="example-59ca6e28"><a class="self-link" href="#example-59ca6e28"></a>
915+
<div class="example" id="example-1acdff8c"><a class="self-link" href="#example-1acdff8c"></a>
857916
In the following example, the two rules are equivalent:
917+
858918

859-
<pre><code>blockquote {
860-
margin: logical 1em 2em 3em 4em;
861-
}
862-
blockquote {
863-
margin-block-start: 1em;
864-
margin-inline-end: 2em;
865-
margin-block-end: 3em;
866-
margin-inline-start: 4em;
867-
}
868-
</code></pre>
919+
<pre class="lang-css highlight"><span class="nt">blockquote</span> <span class="p">{</span>
920+
<span class="k">margin</span><span class="o">:</span> <span class="n">logical</span> <span class="m">1em</span> <span class="m">2em</span> <span class="m">3em</span> <span class="m">4em</span><span class="p">;</span>
921+
<span class="p">}</span>
922+
<span class="nt">blockquote</span> <span class="p">{</span>
923+
<span class="k">margin</span><span class="o">-</span><span class="k">block</span><span class="o">-</span><span class="n">start</span><span class="o">:</span> <span class="m">1em</span><span class="p">;</span>
924+
<span class="k">margin</span><span class="o">-</span><span class="k">inline</span><span class="o">-</span><span class="n">end</span><span class="o">:</span> <span class="m">2em</span><span class="p">;</span>
925+
<span class="k">margin</span><span class="o">-</span><span class="k">block</span><span class="o">-</span><span class="n">end</span><span class="o">:</span> <span class="m">3em</span><span class="p">;</span>
926+
<span class="k">margin</span><span class="o">-</span><span class="k">inline</span><span class="o">-</span><span class="n">start</span><span class="o">:</span> <span class="m">4em</span><span class="p">;</span>
927+
<span class="p">}</span></pre>
869928

870929

871930
</div>
@@ -922,6 +981,7 @@ <h3 class="heading settled" data-level="3.1" id="background-image-transform-prop
922981
<p>This property defines whether background images are transformed to match to
923982
the value of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-writing-modes-3/#propdef-writing-mode">writing-mode</a> property, and whether <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-backgrounds-3/#background-size">background-size</a> widths and
924983
heights are logical or physical. Values have the following meanings:</p>
984+
925985

926986
<dl>
927987

@@ -1008,6 +1068,7 @@ <h3 class="heading settled" data-level="3.3" id="border-image-transform-prop"><s
10081068
value of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-writing-modes-3/#propdef-writing-mode">writing-mode</a> property, with the reference writing mode being
10091069
<a class="css" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-writing-modes-3/#propdef-writing-mode">writing-mode: horizontal-tb; direction: ltr</a>. Values have the following
10101070
meanings:</p>
1071+
10111072

10121073
<dl>
10131074

@@ -1031,7 +1092,7 @@ <h3 class="heading settled" data-level="3.3" id="border-image-transform-prop"><s
10311092

10321093

10331094
<dd>
1034-
Similar to <a class="css" data-link-type="maybe" href="#valdef-background-image-transform-logical">logical</a>, except that the inline direction is ignored.
1095+
Similar to <a class="css" data-link-type="maybe" href="#valdef-border-image-transform-logical">logical</a>, except that the inline direction is ignored.
10351096
The result is affected only by the block flow direction.
10361097

10371098
</dl>
@@ -1250,6 +1311,7 @@ <h3 class="no-num heading settled" id="index-defined-here"><span class="content"
12501311
<li>inline-size, <a href="#propdef-inline-size">2.1</a>
12511312
<li>logical
12521313
<ul>
1314+
<li>value for margin, padding, border-color, border-style, border-width, <a href="#valdef-margin-logical">2.4</a>
12531315
<li>value for background-image-transform, <a href="#valdef-background-image-transform-logical">3.1</a>
12541316
<li>value for border-image-transform, <a href="#valdef-border-image-transform-logical">3.3</a>
12551317
</ul>
@@ -1332,6 +1394,8 @@ <h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="con
13321394
</ul>
13331395
<li><a data-link-type="biblio" href="#biblio-css-values-3">[css-values-3]</a> defines the following terms:
13341396
<ul>
1397+
<li><a href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a>
1398+
<li><a href="http://dev.w3.org/csswg/css-values-3/#mult-num-range">{a,b}</a>
13351399
<li><a href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a>
13361400
<li><a href="http://dev.w3.org/csswg/css-values-3/#comb-any">||</a>
13371401
</ul>

0 commit comments

Comments
 (0)