E5A0 [css3-gcpm] move alternative running element syntax into issue; add i… · xfq/csswg-drafts@1aecb56 · GitHub
Skip to content

Commit 1aecb56

Browse files
dauwhedauwhe
committed
[css3-gcpm] move alternative running element syntax into issue; add issue about footnotes in multicol
1 parent d02f311 commit 1aecb56

2 files changed

Lines changed: 143 additions & 82 deletions

File tree

‎css-gcpm/Overview.html‎

Lines changed: 89 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
</p>
5555
<h1 class="p-name no-ref" id=title>CSS Generated Content for Paged Media Module</h1>
5656
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
57-
<span class=dt-updated><span class=value-title title=20140311>11 March 2014</span></span></span></h2>
57+
<span class=dt-updated><span class=value-title title=20140506>6 May 2014</span></span></span></h2>
5858
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-gcpm/>http://dev.w3.org/csswg/css-gcpm/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-gcpm/>http://dev.w3.org/csswg/css-gcpm/</a><dt>Previous Versions:<dd><a href=https://dvcs.w3.org/hg/csswg/raw-file/6a5c44d11c2b/css-gcpm/Overview.html rel=previous>https://dvcs.w3.org/hg/csswg/raw-file/6a5c44d11c2b/css-gcpm/Overview.html</a><dd><a href=http://www.w3.org/TR/2011/WD-css3-gcpm-20111129/ rel=previous>http://www.w3.org/TR/2011/WD-css3-gcpm-20111129/</a>
5959
<dt>Feedback:</dt>
6060
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-gcpm%5D%20feedback">www-style@w3.org</a>
@@ -120,7 +120,7 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
120120
Running elements
121121
</a><ul class=toc><li><a href=#running-syntax><span class=secno>1.2.1</span>
122122
The <span class=css data-link-type=maybe title=running()>running()</span> value
123-
</a><li><a href=#alternative-syntax-running><span class=secno>1.2.2</span>Alternative Proposal from Bert Bos</a><li><a href=#element-syntax><span class=secno>1.2.3</span>
123+
</a><li><a href=#element-syntax><span class=secno>1.2.2</span>
124124
The <span class=css data-link-type=maybe title=element()>element()</span> value
125125
</a></ul></ul><li><a href=#footnotes><span class=secno>2</span>
126126
Footnotes
@@ -358,7 +358,45 @@ <h4 class="heading settled heading" data-level=1.2.1 id=running-syntax><span cla
358358

359359
<pre class=prod> <dfn class=css-code data-dfn-type=function data-export="" id=funcdef-running>running()<a class=self-link href=#funcdef-running></a></dfn> = string( <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a> )
360360
</pre>
361-
<h4 class="heading settled heading" data-level=1.2.2 id=alternative-syntax-running><span class=secno>1.2.2 </span><span class=content>Alternative Proposal from Bert Bos</span><a class=self-link href=#alternative-syntax-running></a></h4>
361+
362+
363+
364+
<div class=example>
365+
366+
<p>HTML:
367+
<pre>&lt;p class="rh"&gt;&lt;i&gt;Miranda v. Arizona&lt;/i&gt; in Context&lt;/p&gt;
368+
&lt;h2&gt;&lt;i&gt;Miranda v. Arizona&lt;/i&gt; in Context&lt;/h2&gt;
369+
</pre>
370+
<p>CSS:
371+
<pre> @top-center {
372+
content: element(heading);
373+
}
374+
375+
p.rh {
376+
position: running(heading);
377+
}
378+
379+
p.rh::before {
380+
content: counter(page) ' / ';
381+
}
382+
</pre>
383+
384+
385+
<figure>
386+
387+
388+
<p><img alt="running header using running elements" src=running-element-gcpm_Page_1.jpg width=480>
389+
</p><figcaption>Running element in page margin box</figcaption>
390+
</figure>
391+
</div>
392+
393+
394+
395+
<p class=note>The element <span class=css data-link-type=maybe title=value()>value()</span> can only be used in page margin boxes. And it cannot be combined with other possible values for the content property.</p>
396+
<div class=issue id=issue-11bb4305><a class=self-link href=#issue-11bb4305></a>
397+
<p>This idea would be much more useful if we could also copy (rather than just move) elements. That would avoid the duplication of HTML in the example above.
398+
</p>
399+
362400

