Skip to content

Commit eb77b81

Browse files
tabatkinstabatkins
committed
[css-grid] Make it clear that repeat() doesn't do textual substitution.
1 parent a49a6ab commit eb77b81

2 files changed

Lines changed: 71 additions & 61 deletions

File tree

‎css-grid/Overview.bs‎

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -915,46 +915,51 @@ Named Grid Lines: the ''(<<custom-ident>>*)'' syntax</h4>
915915
<h4 id='repeat-notation'>
916916
Repeating Rows and Columns: the ''repeat()'' notation</h4>
917917

918-
<p>
919-
The ''repeat()'' notation represents a repeated fragment of the <a>track list</a>.
920-
This is just a syntactic shorthand that allows writing a large number of columns or rows that exhibit a recurring pattern in a more compact form.
921-
The syntax of the ''repeat()'' notation is:
918+
The ''repeat()'' notation represents a repeated fragment of the <a>track list</a>.
919+
This is just a syntactic shorthand that allows writing a large number of columns or rows that exhibit a recurring pattern in a more compact form.
920+
The syntax of the ''repeat()'' notation is:
922921

923922
<pre class='prod'><dfn>repeat()</dfn> = repeat( <<positive-integer>> , [ <<line-names>>? <<track-size>> ]+ <<line-names>>? )</pre>
924923

925-
<p>
926-
The first argument specifies the number of repetitions.
927-
The second argument is a <a>track list</a>,
928-
which is repeated that number of times.
929-
The ''repeat()'' notation cannot be nested;
930-
doing so makes the declaration invalid.
924+
The first argument specifies the number of repetitions.
925+
The second argument is a <a>track list</a>,
926+
which is repeated that number of times.
927+
The ''repeat()'' notation cannot be nested;
928+
doing so makes the declaration invalid.
931929

932930
<div class='example'>
933-
<p>
934-
This example shows two equivalent ways of writing the same grid definition.
935-
Both ways produce a grid with a single row and four "main" columns, each 250px wide,
936-
surrounded by 10px "gutter" columns.
931+
This example shows two equivalent ways of writing the same grid definition.
932+
Both ways produce a grid with a single row and four "main" columns, each 250px wide,
933+
surrounded by 10px "gutter" columns.
937934

938935
<pre>
939-
&lt;style>
940-
#grid {
941-
display: grid;
942-
grid-template-columns: 10px (col-start) 250px (col-end)
943-
10px (col-start) 250px (col-end)
944-
10px (col-start) 250px (col-end)
945-
10px (col-start) 250px (col-end) 10px;
946-
grid-template-rows: 1fr;
947-
}
948-
949-
/* Equivalent definition. */
950-
#grid {
951-
display: grid;
952-
grid-template-columns: repeat(4, 10px (col-start) 250px (col-end)) 10px;
953-
grid-template-rows: 1fr;
954-
}
955-
&lt;/style></pre>
936+
&lt;style>
937+
#grid {
938+
display: grid;
939+
grid-template-columns: 10px (col-start) 250px (col-end)
940+
10px (col-start) 250px (col-end)
941+
10px (col-start) 250px (col-end)
942+
10px (col-start) 250px (col-end) 10px;
943+
grid-template-rows: 1fr;
944+
}
945+
946+
/* Equivalent definition. */
947+
#grid {
948+
display: grid;
949+
grid-template-columns: repeat(4, 10px (col-start) 250px (col-end)) 10px;
950+
grid-template-rows: 1fr;
951+
}
952+
&lt;/style>
953+
</pre>
956954
</div>
957955

956+
The ''repeat()'' function does not literally repeat its arguments, textually, into the value.
957+
(If it did so, it would sometimes produce invalid values,
958+
such as ''repeat(2, (a) 1fr (b))'' expanding into ''(a) 1fr (b) (a) 1fr (b)''.)
959+
The <<line-names>> in its argument specify the position of some named lines relative to the tracks it defines;
960+
these must be joined with any other named lines defined for that position.
961+
(So the previous example is actually equivalent to the expanded value ''(a) 1fr (b a) 1fr (b)''.)
962+
958963
<p class='issue'>
959964
François suggests adding an optional third argument with the same syntax as the second,
960965
as a joiner between repetitions.

‎css-grid/Overview.html‎

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1044,42 +1044,47 @@ <h4 class="heading settled heading" data-level=5.1.1 id=named-lines><span class=
10441044
<h4 class="heading settled heading" data-level=5.1.2 id=repeat-notation><span class=secno>5.1.2 </span><span class=content>
10451045
Repeating Rows and Columns: the <a class=css data-link-type=maybe href=#funcdef-repeat title=repeat()>repeat()</a> notation</span><a class=self-link href=#repeat-notation></a></h4>
10461046

