- From: Ishii Koji via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 12 May 2011 19:39:34 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css-line-grid
In directory hutz:/tmp/cvs-serv3585
Modified Files:
Overview.html Overview.src.html
Log Message:
Design change to rounding length
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css-line-grid/Overview.html,v
retrieving revision 1.10
retrieving revision 1.11
diff -u -d -r1.10 -r1.11
--- Overview.html 6 May 2011 02:32:07 -0000 1.10
+++ Overview.html 12 May 2011 19:39:31 -0000 1.11
@@ -39,13 +39,13 @@
<h1>CSS Line Grid Module</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 May 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 May 2011</h2>
<dl>
<dt>This version:
- <dd><a href="http://www.w3.org/TR/2011/ED-unknown-shortname-20110506">
- http://www.w3.org/TR/2011/ED-unknown-shortname-20110506</a> <!--
+ <dd><a href="http://www.w3.org/TR/2011/ED-unknown-shortname-20110512/">
+ http://www.w3.org/TR/2011/ED-unknown-shortname-20110512</a> <!--
<dt>Latest version:
<dd><a href="http://www.w3.org/TR/css-line-grid">
http://www.w3.org/TR/css-line-grid</a>
@@ -171,9 +171,10 @@
<li><a href="#grid-length-unit"><span class=secno>3.3. </span>The
‘<code class=css>gd</code>’ length unit</a>
- <li><a href="#round-length"><span class=secno>3.4. </span>Rounding Down
- Lengths 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
+ Lengths to Multiple of Units: ‘<code
+ class=css>rounddown()</code>’ and ‘<code
+ class=css>roundup()</code>’ </a>
</ul>
<li><a href="#conformance"><span class=secno>4. </span> Conformance</a>
@@ -239,11 +240,6 @@
<li>East Asian layouts require vertical rhythm more often than other
scripts do, even in single column, non-paged media documents, as defined
in <a href="#JLREQ" rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>.
-
- <li>It is often desirable in East Asian layouts to make the line width a
- multiple of <em>em</em> without fractions. Because most East Asian
- characters have 1em advance and most East Asian documents are justified,
- this minimizes cases where justification is needed to expand lines.
</ul>
<p>There are several types of objects in a document that can break the
@@ -272,6 +268,22 @@
with the basic text.</p>
</div>
+ <div class=sidefigure id=ex-width> <img alt="East Asian layouts may require
+ width be a multiple of em without fractions" height=168
+ src=width-multiple-of-em.png width=206>
+ <p class=caption>East Asian layouts may require width be a multiple of
+ <em>em</em> without fractions.</p>
+ </div>
+
+ <p>East Asian layouts may require grid-like features in inline progression
+ direction as well.
+
+ <p>It is often desirable in East Asian layouts to make the line width a
+ multiple of <em>em</em> without fractions. Because most East Asian
+ characters have 1em advance and most East Asian documents are justified,
+ this minimizes cases where justification needs to expand character
+ spacing.
+
<p>This module provides the following capabilities:
<ul>
@@ -279,7 +291,7 @@
<li>Controling how lines and blocks align to the grids.
- <li>Rounding lengths down to multiples of units.
+ <li>Rounding lengths to multiples of units.
</ul>
<p>It is important to control these capabilities independently, so that,
@@ -391,15 +403,49 @@
<td>specified value
</table>
- <p class=issue>TBD: I expect this to be very similar to the one in <a
+ <p>This property defines a line grid for the element and its descendent
+ elements. Possible values are:
+
+ <dl>
+ <dt><dfn id=none title="layout-grid-line::none">‘<code
+ class=css>none</code>’</dfn>
+
+ <dd>No line grid is specified.
+
+ <dt><dfn id=auto title="layout-grid-line::auto">‘<code
+ class=css>auto</code>’</dfn>
+
+ <dd>The grid line size is determined by the computed value of the
+ ‘<code class=property>line-height</code>’ property.
+
+ <dt><dfn id=ltlengthgt
+ title="layout-grid-line::length"><length></dfn>
+
+ <dd>Size of the line grid's unit space (a.k.a. "line pitch").
+
+ <dt><dfn id=ltpercentgt
+ title="layout-grid-line::percent"><percent></dfn>
+
+ <dd>Size of the line grid's unit space relative to the logical height of
+ the parent element. If the parent has no explicit height, it is treated
+ as ‘<code class=css>auto</code>’. <span class=issue>This was
+ defined in <a
+ href="http://www.w3.org/TR/2001/WD-css3-text-20010517/#layout-grid-line-prop">CSS3
+ module: text WD 20010517</a>, but not sure how much useful this is</span>
+ </dl>
+
+ <p>The defined grid uses the position of the element as the origin of the
+ grid. It uses the top of the element as the origin of the grid for
+ horiozntal text flow. Similarly, it uses the right of the element as the
+ origin of the grid for ‘<code
+ class=property>writing-mode</code>’ is ‘<code
+ class=css>vertical-rl</code>’, and the left of the element for
+ ‘<code class=css>vertical-lr</code>’.
+
+ <p class=issue>TBD: I might need to copy more text from <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, similar to ‘<code class=css>position:
- static</code>’. In that case, should this property inherit, or not
- inherit the property but inherit grid?
-
<h2 id=using-grids><span class=secno>3. </span>Using Grids</h2>
<h3 id=layout-grid-mode-prop><span class=secno>3.1. </span>Grid Mode: the
@@ -453,7 +499,7 @@
have the following meanings:
<dl>
- <dt><dfn id=none title="layout-grid-mode::none">‘<code
+ <dt><dfn id=none0 title="layout-grid-mode::none">‘<code
class=css>none</code>’</dfn>
<dd>Do not align any objects to the grids.
@@ -622,18 +668,27 @@
<!-- --></code></pre>
</div>
- <h3 id=round-length><span class=secno>3.4. </span>Rounding Down Lengths 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>
+ <h3 id=round-length><span class=secno>3.4. </span>Rounding Lengths to
+ Multiple of Units: ‘<code class=css><span class=index id=rounddown
+ title="length unit::rounddown()">rounddown()</span></code>’ and
+ ‘<code class=css><span class=index id=roundup title="length
+ unit::rounddown()">roundup()</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. These values compute to ‘<code class=css>auto</code>’,
- and then the result will be rounded down to the largest multiple of the
- specified unit that is equal to or less than the original computed value.
+ class=css>rounddown(<em>length</em>)</code>’ and ‘<code
+ class=css>roundup(<em>length</em>)</code>’ values.
+
+ <p>The ‘<code class=css>rounddown(<em>length</em>)</code>’
+ computes to ‘<code class=css>auto</code>’, and then the result
+ will be rounded down to the largest multiple of the specified unit that is
+ equal to or less than the original computed value.
+
+ <p>Similarly, the ‘<code
+ class=css>roundup(<em>length</em>)</code>’ computes to ‘<code
+ class=css>auto</code>’, and then the result will be rounded up to
+ the smallest multiple of the specified unit that is equal to or greater
+ than the original computed value.
<p>The fraction is distributed evenly to the computed values of margins on
each side. If it is used for ‘<code
@@ -641,8 +696,15 @@
and the bottom margins. If for ‘<code
class=property>width</code>’, to the left and the right margins.
+ <p>When the element is a float, the fraction is added to the opposite side
+ of the float direction instead. For example, if the ‘<code
+ class=property>float</code>’ property is ‘<code
+ class=css>left</code>’, the fraction is added to the right margins.
+
<p class=issue>Should this be a property instead?
+ <p class=issue>Is this design appropriate to solve text with floats case?
+
<p class=issue>Should have an option to left/right align instead of center?
Can author align running head and page numbers with body with this design?
@@ -884,6 +946,19 @@
<li>layout-grid-line, <a href="#layout-grid-line"
title=layout-grid-line><strong>2.1.</strong></a>
+ <ul>
+ <li>auto, <a href="#auto" title="layout-grid-line,
+ auto"><strong>2.1.</strong></a>
+
+ <li>length, <a href="#ltlengthgt" title="layout-grid-line,
+ length"><strong>2.1.</strong></a>
+
+ <li>none, <a href="#none" title="layout-grid-line,
+ none"><strong>2.1.</strong></a>
+
+ <li>percent, <a href="#ltpercentgt" title="layout-grid-line,
+ percent"><strong>2.1.</strong></a>
+ </ul>
<li>layout-grid-mode, <a href="#layout-grid-mode"
title=layout-grid-mode><strong>3.1.</strong></a>
@@ -897,17 +972,17 @@
<li>line, <a href="#line" title="layout-grid-mode,
line"><strong>3.1.</strong></a>
- <li>none, <a href="#none" title="layout-grid-mode,
+ <li>none, <a href="#none0" title="layout-grid-mode,
none"><strong>3.1.</strong></a>
</ul>
<li>length unit
<ul>
- <li>*em, <a href="#em" title="length unit, *em">3.4.</a>
-
<li>gd, <a href="#gd" title="length unit, gd">3.3.</a>
- <li>*gd, <a href="#gd0" title="length unit, *gd">3.4.</a>
+ <li>rounddown(), <a href="#rounddown" title="length unit,
+ rounddown()">3.4.</a>, <a href="#roundup" title="length unit,
+ rounddown()">3.4.</a>
</ul>
<li>renderer, <a href="#renderer" title=renderer><strong>4.1.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css-line-grid/Overview.src.html,v
retrieving revision 1.10
retrieving revision 1.11
diff -u -d -r1.10 -r1.11
--- Overview.src.html 6 May 2011 02:32:07 -0000 1.10
+++ Overview.src.html 12 May 2011 19:39:31 -0000 1.11
@@ -112,12 +112,6 @@
more often than other scripts do,
even in single column, non-paged media documents,
as defined in [[JLREQ]].</li>
- <li>It is often desirable in East Asian layouts
- to make the line width
- a multiple of <em>em</em> without fractions.
- Because most East Asian characters have 1em advance
- and most East Asian documents are justified,
- this minimizes cases where justification is needed to expand lines.</li>
</ul>
<p>There are several types of objects in a document
@@ -150,11 +144,29 @@
<p class="caption">Sidenotes are set at a smaller size, but still line up with the basic text.</p>
</div>
+ <div id="ex-width" class="sidefigure">
+ <img src="width-multiple-of-em.png"
+ width="206" height="168"
+ alt="East Asian layouts may require width be a multiple of em without fractions"
+ />
+ <p class="caption">East Asian layouts may require width
+ be a multiple of <em>em</em> without fractions.</p>
+ </div>
+
+ <p>East Asian layouts may require grid-like features
+ in inline progression direction as well.</p>
+ <p>It is often desirable in East Asian layouts
+ to make the line width
+ a multiple of <em>em</em> without fractions.
+ Because most East Asian characters have 1em advance
+ and most East Asian documents are justified,
+ this minimizes cases where justification needs to expand character spacing.</p>
+
<p>This module provides the following capabilities:</p>
<ul>
<li>Defining grids in the line progression direction.</li>
<li>Controling how lines and blocks align to the grids.</li>
- <li>Rounding lengths down to multiples of units.</li>
+ <li>Rounding lengths to multiples of units.</li>
</ul>
<p>It is important to control these capabilities independently,
@@ -222,9 +234,10 @@
<td><dfn>layout-grid-line</dfn>
<tr>
<th>Value:
- <td>none | auto |
- <length> |
- <percentage>
+ <td>none
+ | auto
+ | <length>
+ | <percentage>
<tr>
<th>Initial:
<td>none
@@ -245,13 +258,33 @@
<td>specified value
</table>
+ <p>This property defines a line grid for the element and its descendent elements.
+ Possible values are:</p>
+ <dl>
+ <dt><dfn title="layout-grid-line::none">''none''</dfn></dt>
+ <dd>No line grid is specified.</dd>
+ <dt><dfn title="layout-grid-line::auto">''auto''</dfn></dt>
+ <dd>The grid line size is determined by the computed value of the 'line-height' property.</span></dd>
+ <dt><dfn title="layout-grid-line::length"><length></dfn></dt>
+ <dd>Size of the line grid's unit space (a.k.a. "line pitch").</dd>
+ <dt><dfn title="layout-grid-line::percent"><percent></dfn></dt>
+ <dd>Size of the line grid's unit space
+ relative to the logical height of the parent element.
+ If the parent has no explicit height, it is treated as ''auto''.
+ <span class="issue">This was defined in
+ <a href="http://www.w3.org/TR/2001/WD-css3-text-20010517/#layout-grid-line-prop">CSS3 module: text WD 20010517</a>,
+ but not sure how much useful this is</span></dd>
+ </dl>
+
+ <p>The defined grid uses the position of the element as the origin of the grid.
+ It uses the top of the element as the origin of the grid for horiozntal text flow.
+ Similarly, it uses the right of the element as the origin of the grid
+ for 'writing-mode' is ''vertical-rl'',
+ and the left of the element for ''vertical-lr''.</p>
+
<p class="issue">TBD:
- I expect this to be very similar to the one in
+ I might need to copy more text from
<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 ''position: static''.
- In that case, should this property inherit, or not inherit the property but inherit grid?</p>
-
<h2>Using Grids</h2>
@@ -450,23 +483,37 @@
<!-- --></code></pre>
</div>
-<h3 id="round-length">Rounding Down Lengths to Multiple of Units:
- ''<span class="index" title="length unit::*gd">*gd</span>''
- and ''<span class="index" title="length unit::*em">*em</span>''</h3>
+<h3 id="round-length">Rounding Lengths to Multiple of Units:
+ ''<span class="index" title="length unit::rounddown()">rounddown()</span>''
+ and ''<span class="index" title="length unit::rounddown()">roundup()</span>''
+ </h3>
<p>The 'width' and 'height' properties
- accept ''*gd'' and ''*em'' values.
- These values compute to ''auto'',
+ accept ''rounddown(<em>length</em>)''
+ and ''roundup(<em>length</em>)'' values.</p>
+
+ <p>The ''rounddown(<em>length</em>)'' computes to ''auto'',
and then the result will be rounded down to
the largest multiple of the specified unit
that is equal to or less than the original computed value.</p>
+ <p>Similarly, the ''roundup(<em>length</em>)'' computes to ''auto'',
+ and then the result will be rounded up to
+ the smallest multiple of the specified unit
+ that is equal to or greater than the original computed value.</p>
+
<p>The fraction is distributed evenly to the computed values of margins on each side.
If it is used for 'height',
half the fraction is added to the top and the bottom margins.
If for 'width', to the left and the right margins.</p>
+ <p>When the element is a float,
+ the fraction is added to the opposite side of the float direction instead.
+ For example, if the 'float' property is ''left'',
+ the fraction is added to the right margins.</p>
+
<p class="issue">Should this be a property instead?</p>
+ <p class="issue">Is this design appropriate to solve text with floats case?</p>
<p class="issue">Should have an option to left/right align instead of center?
Can author align running head and page numbers with body with this design?</p>
<p class="issue">Use cases for non-East Asian layouts?</p>
Received on Thursday, 12 May 2011 19:39:36 UTC