363401
<p>Bert Bos has proposed an alternative syntax, which allows both moving and copying elements into running heads. In the example below, h2 elements appear in their normal place in the document, but are also copied into running heads.
364402

@@ -388,9 +426,9 @@ <h4 class="heading settled heading" data-level=1.2.2 id=alternative-syntax-runni
388426

389427

390428
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-running>running<a class=self-link href=#propdef-running></a></dfn><tr><th>Value:<td><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a><tr><th>Initial:<td>none<tr><th>Applies to:<td>elements<tr><th>Inherited:<td>no<tr><th>Media:<td>all<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>N/A</table>
429+
</div>
391430

392-
393-
<h4 class="heading settled heading" data-level=1.2.3 id=element-syntax><span class=secno>1.2.3 </span><span class=content>
431+
<h4 class="heading settled heading" data-level=1.2.2 id=element-syntax><span class=secno>1.2.2 </span><span class=content>
394432
The <a class=css data-link-type=maybe href=#funcdef-element title=element()>element()</a> value
395433
</span><a class=self-link href=#element-syntax></a></h4>
396434

@@ -401,40 +439,6 @@ <h4 class="heading settled heading" data-level=1.2.3 id=element-syntax><span cla
401439
<table class="definition propdef partial"><tr><th>Name:<td><a class=css-code data-link-type=property href=http://dev.w3.org/csswg/css-content-3/#content title=content>content</a><tr><th>New values:<td>element()<tr><th>Media:<td>paged</table>
402440
<pre class=prod> <dfn class=css-code data-dfn-type=function data-export="" id=funcdef-element>element()<a class=self-link href=#funcdef-element></a></dfn> = string( <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a> [ , [ first | start | last | first-except] ]? )
403441
</pre>
404-
405-
<div class=example>
406-
407-
<p>HTML:
408-
<pre>&lt;p class="rh"&gt;&lt;i&gt;Miranda v. Arizona&lt;/i&gt; in Context&lt;/p&gt;
409-
&lt;h2&gt;&lt;i&gt;Miranda v. Arizona&lt;/i&gt; in Context&lt;/h2&gt;
410-
</pre>
411-
<p>CSS:
412-
<pre> @top-center {
413-
content: element(heading);
414-
}
415-
416-
p.rh {
417-
position: running(heading);
418-
}
419-
420-
p.rh::before {
421-
content: counter(page) ' / ';
422-
}
423-
</pre>
424-
<figure>
425-
426-
427-
<p><img alt="running header using running elements" src=running-element-gcpm_Page_1.jpg width=480>
428-
</p><figcaption>Running element in page margin box</figcaption>
429-
</figure>
430-
</div>
431-
432-
433-
434-
<p class=note>The element <span class=css data-link-type=maybe title=value()>value()</span> can only be used in page margin boxes. And it cannot be combined with other possible values for the content property.</p>
435-
436-
<p class=issue id=issue-90b2f97a><a class=self-link href=#issue-90b2f97a></a>This idea would be much more useful if we could also copy (rather than just move) elements. That would avoid the duplication of HTML in the example above.</p>
437-
438442
<h2 class="heading settled heading" data-level=2 id=footnotes><span class=secno>2 </span><span class=content>
439443
Footnotes
440444
</span><a class=self-link href=#footnotes></a></h2>
@@ -542,8 +546,13 @@ <h3 class="heading settled heading" data-level=2.4 id=footnote-area><span class=
542546
<h4 class="heading settled heading" data-level=2.4.1 id=footnote-area-position><span class=secno>2.4.1 </span><span class=content>Positioning of the footnote area</span><a class=self-link href=#footnote-area-position></a></h4>
543547
The bottom margin edge of the footnote area is positioned so that it touches the bottom of the page area. The footnote area can only contain footnotes.
544548

