- From: Alex Mogilevsky via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 29 Feb 2012 01:01:29 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv10531
Modified Files:
Overview.html Overview.src.html
Log Message:
added example and a picture for flex property intro
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.160
retrieving revision 1.161
diff -u -d -r1.160 -r1.161
--- Overview.html 28 Feb 2012 04:31:00 -0000 1.160
+++ Overview.html 29 Feb 2012 01:01:26 -0000 1.161
@@ -29,11 +29,11 @@
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
- <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 28 February 2012</h2>
+ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 29 February 2012</h2>
<dl>
<dt>This version:
- <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120228/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120228/</a>-->
+ <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120229/">http://www.w3.org/TR/2012/ED-css3-flexbox-20120229/</a>-->
<dd><a
@@ -78,7 +78,7 @@
<dd><a
href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
- with subject line "<code>[css3-flexbox] �message topic�</code>"
+ with subject line "<code>[css3-flexbox] …message topic…</code>"
<dt>Editors:
@@ -344,12 +344,12 @@
href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
definition conventions</a> from <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
- this specification are defined in CSS Level 2 Revision 1 <a href="#CSS21"
- rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS modules may expand
- the definitions of these value types: for example <a href="#CSS3COLOR"
- rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>, when combined with
- this module, expands the definition of the <color> value type as
- used in this specification.
+ this specification are defined in CSS Level 2 Revision 1 <a
+ href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
+ modules may expand the definitions of these value types: for example <a
+ href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
+ when combined with this module, expands the definition of the
+ <color> value type as used in this specification.
<p>In addition to the property-specific values listed in their definitions,
all properties defined in this specification also accept the <a
@@ -1257,34 +1257,23 @@
<div class=example>
<p>Flexibility allows elements to respond directly to the available space,
- in ways that are difficult or impossible in normal CSS. One common
- example is a page with one segment intended to stay on screen, and
- another section which may be long but which shouldn't scroll the page,
- like a chat room:</p>
+ optionally taking into account size of content:</p>
<pre>
<!DOCTYPE html>
-<body>
- <header>Channel: #csswg Topic: CSS IS AWE SOME</header>
- <article id='messages'>
- <p><b>Tab Atkins:</b>
- I think the layout algorithm is done.</p>
- <p><b>Fantasai:</b>
- SUBMIT BEFORE ZOD.</p>
- ...
- </article>
- <form>
- <input name='message'>
- <button type='submit'>Send</button>
- </form>
- </body>
- <style>
- body { display:flexbox; flex-flow: column; }
- #messages { flex:1; }
- </style></pre>
-
- <p class=issue>Illustrate this example.</p>
- </div>
+<style>
+ div { display:flexbox; outline:1px solid silver; }
+ p { flex:1 auto; margin:1em; background:gold; }
+</style>
+<div>
+ <p>"flexing"</p>
+ <p>allows the items to get bigger</p>
+ <p>or</p>
+ <p>smaller</p>
+</div>
+</pre>
+ <img alt="items with equal flexibility extend by equal amount"
+ src="images/wp7zxxyu.gif"></div>
<h2 id=alignment><span class=secno>8. </span> Alignment</h2>
@@ -2126,9 +2115,9 @@
class=property>break-</code>’ properties are supported on flexbox,
on flexbox items and inside flexbox items.
- <p>The following breaking rules refer to fragmentation container as �page�.
- The same rules apply to any other fragmenters. Change �page� to the
- appropriate fragmenter type as needed.
+ <p>The following breaking rules refer to fragmentation container as
+ “page”. The same rules apply to any other fragmenters. Change
+ “page” to the appropriate fragmenter type as needed.
<p>Breaks in and around flexbox are determined as follows:
@@ -2137,9 +2126,9 @@
have effect as normal. If breaks inside flexbox are allowed, break points
are determined using following rules.
- <li>When flexbox is continued after a break, flexbox�s available space in
- block direction is reduced by space consumed in previous pages. Consumed
- space before page break is:
+ <li>When flexbox is continued after a break, flexbox’s available space
+ in block direction is reduced by space consumed in previous pages.
+ Consumed space before page break is:
<ol>
<li>If flexbox starts on that page: the distance between start of
content box of the flexbox and the end of available space
@@ -2177,7 +2166,8 @@
id=break-inside-a-flexbox-item-is-considere>break inside a flexbox item
is considered</dfn> as follows:
<ol>
- <li>If the item has �break-inside:avoid�, it is pushed to the next page
+ <li>If the item has “break-inside:avoid”, it is pushed to the next
+ page
<li>Otherwise, it may be broken, according to breaking rules and
algorithms applicable to its display type.
@@ -2204,12 +2194,12 @@
main-axis sizes of items until total size exceeds avaialble space or a
forced break is encountered.
- <li>If border box of an item doesn�t fit in available space, a break
+ <li>If border box of an item doesn’t fit in available space, a break
inside the item is considered
<li>
<p>Items that fit on a page completely or partially are aligned
- according to �flex-pack� property, independently from the rest of
+ according to ‘flex-pack’ property, independently from the rest of
flexbox content.</p>
<p>Note that flexible lenghts are not recalculated on each page, even
@@ -2229,8 +2219,8 @@
<li>Items are collected in lines and laid out as usual, but in available
space on current page.
- <li>If border box of an item doesn�t fit on main-axis and it is the only
- item in its line:
+ <li>If border box of an item doesn’t fit on main-axis and it is the
+ only item in its line:
<ol>
<li>If the flexbox is not at the top of the page, it is moved to the
next page.
@@ -2267,11 +2257,11 @@
<li>Any items with baseline alignment must be aligned before considering
breaks inside items.
- <li>If border box of an item doesn�t fit in current page, a break inside
- the item is considered
+ <li>If border box of an item doesn’t fit in current page, a break
+ inside the item is considered
<li>Items that have fit completely on a previous page and items that are
- pushed to next page don�t have any rendering, leaving empty space as
+ pushed to next page don’t have any rendering, leaving empty space as
needed.
<li>Items that fit completely or partially on current page are aligned
@@ -2346,26 +2336,27 @@
<h3 id=conventions><span class=secno>11.1. </span> Document conventions</h3>
<p>Conformance requirements are expressed with a combination of descriptive
- assertions and RFC 2119 terminology. The key words �MUST�, �MUST NOT�,
- �REQUIRED�, �SHALL�, �SHALL NOT�, �SHOULD�, �SHOULD NOT�, �RECOMMENDED�,
- �MAY�, and �OPTIONAL� in the normative parts of this document are to be
- interpreted as described in RFC 2119. However, for readability, these
- words do not appear in all uppercase letters in this specification.
+ assertions and RFC 2119 terminology. The key words “MUST”, “MUST
+ NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
+ “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
+ normative parts of this document are to be interpreted as described in RFC
+ 2119. However, for readability, these words do not appear in all uppercase
+ letters in this specification.
<p>All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes. <a
href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
- <p>Examples in this specification are introduced with the words �for
- example� or are set apart from the normative text with
+ <p>Examples in this specification are introduced with the words “for
+ example” or are set apart from the normative text with
<code>class="example"</code>, like this:
<div class=example>
<p>This is an example of an informative example.</p>
</div>
- <p>Informative notes begin with the word �Note� and are set apart from the
- normative text with <code>class="note"</code>, like this:
+ <p>Informative notes begin with the word “Note” and are set apart from
+ the normative text with <code>class="note"</code>, like this:
<p class=note>Note, this is an informative note.
@@ -2499,7 +2490,7 @@
<li>is available to the general public. The implementation may be a
shipping product or other publicly available version (i.e., beta
- version, preview release, or �nightly build�). Non-shipping product
+ version, preview release, or “nightly build”). Non-shipping product
releases must have implemented the feature(s) for a period of at least
one month in order to demonstrate stability.
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.158
retrieving revision 1.159
diff -u -d -r1.158 -r1.159
--- Overview.src.html 28 Feb 2012 04:31:01 -0000 1.158
+++ Overview.src.html 29 Feb 2012 01:01:26 -0000 1.159
@@ -608,31 +608,26 @@
<p>A ''<flex>'' value is transitionable, by transitioning the <i>preferred size</i>, <i>positive flexibility</i>, and <i>negative flexibility</i> independently. ''<flex>'' can also transition to and from a <length>, by treating the length as if it were a flexible length with a positive and negative flexibility of zero and a preferred size of the length.</p>
<div class='example'>
- <p>Flexibility allows elements to respond directly to the available space, in ways that are difficult or impossible in normal CSS. One common example is a page with one segment intended to stay on screen, and another section which may be long but which shouldn't scroll the page, like a chat room:</p>
+ <p>Flexibility allows elements to respond directly to the available space,
+ optionally taking into account size of content:</p>
<pre>
<!DOCTYPE html>
-<body>
- <header>Channel: #csswg Topic: CSS IS AWE SOME</header>
- <article id='messages'>
- <p><b>Tab Atkins:</b>
- I think the layout algorithm is done.</p>
- <p><b>Fantasai:</b>
- SUBMIT BEFORE ZOD.</p>
- ...
- </article>
- <form>
- <input name='message'>
- <button type='submit'>Send</button>
- </form>
- </body>
- <style>
- body { display:flexbox; flex-flow: column; }
- #messages { flex:1; }
- </style></pre>
+<style>
+ div { display:flexbox; outline:1px solid silver; }
+ p { flex:1 auto; margin:1em; background:gold; }
+</style>
+<div>
+ <p>"flexing"</p>
+ <p>allows the items to get bigger</p>
+ <p>or</p>
+ <p>smaller</p>
+</div>
+</pre>
- <p class='issue'>Illustrate this example.</p>
- </div>
+<img src="images/wp7zxxyu.gif" alt="items with equal flexibility extend by equal amount">
+
+</div>
<h2 id='alignment'>
Alignment</h2>
Received on Wednesday, 29 February 2012 01:01:31 UTC