- From: Ishii Koji via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 28 Apr 2011 04:55:27 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css-line-grid
In directory hutz:/tmp/cvs-serv25774
Modified Files:
Overview.html Overview.src.html
Log Message:
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css-line-grid/Overview.html,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -d -r1.1 -r1.2
--- Overview.html 27 Apr 2011 05:37:39 -0000 1.1
+++ Overview.html 28 Apr 2011 04:55:25 -0000 1.2
@@ -11,9 +11,6 @@
type="text/css">
<style type="text/css">
- .right {
- float:right;
- }
</style>
<body>
@@ -23,13 +20,13 @@
<h1>CSS Line Grid Module</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 April 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 28 April 2011</h2>
<dl>
<dt>This version:
- <dd><a href="http://www.w3.org/TR/2011/ED-unknown-shortname-20110426">
- http://www.w3.org/TR/2011/ED-unknown-shortname-20110426</a> <!--
+ <dd><a href="http://www.w3.org/TR/2011/ED-unknown-shortname-20110428">
+ http://www.w3.org/TR/2011/ED-unknown-shortname-20110428</a> <!--
<dt>Latest version:
<dd><a href="http://www.w3.org/TR/css-line-grid">
http://www.w3.org/TR/css-line-grid</a>
@@ -137,9 +134,9 @@
<li><a href="#defining-grids"><span class=secno>2. </span>Defining
Grids</a>
<ul class=toc>
- <li><a href="#H1"><span class=secno>2.1. </span>Define Line Grids: the
- ‘<code class=property>layout-grid-line</code>’ property</a>
-
+ <li><a href="#layout-grid-line-prop"><span class=secno>2.1.
+ </span>Define Line Grids: the ‘<code
+ class=property>layout-grid-line</code>’ property</a>
</ul>
<li><a href="#using-grids"><span class=secno>3. </span>Using Grids</a>
@@ -150,15 +147,14 @@
<li><a href="#grid-shorthand-the-layout-grid-property"><span
class=secno>3.2. </span>Grid Shorthand: the ‘<code
- class=css>layout-grid</code>’ property</a>
+ class=property>layout-grid</code>’ property</a>
- <li><a href="#the-gd-length-unit"><span class=secno>3.3. </span>The
+ <li><a href="#grid-length-unit"><span class=secno>3.3. </span>The
‘<code class=css>gd</code>’ length unit</a>
- <li><a href="#rounding-down-to-multiple-of-units-gd-an"><span
- class=secno>3.4. </span>Rounding Down to Multiple of Units:
- ‘<code class=css>*gd</code>’ and ‘<code
- class=css>*em</code>’</a>
+ <li><a href="#round-length"><span class=secno>3.4. </span>Rounding Down
+ to Multiple of Units: ‘<code class=css>*gd</code>’ and
+ ‘<code class=css>*em</code>’</a>
</ul>
<li><a href="#conformance"><span class=secno>4. </span> Conformance</a>
@@ -209,14 +205,18 @@
<li>Align lines between columns in multi-column documents.
<li>Layout lines at the same position in every page in paged media.
- Keeping the position of the bottom line of a page has benefits from
- design perspective. This also results better readability on duplex
- printing, two pages spreads, or when displaying on slow display devices
- like e-ink.
+ Keeping the position of the bottom line of a page has benefits for design
+ and readability. This also results better readability on duplex printing,
+ two pages spreads, or when displaying on slow display devices like e-ink.
- <li>East Asian layouts require the use of grid layout more often than
+ <li>East Asian layouts require the use of vertical rhythm more often than
other scripts does, even in single column, non-paged media documents, as
defined in <a href="#JLREQ" rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>.
+
+ <li>In East Asian documents, it is often desirable to make the line width
+ to be multiple of <em>em</em>. Most East Asian characters have 1em
+ advance, and most East Asian documents are justified, so this minimizes
+ the case where justification needs to expand lines.
</ul>
<p>There are several types of objects in a document that can break the
@@ -242,9 +242,7 @@
<p>It is important to control these capabilities independently, so that
align to grids can be turned off for tables for example, but can be turned
- back on for the following text to the original grids. For example,
- oftentimes, text in tables do not align to line grids. But text following
- the table should align to the same grids as the text before the table.
+ back on for the following text to the original grids.
<h3 id=placement><span class=secno>1.2. </span>Module Interactions</h3>
@@ -304,8 +302,8 @@
<h2 id=defining-grids><span class=secno>2. </span>Defining Grids</h2>
- <h3 id=H1><span class=secno>2.1. </span>Define Line Grids: the ‘<a
- href="#layout-grid-line"><code
+ <h3 id=layout-grid-line-prop><span class=secno>2.1. </span>Define Line
+ Grids: the ‘<a href="#layout-grid-line"><code
class=property>layout-grid-line</code></a>’ property</h3>
<table class=propdef>
@@ -351,7 +349,13 @@
<td>specified value
</table>
- <p class=issue>TBD
+ <p class=issue>TBD: I expect this to be very similar to the one in <a
+ href="http://www.w3.org/TR/2001/WD-css3-text-20010517/#layout-grid-line-prop">CSS3
+ module: text WD 20010517</a>.
+
+ <p class=issue>Grid origin should be defined by the element that has this
+ property. In that case, should it inherit, or not inherit value but
+ inherit grid?
<h2 id=using-grids><span class=secno>3. </span>Using Grids</h2>
@@ -409,7 +413,7 @@
<dt><dfn id=none title="layout-grid-mode::none">‘<code
class=css>none</code>’</dfn>
- <dd>Do not align any objects to grids.
+ <dd>Do not align any objects to the grids.
<dt><dfn id=block title="layout-grid-mode::block">‘<code
class=css>block</code>’</dfn>
@@ -466,29 +470,30 @@
class=property>layout-grid-line</code></a>’ property.
<div class=example>
- <p>When a different size of text like headings wraps, it is usually
- aligned to grids as a block and lines within the block do not align.</p>
-
- <div class=figure> <img alt="A line of large text wraps within line grids"
+ <div class=sidefigure> <img alt="Large text wraps within line grids"
height=244 src=line-grid-wrap.png width=276>
- <p class=caption>A line of large text wraps within line grids.</p>
+ <p class=caption>Large text wraps within line grids.</p>
</div>
+ <p>When a different size of text like headings wraps, it is usually
+ aligned to grids as a block and lines within the block do not align.</p>
+
<p>This effect can be achieved by the following code:</p>
<pre><code class=css>
<!-- -->body { line-grid-mode: line; }
<!-- -->h1 { line-grid-mode: block; }
<!-- --></code></pre>
+ <br style="clear:both;">
</div>
<h3 id=grid-shorthand-the-layout-grid-property><span class=secno>3.2.
</span>Grid Shorthand: the ‘<code
- class=css>layout-grid</code>’ property</h3>
+ class=property>layout-grid</code>’ property</h3>
<p class=issue>TBD
- <h3 id=the-gd-length-unit><span class=secno>3.3. </span>The ‘<code
+ <h3 id=grid-length-unit><span class=secno>3.3. </span>The ‘<code
class=css><span class=index id=gd title="length
unit::gd">gd</span></code>’ length unit</h3>
@@ -510,33 +515,26 @@
<p>If no grid is specified, the gd unit should be treated the same as the
em unit.
- <h3 id=rounding-down-to-multiple-of-units-gd-an><span class=secno>3.4.
- </span>Rounding Down to Multiple of Units: ‘<code class=css><span
- class=index id=gd0 title="length unit::*gd">*gd</span></code>’ and
- ‘<code class=css><span class=index id=em title="length
- unit::*em">*em</span></code>’</h3>
+ <p class=issue>Just copied from old WD, need to refresh
+
+ <h3 id=round-length><span class=secno>3.4. </span>Rounding Down to Multiple
+ of Units: ‘<code class=css><span class=index id=gd0 title="length
+ unit::*gd">*gd</span></code>’ and ‘<code class=css><span
+ class=index id=em title="length unit::*em">*em</span></code>’</h3>
<p>The ‘<code class=property>width</code>’ and ‘<code
class=property>height</code>’ properties accept ‘<code
class=css>*gd</code>’ and ‘<code class=css>*em</code>’
- values. This syntax computes to ‘<code class=css>auto</code>’,
+ values. These values compute to ‘<code class=css>auto</code>’,
and then the result will be round down to the largest multiple of the
specified unit that is equal to or less than the original computed value.
- <p>The half of the fraction is added to each margin of the direction; if it
- is used for ‘<code class=property>height</code>’, the half of
- fraction is added to the top and bottom margins, and if for ‘<code
+ <p>The fraction is distributed evenly to each side margins. If it is used
+ for ‘<code class=property>height</code>’, the half of fraction
+ is added to the top and bottom margins, and if for ‘<code
class=property>width</code>’, to the left and right margins.
- <div class=example>
- <pre><code class=css>
-<!-- -->body {
-<!-- --> width: *em;
-<!-- --> height: *gd;
-<!-- --> margin: 3em 2gd 3em 3gd;
-<!-- -->}
-<!-- --></code></pre>
- </div>
+ <p class=issue>Should this be a property instead?
<h2 id=conformance><span class=secno>4. </span> Conformance</h2>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css-line-grid/Overview.src.html,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -d -r1.1 -r1.2
--- Overview.src.html 27 Apr 2011 05:37:40 -0000 1.1
+++ Overview.src.html 28 Apr 2011 04:55:25 -0000 1.2
@@ -8,9 +8,6 @@
<link rel="stylesheet" type="text/css"
href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
<style type="text/css">
- .right {
- float:right;
- }
</style>
</head>
@@ -80,14 +77,20 @@
<li>Keep vertical rhythm for better readability.</li>
<li>Align lines between columns in multi-column documents.</li>
<li>Layout lines at the same position in every page in paged media.
- Keeping the position of the bottom line of a page has benefits from design perspective.
+ Keeping the position of the bottom line of a page has benefits for
+ design and readability.
This also results better readability on duplex printing,
two pages spreads,
or when displaying on slow display devices like e-ink.</li>
- <li>East Asian layouts require the use of grid layout
+ <li>East Asian layouts require the use of vertical rhythm
more often than other scripts does,
even in single column, non-paged media documents,
as defined in [[JLREQ]].</li>
+ <li>In East Asian documents,
+ it is often desirable to make the line width to be multiple of <em>em</em>.
+ Since most East Asian characters have 1em advance,
+ and since most East Asian documents are justified,
+ this minimizes the case where justification needs to expand lines.</li>
</ul>
<p>There are several types of objects in a document
@@ -166,7 +169,7 @@
<h2>Defining Grids</h2>
-<h3 id="H1">Define Line Grids: the 'layout-grid-line' property</h3>
+<h3 id="layout-grid-line-prop">Define Line Grids: the 'layout-grid-line' property</h3>
<table class=propdef>
<tr>
@@ -197,7 +200,12 @@
<td>specified value
</table>
- <p class="issue">TBD</p>
+ <p class="issue">TBD:
+ I expect this to be very similar to the one in
+ <a href="http://www.w3.org/TR/2001/WD-css3-text-20010517/#layout-grid-line-prop">CSS3 module: text WD 20010517</a>.</p>
+ <p class="issue">Grid origin should be defined by the element that has this property,
+ similar to ''display: static''.
+ In that case, should this property inherit, or not inherit the property but inherit grid?</p>
<h2>Using Grids</h2>
@@ -294,30 +302,32 @@
line grids must be defined by the 'layout-grid-line' property.</p>
<div class="example">
- <p>When a different size of text like headings wraps,
- it is usually aligned to grids as a block and
- lines within the block do not align.</p>
-
- <div class="figure">
+ <div class="sidefigure">
<img src="line-grid-wrap.png"
width="276" height="244"
- alt="A line of large text wraps within line grids"
+ alt="Large text wraps within line grids"
/>
- <p class="caption">A line of large text wraps within line grids.</p>
+ <p class="caption">Large text wraps within line grids.</p>
</div>
+ <p>When a different size of text like headings wraps,
+ it is usually aligned to grids as a block and
+ lines within the block do not align.</p>
+
<p>This effect can be achieved by the following code:</p>
<pre><code class="css">
<!-- -->body { line-grid-mode: line; }
<!-- -->h1 { line-grid-mode: block; }
<!-- --></code></pre>
+
+ <br style="clear:both;"/>
</div>
<h3>Grid Shorthand: the 'layout-grid' property</h3>
<p class="issue">TBD</p>
-<h3>The ''<span class="index" title="length unit::gd">gd</span>'' length unit</h3>
+<h3 id="grid-length-unit">The ''<span class="index" title="length unit::gd">gd</span>'' length unit</h3>
<p>The existence of a grid in an element makes it possible
and very useful to express various measurements in that
@@ -335,7 +345,9 @@
<p>If no grid is specified, the gd unit should be treated the same as the em unit.</p>
-<h3>Rounding Down to Multiple of Units:
+ <p class="issue">Just copied from old WD, need to refresh</p>
+
+<h3 id="round-length">Rounding Down to Multiple of Units:
''<span class="index" title="length unit::*gd">*gd</span>''
and ''<span class="index" title="length unit::*em">*em</span>''</h3>
@@ -350,15 +362,7 @@
If it is used for 'height', the half of fraction is added to the top and bottom margins,
and if for 'width', to the left and right margins.</p>
- <div class="example">
- <pre><code class="css">
-<!-- -->body {
-<!-- --> width: *em;
-<!-- --> height: *gd;
-<!-- --> margin: 3em 2gd 3em 3gd;
-<!-- -->}
-<!-- --></code></pre>
- </div>
+ <p class="issue">Should this be a property instead?</p>
<h2 id="conformance">
Conformance</h2>
Received on Thursday, 28 April 2011 04:55:29 UTC