549+
550+
<p class=issue id=issue-ab22b570><a class=self-link href=#issue-ab22b570></a>How do footnotes work in multi-column text? Prince uses <code>float: prince-column-footnote</code> to create a footnote at the bottom of a column rather than the bottom of a page.</p>
551+
545552
<p class=issue id=issue-165f8769><a class=self-link href=#issue-165f8769></a>Implementations that support footnotes generally support page floats like <code>float: bottom</code>. Page floats should end up above the footnote area. How might this be specified?</p>
546553

554+
555+
547556
<h4 class="heading settled heading" data-level=2.4.2 id=footnote-area-size><span class=secno>2.4.2 </span><span class=content>Size of the footnote area</span><a class=self-link href=#footnote-area-size></a></h4>
548557

549558
<p>The <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-max-height title=max-height>max-height</a> property on the footnote area limits the 1783 size of this area, unless the page contains only footnotes (as may happen on the last page of a document).
@@ -1257,7 +1266,7 @@ <h3 class="no-num no-ref heading settled heading" id=normative><span class=conte
12571266

12581267
<h3 class="no-num no-ref heading settled heading" id=informative><span class=content>
12591268
Informative References</span><a class=self-link href=#informative></a></h3>
1260-
<div data-fill-with=informative-references><dl><dt id=css21 title=CSS21><a class=self-link href=#css21></a>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dt id=css3color title=CSS3COLOR><a class=self-link href=#css3color></a>[CSS3COLOR]<dd>Tantek Çelik; Chris Lilley; L. David Baron. <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>CSS Color Module Level 3</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>http://www.w3.org/TR/2011/REC-css3-color-20110607</a><dt id=css3list title=CSS3LIST><a class=self-link href=#css3list></a>[CSS3LIST]<dd>Tab Atkins Jr.. <a href=http://www.w3.org/TR/2011/WD-css3-lists-20110524>CSS Lists and Counters Module Level 3</a>. 24 May 2011. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2011/WD-css3-lists-20110524>http://www.w3.org/TR/2011/WD-css3-lists-20110524</a><dt id=css3page title=CSS3PAGE><a class=self-link href=#css3page></a>[CSS3PAGE]<dd>Melinda Grant; et al. <a href=http://www.w3.org/TR/2013/WD-css3-page-20130314/>CSS Paged Media Module Level 3</a>. 14 March 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css3-page-20130314/>http://www.w3.org/TR/2013/WD-css3-page-20130314/</a><dt id=css3syn title=CSS3SYN><a class=self-link href=#css3syn></a>[CSS3SYN]<dd>L. David Baron. <a href=http://www.w3.org/TR/2003/WD-css3-syntax-20030813>CSS3 module: Syntax</a>. 13 August 2003. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2003/WD-css3-syntax-20030813>http://www.w3.org/TR/2003/WD-css3-syntax-20030813</a><dt id=css3val title=CSS3VAL><a class=self-link href=#css3val></a>[CSS3VAL]<dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a href=http://www.w3.org/TR/2013/CR-css3-values-20130730/>CSS Values and Units Module Level 3</a>. 30 July 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/CR-css3-values-20130730/>http://www.w3.org/TR/2013/CR-css3-values-20130730/</a><dt id=dpub-latinreq title=dpub-latinreq><a class=self-link href=#dpub-latinreq></a>[dpub-latinreq]<dd>Dave Cramer. <a href=http://www.w3.org/TR/2014/WD-dpub-latinreq/>Requirements for Latin Text Layout and Pagination</a>. FPWD. URL: <a href=http://www.w3.org/TR/2014/WD-dpub-latinreq/>http://www.w3.org/TR/2014/WD-dpub-latinreq/</a></dl></div>
1269+
<div data-fill-with=informative-references><dl><dt id=css21 title=CSS21><a class=self-link href=#css21></a>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dt id=css3color title=CSS3COLOR><a class=self-link href=#css3color></a>[CSS3COLOR]<dd>Tantek Çelik; Chris Lilley; L. David Baron. <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>CSS Color Module Level 3</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>http://www.w3.org/TR/2011/REC-css3-color-20110607</a><dt id=css3list title=CSS3LIST><a class=self-link href=#css3list></a>[CSS3LIST]<dd>Tab Atkins Jr.. <a href=http://www.w3.org/TR/2011/WD-css3-lists-20110524>CSS Lists and Counters Module Level 3</a>. 24 May 2011. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2011/WD-css3-lists-20110524>http://www.w3.org/TR/2011/WD-css3-lists-20110524</a><dt id=css3page title=CSS3PAGE><a class=self-link href=#css3page></a>[CSS3PAGE]<dd>Melinda Grant; et al. <a href=http://www.w3.org/TR/2013/WD-css3-page-20130314/>CSS Paged Media Module Level 3</a>. 14 March 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css3-page-20130314/>http://www.w3.org/TR/2013/WD-css3-page-20130314/</a><dt id=css3syn title=CSS3SYN><a class=self-link href=#css3syn></a>[CSS3SYN]<dd>Tab Atkins Jr.; Simon Sapin. <a href=http://www.w3.org/TR/2013/WD-css-syntax-3-20131105/>CSS Syntax Module</a>. 5 November 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-css-syntax-3-20131105/>http://www.w3.org/TR/2013/WD-css-syntax-3-20131105/</a><dt id=css3val title=CSS3VAL><a class=self-link href=#css3val></a>[CSS3VAL]<dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a href=http://www.w3.org/TR/2013/CR-css3-values-20130730/>CSS Values and Units Module Level 3</a>. 30 July 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/CR-css3-values-20130730/>http://www.w3.org/TR/2013/CR-css3-values-20130730/</a><dt id=dpub-latinreq title=dpub-latinreq><a class=self-link href=#dpub-latinreq></a>[dpub-latinreq]<dd>Dave Cramer. <a href=http://www.w3.org/TR/2014/WD-dpub-latinreq/>Requirements for Latin Text Layout and Pagination</a>. FPWD. URL: <a href=http://www.w3.org/TR/2014/WD-dpub-latinreq/>http://www.w3.org/TR/2014/WD-dpub-latinreq/</a></dl></div>
12611270