1047-
<p>
1048-
The <a class=css data-link-type=maybe href=#funcdef-repeat title=repeat()>repeat()</a> notation represents a repeated fragment of the <a data-link-type=dfn href=#track-list title="track list">track list</a>.
1049-
This is just a syntactic shorthand that allows writing a large number of columns or rows that exhibit a recurring pattern in a more compact form.
1050-
The syntax of the <a class=css data-link-type=maybe href=#funcdef-repeat title=repeat()>repeat()</a> notation is:
1047+
<p> The <a class=css data-link-type=maybe href=#funcdef-repeat title=repeat()>repeat()</a> notation represents a repeated fragment of the <a data-link-type=dfn href=#track-list title="track list">track list</a>.
1048+
This is just a syntactic shorthand that allows writing a large number of columns or rows that exhibit a recurring pattern in a more compact form.
1049+
The syntax of the <a class=css data-link-type=maybe href=#funcdef-repeat title=repeat()>repeat()</a> notation is:
10511050

10521051
<pre class=prod><dfn class=css-code data-dfn-type=function data-export="" id=funcdef-repeat>repeat()<a class=self-link href=#funcdef-repeat></a></dfn> = repeat( <a class="production css-code" data-link-type=type title="<positive-integer>">&lt;positive-integer&gt;</a> , [ <a class="production css-code" data-link-type=type href=#typedef-line-names title="<line-names>">&lt;line-names&gt;</a>? <a class="production css-code" data-link-type=type href=#typedef-track-size title="<track-size>">&lt;track-size&gt;</a> ]+ <a class="production css-code" data-link-type=type href=#typedef-line-names title="<line-names>">&lt;line-names&gt;</a>? )</pre>
1053-
<p>
1054-
The first argument specifies the number of repetitions.
1055-
The second argument is a <a data-link-type=dfn href=#track-list title="track list">track list</a>,
1056-
which is repeated that number of times.
1057-
The <a class=css data-link-type=maybe href=#funcdef-repeat title=repeat()>repeat()</a> notation cannot be nested;
1058-
doing so makes the declaration invalid.
1052+
<p> The first argument specifies the number of repetitions.
1053+
The second argument is a <a data-link-type=dfn href=#track-list title="track list">track list</a>,
1054+
which is repeated that number of times.
1055+
The <a class=css data-link-type=maybe href=#funcdef-repeat title=repeat()>repeat()</a> notation cannot be nested;
1056+
doing so makes the declaration invalid.
10591057

10601058
<div class=example>
1061-
<p>
1062-
This example shows two equivalent ways of writing the same grid definition.
1063-
Both ways produce a grid with a single row and four "main" columns, each 250px wide,
1064-
surrounded by 10px "gutter" columns.
1059+
This example shows two equivalent ways of writing the same grid definition.
1060+
Both ways produce a grid with a single row and four "main" columns, each 250px wide,
1061+
surrounded by 10px "gutter" columns.
10651062

1066-
<pre>&lt;style&gt;
1067-
#grid {
1068-
display: grid;
1069-
grid-template-columns: 10px (col-start) 250px (col-end)
1070-
10px (col-start) 250px (col-end)
1071-
10px (col-start) 250px (col-end)
1072-
10px (col-start) 250px (col-end) 10px;
1073-
grid-template-rows: 1fr;
1074-
}
1063+
<pre> &lt;style&gt;
1064+
#grid {
1065+
display: grid;
1066+
grid-template-columns: 10px (col-start) 250px (col-end)
1067+
10px (col-start) 250px (col-end)
1068+
10px (col-start) 250px (col-end)
1069+
10px (col-start) 250px (col-end) 10px;
1070+
grid-template-rows: 1fr;
1071+
}
10751072

1076-
/* Equivalent definition. */
1077-
#grid {
1078-
display: grid;
1079-
grid-template-columns: repeat(4, 10px (col-start) 250px (col-end)) 10px;
1080-
grid-template-rows: 1fr;
1081-
}
1082-
&lt;/style&gt;</pre> </div>
1073+
/* Equivalent definition. */
1074+
#grid {
1075+
display: grid;
1076+
grid-template-columns: repeat(4, 10px (col-start) 250px (col-end)) 10px;
1077+
grid-template-rows: 1fr;
1078+
}
1079+
&lt;/style&gt;
1080+
</pre> </div>
1081+
1082+
<p> The <a class=css data-link-type=maybe href=#funcdef-repeat title=repeat()>repeat()</a> function does not literally repeat its arguments, textually, into the value.
1083+
(If it did so, it would sometimes produce invalid values,
1084+
such as <span class=css data-link-type=maybe title="repeat(2, (a) 1fr (b))">repeat(2, (a) 1fr (b))</span> expanding into <span class=css data-link-type=maybe title="(a) 1fr (b) (a) 1fr (b)">(a) 1fr (b) (a) 1fr (b)</span>.)
1085+
The <a class="production css-code" data-link-type=type href=#typedef-line-names title="<line-names>">&lt;line-names&gt;</a> in its argument specify the position of some named lines relative to the tracks it defines;
1086+
these must be joined with any other named lines defined for that position.
1087+
(So the previous example is actually equivalent to the expanded value <span class=css data-link-type=maybe title="(a) 1fr (b a) 1fr (b)">(a) 1fr (b a) 1fr (b)</span>.)
10831088

10841089
<p class=issue id=issue-476380d2><a class=self-link href=#issue-476380d2></a>
10851090
François suggests adding an optional third argument with the same syntax as the second,

0 commit comments

Comments
 (0)