- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 23 Aug 2011 17:46:41 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv12927
Modified Files:
Overview.html Overview.src.html
Log Message:
More rewriting of the flow/order section.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.40
retrieving revision 1.41
diff -u -d -r1.40 -r1.41
--- Overview.html 23 Aug 2011 01:14:07 -0000 1.40
+++ Overview.html 23 Aug 2011 17:46:39 -0000 1.41
@@ -142,69 +142,73 @@
Items</a>
</ul>
- <li><a href="#flex-flow"><span class=secno>3. </span> Flexbox Flow
- Direction: the ‘<code class=property>flex-flow</code>’
- property</a>
+ <li><a href="#ordering-orientation"><span class=secno>3. </span> Ordering
+ and Orientation</a>
+ <ul class=toc>
+ <li><a href="#flex-flow"><span class=secno>3.1. </span> Flexbox Flow
+ Direction: the ‘<code class=property>flex-flow</code>’
+ property</a>
- <li><a href="#flex-order"><span class=secno>4. </span> Display Order: the
- ‘<code class=property>flex-order</code>’ property</a>
+ <li><a href="#flex-order"><span class=secno>3.2. </span> Display Order:
+ the ‘<code class=property>flex-order</code>’ property</a>
+ </ul>
- <li><a href="#flexibility"><span class=secno>5. </span> Flexibility</a>
+ <li><a href="#flexibility"><span class=secno>4. </span> Flexibility</a>
<ul class=toc>
- <li><a href="#resolving-flexible-lengths"><span class=secno>5.1. </span>
+ <li><a href="#resolving-flexible-lengths"><span class=secno>4.1. </span>
Resolving Flexible Lengths</a>
- <li><a href="#flex-function"><span class=secno>5.2. </span> The
+ <li><a href="#flex-function"><span class=secno>4.2. </span> The
‘<code class=css>flex()</code>’ function</a>
- <li><a href="#flexible-margins"><span class=secno>5.3. </span> Flexible
+ <li><a href="#flexible-margins"><span class=secno>4.3. </span> Flexible
margins and paddings</a>
</ul>
- <li><a href="#flex-pack"><span class=secno>6. </span> The ‘<code
+ <li><a href="#flex-pack"><span class=secno>5. </span> The ‘<code
class=property>flex-pack</code>’ property</a>
- <li><a href="#flex-align"><span class=secno>7. </span> The ‘<code
+ <li><a href="#flex-align"><span class=secno>6. </span> The ‘<code
class=property>flex-align</code>’ property</a>
- <li><a href="#multiline"><span class=secno>8. </span> Multi-line
+ <li><a href="#multiline"><span class=secno>7. </span> Multi-line
flexbox</a>
<ul class=toc>
- <li><a href="#flex-line-pack"><span class=secno>8.1. </span>
+ <li><a href="#flex-line-pack"><span class=secno>7.1. </span>
‘<code class=property>flex-line-pack</code>’ property</a>
</ul>
- <li><a href="#free-space-algorithm"><span class=secno>9. </span> Free
+ <li><a href="#free-space-algorithm"><span class=secno>8. </span> Free
Space Calculation and Distribution</a>
<ul class=toc>
- <li><a href="#free-space-algorithm-initial"><span class=secno>9.1.
+ <li><a href="#free-space-algorithm-initial"><span class=secno>8.1.
</span> Initial Computation</a>
- <li><a href="#first-distribution-round"><span class=secno>9.2. </span>
+ <li><a href="#first-distribution-round"><span class=secno>8.2. </span>
First Distribution Round</a>
- <li><a href="#second-distribution-round"><span class=secno>9.3. </span>
+ <li><a href="#second-distribution-round"><span class=secno>8.3. </span>
Second Distribution Round</a>
- <li><a href="#intermediate-computation"><span class=secno>9.4. </span>
+ <li><a href="#intermediate-computation"><span class=secno>8.4. </span>
Intermediate Computation</a>
- <li><a href="#third-distribution-round"><span class=secno>9.5. </span>
+ <li><a href="#third-distribution-round"><span class=secno>8.5. </span>
Third Distribution Round</a>
- <li><a href="#free-space-allocation-algorithm"><span class=secno>9.6.
+ <li><a href="#free-space-allocation-algorithm"><span class=secno>8.6.
</span> Free Space Allocation Algorithm</a>
</ul>
- <li><a href="#pagination"><span class=secno>10. </span> Page breaks in
+ <li><a href="#pagination"><span class=secno>9. </span> Page breaks in
flexbox</a>
- <li><a href="#layout-interface"><span class=secno>11. </span> Interface
+ <li><a href="#layout-interface"><span class=secno>10. </span> Interface
With Other Layout Algorithms</a>
- <li><a href="#changes"><span class=secno>12. </span>Changes</a>
+ <li><a href="#changes"><span class=secno>11. </span>Changes</a>
<ul class=toc>
- <li><a href="#changes-from-ed-16-june-2011"><span class=secno>12.1.
+ <li><a href="#changes-from-ed-16-june-2011"><span class=secno>11.1.
</span>Changes from ED 16-June-2011</a>
</ul>
@@ -485,9 +489,25 @@
‘<code class=property>height</code>’ properties are
‘<code class=css>auto</code>’), similar to tables or floats.
- <h2 id=flex-flow><span class=secno>3. </span> Flexbox Flow Direction: the
+ <h2 id=ordering-orientation><span class=secno>3. </span> Ordering and
+ Orientation</h2>
+
+ <p>The first level of flexbox functionality is the ability to lay out a
+ flexbox's contents in any direction and in any order. This allows an
+ author to trivially achieve effects that would previously have required
+ complex or fragile methods, such as using the ‘<code
+ class=property>float</code>’ property to lay out a horizontal
+ navigation bar (which then requires further effort with the ‘<code
+ class=property>clear</code>’ property or others to make the elements
+ interact nicely with the rest of the page). This functionality is exposed
+ through the ‘<a href="#flex-flow0"><code
+ class=property>flex-flow</code></a>’ and ‘<a
+ href="#flex-order0"><code class=property>flex-order</code></a>’
+ properties.
+
+ <h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
‘<a href="#flex-flow0"><code
- class=property>flex-flow</code></a>’ property</h2>
+ class=property>flex-flow</code></a>’ property</h3>
<table class=propdef>
<tbody>
@@ -741,11 +761,11 @@
flex-flow:vertical wrap-reverse } /* cross axis is left-to-right (opposite to block direction) */</pre>
</div>
- <h2 id=flex-order><span class=secno>4. </span> Display Order: the ‘<a
- href="#flex-order0"><code class=property>flex-order</code></a>’
- property</h2>
+ <h3 id=flex-order><span class=secno>3.2. </span> Display Order: the
+ ‘<a href="#flex-order0"><code
+ class=property>flex-order</code></a>’ property</h3>
- <p><a href="#flexbox-item"><i>flexbox items</i></a> are, by default,
+ <p><a href="#flexbox-item"><i>Flexbox items</i></a> are, by default,
displayed and laid out in the same order as they appear in the source
document. The ‘<a href="#flex-order0"><code
class=property>flex-order</code></a>’ property may be used to change
@@ -823,7 +843,11 @@
<pre><code>item2 item4 item1 item3</code></pre>
</div>
- <h2 id=flexibility><span class=secno>5. </span> Flexibility</h2>
+ <p class=issue>Add a realistic example of tab reordering.
+
+ <p class=issue>Add an example of reordering columns in a page.
+
+ <h2 id=flexibility><span class=secno>4. </span> Flexibility</h2>
<p>The defining aspect of flexbox layout is the ability to make various
lengths of the <a href="#flexbox-item"><i>flexbox items</i></a> flexible.
@@ -841,7 +865,7 @@
<p class=issue>TODO: Examples!</p>
</div>
- <h3 id=resolving-flexible-lengths><span class=secno>5.1. </span> Resolving
+ <h3 id=resolving-flexible-lengths><span class=secno>4.1. </span> Resolving
Flexible Lengths</h3>
<p>Flexbox layout resolves a <i>flexible length</i> into a definite length
@@ -881,7 +905,7 @@
precise details of how free space is determined and assigned to flexible
lengths is detailed in a later chapter.
- <h3 id=flex-function><span class=secno>5.2. </span> The ‘<code
+ <h3 id=flex-function><span class=secno>4.2. </span> The ‘<code
class=css>flex()</code>’ function</h3>
<p>The ‘<code class=css>flex()</code>’ function is used to
@@ -998,7 +1022,7 @@
<i>preferred size</i> in pixels when in "quirks mode" and when it is the
third value in flex() function with three values.
- <h3 id=flexible-margins><span class=secno>5.3. </span> Flexible margins and
+ <h3 id=flexible-margins><span class=secno>4.3. </span> Flexible margins and
paddings</h3>
<p>Paddings and margins are made flexible by setting their value to
@@ -1025,7 +1049,7 @@
<p class=issue>TODO: need solid use cases (and illustrations here) for
flexible margins and paddings.
- <h2 id=flex-pack><span class=secno>6. </span> The ‘<a
+ <h2 id=flex-pack><span class=secno>5. </span> The ‘<a
href="#flex-pack0"><code class=property>flex-pack</code></a>’
property</h2>
@@ -1117,7 +1141,7 @@
<p class=issue>TODO: Examples showing the four values.</p>
</div>
- <h2 id=flex-align><span class=secno>7. </span> The ‘<a
+ <h2 id=flex-align><span class=secno>6. </span> The ‘<a
href="#flex-align0"><code class=property>flex-align</code></a>’
property</h2>
@@ -1375,7 +1399,7 @@
<p class=issue>TODO: alignment rules should be compatible with
css3-grid-layout, if possible
- <h2 id=multiline><span class=secno>8. </span> Multi-line flexbox</h2>
+ <h2 id=multiline><span class=secno>7. </span> Multi-line flexbox</h2>
<p>If no ‘<code class=property>wrap-</code>’ keyword is
included in ‘<a href="#flex-flow0"><code
@@ -1490,7 +1514,7 @@
</div>
</div>
- <h3 id=flex-line-pack><span class=secno>8.1. </span> ‘<a
+ <h3 id=flex-line-pack><span class=secno>7.1. </span> ‘<a
href="#propdef-flex-line-pack"><code
class=property>flex-line-pack</code></a>’ property</h3>
@@ -1573,7 +1597,7 @@
<p class=issue>TODO: examples
- <h2 id=free-space-algorithm><span class=secno>9. </span> Free Space
+ <h2 id=free-space-algorithm><span class=secno>8. </span> Free Space
Calculation and Distribution</h2>
<p class=issue>IS THIS SECTION NECESSARY? It may be useful for implementors
@@ -1633,7 +1657,7 @@
"inner length" == "extent along cross axis"</p>
</div>
- <h3 id=free-space-algorithm-initial><span class=secno>9.1. </span> Initial
+ <h3 id=free-space-algorithm-initial><span class=secno>8.1. </span> Initial
Computation</h3>
<p>This step computes necessary information required to run the free-space
@@ -1761,7 +1785,7 @@
</dl>
</ol>
- <h3 id=first-distribution-round><span class=secno>9.2. </span> First
+ <h3 id=first-distribution-round><span class=secno>8.2. </span> First
Distribution Round</h3>
<p>This step distributes free space to the flexible lengths of the flexbox
@@ -1798,7 +1822,7 @@
href="#available-free-space"><i>available free space</i></a> equal to the
flexbox's inner measure.
- <h3 id=second-distribution-round><span class=secno>9.3. </span> Second
+ <h3 id=second-distribution-round><span class=secno>8.3. </span> Second
Distribution Round</h3>
<p>This step distributes any leftover available space to the <a
@@ -1814,13 +1838,13 @@
href="#available-free-space"><i>available free space</i></a> equal to the
flexbox's inner measure.
- <h3 id=intermediate-computation><span class=secno>9.4. </span> Intermediate
+ <h3 id=intermediate-computation><span class=secno>8.4. </span> Intermediate
Computation</h3>
<p>Determine the length of the flexbox, given the sizes that have already
been determined.
- <h3 id=third-distribution-round><span class=secno>9.5. </span> Third
+ <h3 id=third-distribution-round><span class=secno>8.5. </span> Third
Distribution Round</h3>
<p>This step distributes free space to the flexible lengths of each flexbox
@@ -1868,7 +1892,7 @@
href="#available-free-space"><i>available free space</i></a> equal to the
flexbox's inner length.
- <h3 id=free-space-allocation-algorithm><span class=secno>9.6. </span> Free
+ <h3 id=free-space-allocation-algorithm><span class=secno>8.6. </span> Free
Space Allocation Algorithm</h3>
<p>This section describes the algorithm used to allocate free space to a
@@ -1949,7 +1973,7 @@
inflexible lengths equal to their preferred size, and return them.
</ol>
- <h2 id=pagination><span class=secno>10. </span> Page breaks in flexbox</h2>
+ <h2 id=pagination><span class=secno>9. </span> Page breaks in flexbox</h2>
<p class=issue>TODO: define how flexbox should break on pages, columns,
etc. This may or may not be normative until there is more than one
@@ -1991,7 +2015,7 @@
<p class=issue>TODO: add more detail: how breaking affect sizing (for
broken boxes and boxes after the break) and alignment
- <h2 id=layout-interface><span class=secno>11. </span> Interface With Other
+ <h2 id=layout-interface><span class=secno>10. </span> Interface With Other
Layout Algorithms</h2>
<div class=issue>
@@ -2058,9 +2082,9 @@
<hr title="Separator from footer">
- <h2 id=changes><span class=secno>12. </span>Changes</h2>
+ <h2 id=changes><span class=secno>11. </span>Changes</h2>
- <h3 id=changes-from-ed-16-june-2011><span class=secno>12.1. </span>Changes
+ <h3 id=changes-from-ed-16-june-2011><span class=secno>11.1. </span>Changes
from ED 16-June-2011</h3>
<ul>
@@ -2321,27 +2345,27 @@
<ul class=indexlist>
<li>after, <a href="#flex-align-after"
- title=after><strong>7.</strong></a>, <a href="#flex-line-pack-after"
- title=after><strong>8.1.</strong></a>
+ title=after><strong>6.</strong></a>, <a href="#flex-line-pack-after"
+ title=after><strong>7.1.</strong></a>
<li>available free space, <a href="#available-free-space" title="available
- free space"><strong>9.</strong></a>
+ free space"><strong>8.</strong></a>
<li>baseline, <a href="#flex-align-baseline"
- title=baseline><strong>7.</strong></a>
+ title=baseline><strong>6.</strong></a>
<li>before, <a href="#flex-align-before"
- title=before><strong>7.</strong></a>, <a href="#flex-line-pack-before"
- title=before><strong>8.1.</strong></a>
+ title=before><strong>6.</strong></a>, <a href="#flex-line-pack-before"
+ title=before><strong>7.1.</strong></a>
<li>center, <a href="#flex-pack-center"
- title=center><strong>6.</strong></a>
+ title=center><strong>5.</strong></a>
<li>column, <a href="#flex-flow-column"
- title=column><strong>3.</strong></a>
+ title=column><strong>3.1.</strong></a>
<li>column-reverse, <a href="#flex-flow-column-reverse"
- title=column-reverse><strong>3.</strong></a>
+ title=column-reverse><strong>3.1.</strong></a>
<li>cross axis, <a href="#cross-axis" title="cross
axis"><strong>2.</strong></a>
@@ -2356,12 +2380,12 @@
title=cross-start><strong>2.</strong></a>
<li>distribute, <a href="#flex-line-pack-distribute"
- title=distribute><strong>8.1.</strong></a>
+ title=distribute><strong>7.1.</strong></a>
- <li>end, <a href="#flex-pack-end" title=end><strong>6.</strong></a>
+ <li>end, <a href="#flex-pack-end" title=end><strong>5.</strong></a>
<li>flex-align, <a href="#flex-align0"
- title=flex-align><strong>7.</strong></a>
+ title=flex-align><strong>6.</strong></a>
<li>flexbox, <a href="#flexbox" title=flexbox><strong>2.</strong></a>
@@ -2375,43 +2399,43 @@
item's"><strong>2.</strong></a>
<li>flex-flow, <a href="#flex-flow0"
- title=flex-flow><strong>3.</strong></a>
+ title=flex-flow><strong>3.1.</strong></a>
<li>flex-line-pack, <a href="#propdef-flex-line-pack"
- title=flex-line-pack><strong>8.1.</strong></a>
+ title=flex-line-pack><strong>7.1.</strong></a>
<li>flex-order, <a href="#flex-order0"
- title=flex-order><strong>4.</strong></a>
+ title=flex-order><strong>3.2.</strong></a>
<li>flex-pack, <a href="#flex-pack0"
- title=flex-pack><strong>6.</strong></a>
+ title=flex-pack><strong>5.</strong></a>
<li>flex tuple, <a href="#flex-tuple" title="flex
- tuple"><strong>9.</strong></a>
+ tuple"><strong>8.</strong></a>
<li>flex tuples, <a href="#flex-tuples" title="flex
- tuples"><strong>9.1.</strong></a>
+ tuples"><strong>8.1.</strong></a>
<li>horizontal, <a href="#flex-flow-horizontal"
- title=horizontal><strong>3.</strong></a>
+ title=horizontal><strong>3.1.</strong></a>
<li>horizontal-ltr, <a href="#flex-flow-horizontal-ltr"
- title=horizontal-ltr><strong>3.</strong></a>
+ title=horizontal-ltr><strong>3.1.</strong></a>
<li>horizontal-reverse, <a href="#flex-flow-horizontal-reverse"
- title=horizontal-reverse><strong>3.</strong></a>
+ title=horizontal-reverse><strong>3.1.</strong></a>
<li>horizontal-rtl, <a href="#flex-flow-horizontal-rtl"
- title=horizontal-rtl><strong>3.</strong></a>
+ title=horizontal-rtl><strong>3.1.</strong></a>
<li>inner length, <a href="#inner-length" title="inner
- length"><strong>9.</strong></a>
+ length"><strong>8.</strong></a>
<li>inner measure, <a href="#inner-measure" title="inner
- measure"><strong>9.</strong></a>
+ measure"><strong>8.</strong></a>
<li>justify, <a href="#flex-pack-justify"
- title=justify><strong>6.</strong></a>
+ title=justify><strong>5.</strong></a>
<li>main axis, <a href="#main-axis" title="main
axis"><strong>2.</strong></a>
@@ -2425,65 +2449,65 @@
title=main-start><strong>2.</strong></a>
<li>middle, <a href="#flex-align-middle"
- title=middle><strong>7.</strong></a>, <a href="#flex-line-pack-middle"
- title=middle><strong>8.1.</strong></a>
+ title=middle><strong>6.</strong></a>, <a href="#flex-line-pack-middle"
+ title=middle><strong>7.1.</strong></a>
<li>negative flexibility, <a href="#negative-flexibility" title="negative
- flexibility"><strong>5.1.</strong></a>
+ flexibility"><strong>4.1.</strong></a>
<li>packing space, <a href="#packing-space" title="packing
- space"><strong>6.</strong></a>
+ space"><strong>5.</strong></a>
<li>positive flexibility, <a href="#positive-flexibility" title="positive
- flexibility"><strong>5.1.</strong></a>
+ flexibility"><strong>4.1.</strong></a>
<li>pre-flex size, <a href="#pre-flex-size" title="pre-flex
- size"><strong>5.1.</strong></a>
+ size"><strong>4.1.</strong></a>
<li>relevant length, <a href="#relevant-length" title="relevant
- length"><strong>9.</strong></a>
+ length"><strong>8.</strong></a>
- <li>row, <a href="#flex-flow-row" title=row><strong>3.</strong></a>
+ <li>row, <a href="#flex-flow-row" title=row><strong>3.1.</strong></a>
<li>row-reverse, <a href="#flex-flow-row-reverse"
- title=row-reverse><strong>3.</strong></a>
+ title=row-reverse><strong>3.1.</strong></a>
- <li>start, <a href="#flex-pack-start" title=start><strong>6.</strong></a>
+ <li>start, <a href="#flex-pack-start" title=start><strong>5.</strong></a>
<li>stretch, <a href="#flex-align-stretch"
- title=stretch><strong>7.</strong></a>
+ title=stretch><strong>6.</strong></a>
<li>total free space, <a href="#total-free-space" title="total free
- space"><strong>9.</strong></a>
+ space"><strong>8.</strong></a>
<li>vertical, <a href="#flex-flow-vertical"
- title=vertical><strong>3.</strong></a>
+ title=vertical><strong>3.1.</strong></a>
<li>vertical-btt, <a href="#flex-flow-row-vertical-btt"
- title=vertical-btt><strong>3.</strong></a>
+ title=vertical-btt><strong>3.1.</strong></a>
<li>vertical-reverse, <a href="#flex-flow-vertical-reverse"
- title=vertical-reverse><strong>3.</strong></a>
+ title=vertical-reverse><strong>3.1.</strong></a>
<li>vertical-ttb, <a href="#flex-flow-vertical-ttb"
- title=vertical-ttb><strong>3.</strong></a>
+ title=vertical-ttb><strong>3.1.</strong></a>
- <li>wrap, <a href="#flex-flow-wrap" title=wrap><strong>3.</strong></a>
+ <li>wrap, <a href="#flex-flow-wrap" title=wrap><strong>3.1.</strong></a>
<li>wrap-down, <a href="#flex-flow-wrap-down"
- title=wrap-down><strong>3.</strong></a>
+ title=wrap-down><strong>3.1.</strong></a>
<li>wrap-left, <a href="#flex-flow-wrap-left"
- title=wrap-left><strong>3.</strong></a>
+ title=wrap-left><strong>3.1.</strong></a>
<li>wrap-reverse, <a href="#flex-flow-wrap-reverse"
- title=wrap-reverse><strong>3.</strong></a>
+ title=wrap-reverse><strong>3.1.</strong></a>
<li>wrap-right, <a href="#flex-flow-wrap-right"
- title=wrap-right><strong>3.</strong></a>
+ title=wrap-right><strong>3.1.</strong></a>
<li>wrap-up, <a href="#flex-flow-wrap-up"
- title=wrap-up><strong>3.</strong></a>
+ title=wrap-up><strong>3.1.</strong></a>
</ul>
<!--end-index-->
</html>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.39
retrieving revision 1.40
diff -u -d -r1.39 -r1.40
--- Overview.src.html 23 Aug 2011 01:14:07 -0000 1.39
+++ Overview.src.html 23 Aug 2011 17:46:39 -0000 1.40
@@ -190,9 +190,13 @@
<p>A flexbox item creates a new BFC. The margins of a flexbox item do not collapse with any other margin. Flexboxes "shrinkwrap" their contents by default (when their 'width' or 'height' properties are ''auto''), similar to tables or floats.</p>
+<h2 id='ordering-orientation'>
+Ordering and Orientation</h2>
-<h2 id='flex-flow'>
-Flexbox Flow Direction: the 'flex-flow' property</h2>
+ <p>The first level of flexbox functionality is the ability to lay out a flexbox's contents in any direction and in any order. This allows an author to trivially achieve effects that would previously have required complex or fragile methods, such as using the 'float' property to lay out a horizontal navigation bar (which then requires further effort with the 'clear' property or others to make the elements interact nicely with the rest of the page). This functionality is exposed through the 'flex-flow' and 'flex-order' properties.</p>
+
+<h3 id='flex-flow'>
+Flexbox Flow Direction: the 'flex-flow' property</h3>
<table class=propdef>
<tbody>
@@ -327,10 +331,10 @@
</div>
-<h2 id='flex-order'>
-Display Order: the 'flex-order' property</h2>
+<h3 id='flex-order'>
+Display Order: the 'flex-order' property</h3>
- <p><i>flexbox items</i> are, by default, displayed and laid out in the same order as they appear in the source document. The 'flex-order' property may be used to change this ordering.</p>
+ <p><i>Flexbox items</i> are, by default, displayed and laid out in the same order as they appear in the source document. The 'flex-order' property may be used to change this ordering.</p>
<table class=propdef>
<tr>
@@ -379,6 +383,10 @@
<pre><code>item2 item4 item1 item3</code></pre>
</div>
+ <p class='issue'>Add a realistic example of tab reordering.</p>
+
+ <p class='issue'>Add an example of reordering columns in a page.</p>
+
<h2 id='flexibility'>
Flexibility</h2>
Received on Tuesday, 23 August 2011 17:46:50 UTC