12621271
<h2 class="no-num no-ref heading settled heading" id=index><span class=content>
12631272
Index</span><a class=self-link href=#index></a></h2>
@@ -1272,7 +1281,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
12721281
<li>compact, <a href=#footnote-display-compact title="section 2.3">2.3</a>
12731282
<li>content(), <a href=#funcdef-content title="section 1.1.1.1">1.1.1.1</a>
12741283
<li>content-list, <a href=#content-list title="section 1.1.1">1.1.1</a>
1275-
<li>element(), <a href=#funcdef-element title="section 1.2.3">1.2.3</a>
1284+
<li>element(), <a href=#funcdef-element title="section 1.2.2">1.2.2</a>
12761285
<li>entry value, <a href=#entry-value title="section 1.1.1.1">1.1.1.1</a>
12771286
<li>exit value, <a href=#exit-value title="section 1.1.1.1">1.1.1.1</a>
12781287
<li>footnote, <a href=#valuedef-footnote title="section 2.3">2.3</a>
@@ -1287,7 +1296,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
12871296
<li>page group, <a href=#page-group title="section 3.2">3.2</a>
12881297
<li>page selectors, <a href=#page-selectors0 title="section 3">3</a>
12891298
<li>running(), <a href=#funcdef-running title="section 1.2.1">1.2.1</a>
1290-
<li>running, <a href=#propdef-running title="section 1.2.2">1.2.2</a>
1299+
<li>running, <a href=#propdef-running title="section 1.2.1">1.2.1</a>
12911300
<li>Running elements, <a href=#running-elements0 title="section 1">1</a>
12921301
<li>string(), <a href=#funcdef-string title="section 1.1.2">1.1.2</a>
12931302
<li>string-set, <a href=#propdef-string-set title="section 1.1.1">1.1.1</a>
@@ -1308,7 +1317,40 @@ <h2 class="no-num no-ref heading settled heading" id=property-index><span class=
13081317
<tr><th scope=row><a data-property="">bookmark-state</a><td>open | closed<td>open<td>block-level elements<td>no<td>N/A<td>paged<td>specified value</table></div>
13091318

