adding text and examples of inline footnotes, revising text on footnote magic, added env() function

Author: howcom

css3-gcpm/Overview.src.html

@@ -269,6 +269,24 @@ <h4>Setting named strings: the 'string-set' property</h4>
 
 <p class="note">The expected use for ''content(first-letter)'' is to create one-letter headers, e.g., in dictionaries.</p>
 
+<dt>''env()''
+
+<dd>This functions returns data from the enviroment of the document at
+the time of formatting.
+
+<div class=example>
+
+<p>Possible uses of this function are:
+
+<pre>
+  string-set: date env(year) "-" env(month) "-"  env(day);
+  string-set: date env(YYYY) "-" env(MM) "-"  env(DD);
+  string-set: date env(date);
+  string-set: url env(url);
+</pre>
+
+</div>
+
 </dl>
 </dl>
 
@@ -594,8 +612,7 @@ <h2>Leaders</h2>
 &lt;/div>
 </pre>
 
-<p>If the name and number end up on different lines (e.g., in a narrow
-column), it may be formatted like this:
+<p>If the name and number end up on different lines (e.g., in a narrow column), it may be formatted like this:
 
 <pre>
 John Doe....
@@ -806,7 +823,7 @@ <h2>Footnotes</h2>
 
 <pre>
 &lt;style>
-.footnote { float: footnote }
+.footnote { float: footnote; display: block; }
 &lt;/style>
 
 &lt;p>A sentence consists of words. &lt;span class="footnote">Most often.&lt;/span>.
@@ -836,6 +853,7 @@ <h2>Footnotes</h2>
 @media print {
   .footnote { 
     float: footnote;
+    display: block;
     content: target-pull(attr(href, url)) }
   .call { display: none }
 }
@@ -869,6 +887,7 @@ <h2>Footnotes</h2>
 span[title]::after { 
   content: attr(title);
   float: footnote;
+  display: block;
 }
 </pre>
 </div>
@@ -884,10 +903,35 @@ <h3>Turning elements into footnotes</h3>
 <pre>
 span.footnote { 
   float: footnote;
+  display: block;
+}
+</pre>
+</div>
+
+<p>The 'display' property determines how elements in the footnote area are displayed. 
+
+<div class="example">
+<p>In this example, the footnotes are displayed inline:
+
+<pre>
+span.footnote { 
+  float: footnote;
+  display: inline; /* probably not necessary for &lt;span&gt; elements */
+}
+span.footnote::before { 
+  content: counter(footnote);
 }
 </pre>
+
+<p>Here is one possible presentation of inline footnotes:
+
+<pre>
+&#xB9; The first footnote. &#xBA; The second footnote. 
+</pre>
 </div>
 
+<p class=issue>Instead of relying on the 'display' property for each footnote element, there could be a setting in @footnote for this.
+
 <p>For each new footnote element, the ''footnote'' counter is automatically
 incremented. 
 
@@ -902,12 +946,19 @@ <h3>Turning elements into footnotes</h3>
 
 <h3>The footnote area</h3>
 
+
 <p>All elements with ''float: footnote'' are moved to the <em>footnote
 area</em>. The footnote area is described by an @footnote-rule inside
 the @page-rule. By default, the footnote area appears at the bottom of
-the page, but it can be positioned using page floats (as described
-below) and 'position: fixed'.
+the page, but it can be positioned in other places. 
+
+<p class=issue>Should the footnote are be positiond using page floats
+or (fixed?) absolute positioning? Or both? In any case, it is
+unclear how to make the 'gr' unit refer to the column width of a
+multicol element. Which element, exactly? The one at the bottom of the
+page, of course. Hmm.
 
+<p class=issue>
 
 <div class="example">
 
@@ -922,37 +973,29 @@ <h3>The footnote area</h3>
 </div>
 
 
-<!--<p>An element with 'float: footnote' inherits from its parent, not from @footnote.-->
-
-<!--
-<p>The footnote area does not have to be placed at the bottom of the
-page. It can be moved to anywhere on the page using the 'float' property or
-''position: fixed''. 
--->
-
 
 <div class="example">
-<p>These rules place the footnote area on the left side of the page:
+<p>These rules place the footnote area in the bottom left corner of the page:
 
 <pre>
 @page {
   @footnote { 
     position: fixed;
-    top: 10em;
-    left: 3em;
+    bottom: 0;
+    left: 0;
     width: 5em;
   }
 }
 </pre>
 </div>
 
 <div class="example issue">
-<p>How do we place the footnote area in a certain column? Perhaps:
+<p>This code places the footnote area at the bottom of the right column:
 
 <pre>
 @page {
   @footnote { 
-    float: bottom left multicol;
+    float: bottom right multicol;
     width: 1gr;
   }
 }
@@ -1042,40 +1085,13 @@ <h3>Footnote calls</h3>
 
 <p>The resulting note call is a super-script decimal number. 
 
-<!--
-<div class="example">
-
-The content and style of the footnote-call is set on the
-''footnote-call'' pseudo-element.
-
-</div>
--->
-<!--
-<p class="issue">Should any white space characters between the
-note-call and and the preceding content be removed?
--->
-<!--
-<div class="example">
-The goal is to achieve this result:
-
-<pre>
-  ... some notion¹
-</pre>
-
-<p>rather than this:
-
-<pre>
-  ... some notion ¹
-</pre>
-</div>
--->
-
 
 <h3>Footnote markers</h3>
 
 <p>A ::footnote-marker pseudo-element is added to each footnote