13101319

1311-
<h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style="counter-reset: issue"><div class=issue>This idea would be much more useful if we could also copy (rather than just move) elements. That would avoid the duplication of HTML in the example above.<a href=#issue-90b2f97a> ↵ </a></div>
1320+
<h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style="counter-reset: issue"><div class=issue>
1321+
<p>This idea would be much more useful if we could also copy (rather than just move) elements. That would avoid the duplication of HTML in the example above.
1322+
</p>
1323+
1324+
1325+
<p>Bert Bos has proposed an alternative syntax, which allows both moving and copying elements into running heads. In the example below, h2 elements appear in their normal place in the document, but are also copied into running heads.
1326+
1327+
<div class=example>
1328+
<pre>
1329+
h2 {
1330+
display: block;
1331+
running: chapter;
1332+
font-size: 18pt;
1333+
font-weight: bold;
1334+
}
1335+
1336+
h2:running {
1337+
display: inline;
1338+
font-size: 11pt;
1339+
font-weight: normal;
1340+
font-variant: small-caps;
1341+
letter-spacing: 1pt;
1342+
}
1343+
1344+
@page {
1345+
@top-center {
1346+
content: element(chapter);
1347+
}
1348+
}
1349+
</pre></div>
1350+
1351+
1352+
<table class="definition propdef"><tr><th>Name:<td><span data-dfn-type=property data-export="">running</span><tr><th>Value:<td><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a><tr><th>Initial:<td>none<tr><th>Applies to:<td>elements<tr><th>Inherited:<td>no<tr><th>Media:<td>all<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>N/A</table>
1353+
<a href=#issue-11bb4305> ↵ </a></div>
13121354

13131355
<div class=issue>Why is float:bottom used with the footnote area? Floating footnotes to the footnote area, and then floating the footnote area itself, seems overly complex, given that implementations don’t allow the footnote area to float anywhere else. Note that some implementations do allow the footnote area to be absolutely positioned.<a href=#issue-4af1f674> ↵ </a></div>
13141356
<div class=issue>How would one describe this in the grammar of CSS3-Page?<a href=#issue-829ce977> ↵ </a></div>
@@ -1318,8 +1360,12 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
13181360

13191361

13201362

1363+
<div class=issue>How do footnotes work in multi-column text? Prince uses <code>float: prince-column-footnote</code> to create a footnote at the bottom of a column rather than the bottom of a page.<a href=#issue-ab22b570> ↵ </a></div>
1364+
13211365
<div class=issue>Implementations that support footnotes generally support page floats like <code>float: bottom</code>. Page floats should end up above the footnote area. How might this be specified?<a href=#issue-165f8769> ↵ </a></div>
13221366

1367+
1368+
13231369
<div class=issue>We need an algorithm for laying out footnotes<a href=#issue-da883bb8> ↵ </a></div>
13241370

13251371
<div class=issue>

0 commit comments

Comments
 (0)