-element. User agents must, by default, show the "footnote" counter in
-the footnote-marker.
+element, in the same place, and replacing, the ::before
+pseudo-element. User agents must, by default, show the "footnote"
+counter in the footnote-marker.
 
 <div class="example">
 <p>User Agents may display footnote-calls and footnote-markers this way by default:
@@ -1169,16 +1185,17 @@ <h3>Laying out footnotes</h3>
 
 <h3>Footnote magic</h3>
 
+<p>When an element is turned into a footnote, certain magical things
+happen. The element is moved to the footnote area, a footnote call is
+left behind in its place, a footnote marker is displayed before the
+element, and the footnote counter is incremented.
+
 <p>When rendering footnotes, User Agents may apply certain heuristics
 to improve the presentation. For example, the space between a
 footnote-call and surrounding text may be adjusted. Another example is
 the height of the footnote area; it may be heuristically constrained
 to limit the area that is used for footnotes.
 
-<p>The "footnote" counter represents another kind of magic; it is
-automatically created and incremented each time an element is turned
-into a footnote, and the footnotes and footnote-calls are
-automatically labeled with the value of the footnote counter.
 
 
 <!--
@@ -1221,6 +1238,7 @@ <h2>Clipping borders</h2>
 
 <h3>The 'border-clip' properties</h3>
 
+
 <table class=propdef>
     <tr>
       <td><em>Name:</em>
@@ -1248,6 +1266,8 @@ <h3>The 'border-clip' properties</h3>
       <td>''normal'', or a list consisting of absolute lengths, or percentages as specified
 </table>
 
+<p class=issue>Should these properties be simplified to only accept <code>normal | [ &lt;length&gt; | &lt;percentage&gt; ] +</code>?
+
 <p>These properties split their respective borders into parts along
 the border edge. The first part is visible, the second is invisible,
 the third part is visible, etc. Parts can be specified with lengths,
@@ -1508,7 +1528,7 @@ <h3>The 'border-clip' properties</h3>
 border-top-parts: 40px 20px 0 1fr repeat(20px 20px) 0 1fr 40px;
 </pre>
 
-<p>In this example, there will be a visible 40px border part on each end of the top border. Inside the 40px border parts, there will be an invisible border part of at least 20px. Inside these invisible border parts, there will be visible border parts, each 20px long with 20px invisble border parts between them.
+<p>In this example, there will be a visible 40px border part on each end of the top border. Inside the 40px border parts, there will be an invisible border part of at least 20px. Inside these invisible border parts, there will be visible border parts, each 20px long with 20px invisible border parts between them.
 <div style="position: relative; width: 192px; background: white; padding: 40px">
 
 <div style="border: 4px solid black; height: 40px"></div>
@@ -1535,7 +1555,7 @@ <h3>The 'border-clip' properties</h3>
 border-top-parts: 40px 20px 0 1fr 20px 20px 0 1fr 40px;
 </pre>
 
-<p>In this example, there will be a visible 40px border part on each end of the top border. Inside the 40px border parts, there will be an invisible border part of at least 20px. Inside these invisible border parts, there will be visible border parts, each 20px long with 20px invisble border parts between them.
+<p>In this example, there will be a visible 40px border part on each end of the top border. Inside the 40px border parts, there will be an invisible border part of at least 20px. Inside these invisible border parts, there will be visible border parts, each 20px long with 20px invisible border parts between them.
 <div style="position: relative; width: 192px; background: white; padding: 40px">
 
 <div style="border: 4px solid black; height: 40px"></div>
@@ -2718,7 +2738,7 @@ <h2>Page floats</h2>
    <dd>The element may intrude neighboring columns; if the element is not in a multi-column element, this keyword has no effect.
 
    <dt>unless-room
-   <dd>If the element can be laid out in its natural position without causing a page break, it should be laid out there disregarding the 'float' property; in other cases the other values on 'float' will dertermine its floating behaviour.
+   <dd>If the element can be laid out in its natural position without causing a page break, it should be laid out there disregarding the 'float' property; in other cases the other values on 'float' will determine its floating behavior.
 
 
    <dt>top
@@ -2892,7 +2912,7 @@ <h2>Page floats</h2>
 
 <h3>Float intrusion in multicol elements</h3>
 
-<p>In multi-colum layouts [[CSS3MULTICOL]], floats appear within columns; they never intrude into neighboring columns. 
+<p>In multi-column layouts [[CSS3MULTICOL]], floats appear within columns; they never intrude into neighboring columns. 
 
 <div class=example>
 
@@ -3042,7 +3062,7 @@ <h2>Advanced multi-column layout</h2>
 to page floats; elements escape their normal flow root by setting
 a value on 'float'. In the case of multi-column layout, the keyword is
 ''multicol'' (instead of ''page'') and it indicates that the
-element should floated wrt. the multi-column element instead of the
+element should floated with regard to. the multi-column element instead of the
 column where it naturally occurs.
 
 <p>To further enhance positioning, the 'float-offset' property is
@@ -3540,6 +3560,8 @@ <h3>The 'float-offset' property</h3>
 
 <div class="example">
 
+<p>Consider this code:
+
 <pre>
 img { 
   float: top left multicol;