- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 19 Jan 2012 02:28:12 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css-line-grid
In directory hutz:/tmp/cvs-serv9592
Modified Files:
Overview.html Overview.src.html
Log Message:
Replace old line-grid proposal with one from Kyoto F2F (plus line-slack, which is just a new crazy idea)
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css-line-grid/Overview.html,v
retrieving revision 1.17
retrieving revision 1.18
diff -u -d -r1.17 -r1.18
--- Overview.html 26 Oct 2011 22:54:42 -0000 1.17
+++ Overview.html 19 Jan 2012 02:28:10 -0000 1.18
@@ -39,14 +39,14 @@
<h1>CSS Line Grid Module</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 October
- 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 January
+ 2012</h2>
<dl>
<dt>This version:
[...1185 lines suppressed...]
+ <th><a class=property href="#line-snap0">line-snap</a>
- <td>none | baseline | block | line
+ <td>none | baseline | contain
<td>none
- <td>block containers
+ <td>all elements
<td>yes
- <td>N/A
+ <td>no
- <td>visual
+ <td>N/A
</table>
<!--end-properties-->
</html>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css-line-grid/Overview.src.html,v
retrieving revision 1.17
retrieving revision 1.18
diff -u -d -r1.17 -r1.18
--- Overview.src.html 26 Oct 2011 22:54:42 -0000 1.17
+++ Overview.src.html 19 Jan 2012 02:28:10 -0000 1.18
@@ -62,8 +62,6 @@
<hr title="Separator for header">
</div>
-<p style="background: #fdd; color: red; font-weight: bold; text-align: center; padding: .5em; border: thick solid red; border-radius: 1em; position: fixed; bottom: 1em; left: 1em; right: 1em;">This specification is not being actively maintained, and should not be used as a guide for implementations. It may be revived in the future, but for now should be considered obsolete. <br>If you have questions or comments on this specification, please send an email to the CSS Working Group's mailing list at <a href="mailto:www-style@w3.org">www-style@w3.org</a>. (Before sending mail for the first time, you have to subscribe at <a href="http://lists.w3.org/Archives/Public/www-style/">http://lists.w3.org/Archives/Public/www-style/</a>.)</p>
-
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
<p>CSS is a language for describing the rendering of structured documents
@@ -128,6 +126,22 @@
<p class="caption">Vertical rhythm kept through pictures and different size of text in a multi-column document.</p>
</div>
+ <div class="example">
+ <div class="sidefigure">
+ <img src="line-grid-wrap.png"
+ width="276" height="244"
+ alt="Large text wraps within line grids"
+ />
+ <p class="caption">Large text wraps within line grids.</p>
+ </div>
+
+ <p>When a different size of text, such as a headings, wraps,
+ it is usually aligned to grids as a block and
+ the lines within the block do not align.</p>
+
+ <br style="clear:both;"/>
+ </div>
+
<div id="ex-sidenote" class="figure">
<div class="sidenote-block">
<div class="sidenote-body">
@@ -179,36 +193,8 @@
<h3 id="placement">Module Interactions</h3>
- <p class="issue">Explain, normatively, how this module affects the definition of CSS.</p>
-
- <p>This module replaces and extends the <var class="issue">SUMMARIZE HERE</var>
- features defined in [[!CSS21]] sections <var class="issue">W.X and Y.Z</var>.
-
-<h3 id="conventions">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.
-
- <p>All of the text of this specification is normative except sections
- explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
-
- <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 class="note">Note, this is an informative note.</p>
+ <p>This module extends the line box model defined in [[!CSS21]] sections
+ 9.4.2 and 10.8.
<h3 id="values">Values</h3>
@@ -226,28 +212,27 @@
keyword as their property value. For readability it has not been repeated
explicitly.
-<h2>Defining Grids</h2>
-
-<h3 id="layout-grid-line-prop">Define Line Grids: the 'layout-grid-line' property</h3>
+<h2 id=line-grid>
+Defining a Line Grid: the 'line-grid' property</h2>
<table class=propdef>
<tr>
<th>Name:
- <td><dfn>layout-grid-line</dfn>
+ <td><dfn>line-grid</dfn>
<tr>
- <th>Value:
- <td>none
- | auto
- | <length>
- | <percentage>
+ <th><a href="#values">Value</a>:
+ <td><identifier>
<tr>
<th>Initial:
- <td>none
+ <td>root-grid
<tr>
<th>Applies to:
<td>block containers
<tr>
<th>Inherited:
+ <td>yes
+ <tr>
+ <th>Animatable:
<td>no
<tr>
<th>Percentages:
@@ -258,65 +243,122 @@
<tr>
<th>Computed value:
<td>specified value
+ <tr>
+ <th>Canonical order:
+ <td><abbr title="follows order of property value definition">per grammar<abbr>
</table>
- <p>This property defines a line grid for the element and its descendent elements.
- Possible values are:</p>
+ <p>Specifies which line grid the line boxes of this element (if any)
+ will align.
- <p class="issue">An implementer said the grid's scope should be limited to the same BFC,
- as referring property values and position of parent elements could be difficult to implement
- if the element is in different BFC than the parent.
- This can mean a float cannot share the grids with its parent, which is not ideal.
- How can we solve this?</p>
+ <p>If there does not already exist a line grid with the specified name,
+ then this property creates a line grid using the font and line layout
+ settings of this element. The line grid consists of a series of horizontal
+ lines corresponding to all the baselines (alphabetic, text-top, text-bottom,
+ mathematic, central, hanging, etc.) and to the line-over and line-under
+ edges, positioned where they would fall if the contents of this element
+ consisted entirely of line boxes filled with text (no sub-elements) using
+ the first available font.
+ If the element is paginated, the line grid is restarted on each page;
+ since line boxes cannot be paginated, no page begins with the bottom part
+ of a line's grid.
- <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 class="note">As a side effect of the initial value and this definition,
+ the root element always sets up a line grid, so that 'line-snap' can be used
+ even if the author has not explicitly set up a line grid.
- <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>
+<h2>Snapping to a Grid</h2>
- <p class="issue">Define behavior for paged media/column break</p>
- <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>
+<h3 id=line-snap>
+Snapping Line Boxes: the 'line-snap' property</h3>
-<h2>Using Grids</h2>
+ <table class=propdef>
+ <tr>
+ <th>Name:
+ <td><dfn>line-snap</dfn>
+ <tr>
+ <th><a href="#values">Value</a>:
+ <td>none | baseline | contain
+ <tr>
+ <th>Initial:
+ <td>none
+ <tr>
+ <th>Applies to:
+ <td>all elements
+ <tr>
+ <th>Inherited:
+ <td>yes
+ <tr>
+ <th>Animatable:
+ <td>no
+ <tr>
+ <th>Percentages:
+ <td>N/A
+ <tr>
+ <th>Media:
+ <td>visual
+ <tr>
+ <th>Computed value:
+ <td>specified value
+ <tr>
+ <th>Canonical order:
+ <td><abbr title="follows order of property value definition">per grammar<abbr>
+ </table>
-<h3 id="layout-grid-mode-prop">Grid Mode: the 'layout-grid-mode' property</h3>
+ <p>This property applies to all the line boxes directly contained by
+ the element, and, when not ''none'', causes each line box to shift
+ downward (possibly by zero) until it snaps to the line grid specified
+ by 'line-grid'. (The unshifted position is the position that would be
+ determined by normal line stacking rules, with consideration of any
+ new controls defined by other modules such as [[CSS3LINE]].) Values
+ have the following meanings:
+
+ <dl>
+ <dt><dfn>''none''</dfn>
+ <dd>Line boxes do not snap to the grid; they stack normally.
+ <dt><dfn>''baseline''</dfn>
+ <dd>The dominant baseline snaps with the matching baseline on the
+ line grid applying to the element.
+ <dt><dfn>''contain''</dfn>
+ <dd>Two baselines are used to align the line box: the line box is
+ snapped so that its ''central'' baseline (halfway between the
+ ''text-over'' and ''text-under'' baselines) is centered between
+ one of the line grid's ''text-over'' baselines and a subsequent
+ (but not necessarily consecutive) ''text-under'' baseline.
+ </dl>
+
+ <p>In some cases lines of equal line height will not align perfectly
+ to a baseline grid: this happens, for example, when fonts (of the same
+ size) with different baseline tables are mixed on a line.
+ For this reason, if shifting the line by the largest difference between
+ the smallest ascent and largest ascent of a single size used on the line
+ would result in a smaller shift, then the contents of the line box are
+ shifted up within the line box so as to allow the line to snap without
+ jumping downward to the next grid line.
+
+<h3 id=line-slack>
+Line Snap Allowance: the 'line-slack' property</h3>
<table class=propdef>
<tr>
<th>Name:
- <td><dfn>layout-grid-mode</dfn>
+ <td><dfn>line-slack</dfn>
<tr>
- <th>Value:
- <td>none | baseline | block | line
+ <th><a href="#values">Value</a>:
+ <td>none | <integer>
<tr>
<th>Initial:
<td>none
<tr>
<th>Applies to:
- <td>block containers
+ <td>all elements
<tr>
<th>Inherited:
<td>yes
<tr>
+ <th>Animatable:
+ <td>no
+ <tr>
<th>Percentages:
<td>N/A
<tr>
@@ -325,133 +367,180 @@
<tr>
<th>Computed value:
<td>specified value
+ <tr>
+ <th>Canonical order:
+ <td><abbr title="follows order of property value definition">per grammar<abbr>
</table>
- <p>This property controls how lines and blocks are aligned to grids.
- Values have the following meanings:</p>
-
+ <p>This property specifies the slack in snapping lines to a grid.
+
<dl>
- <dt><dfn title="layout-grid-mode::none">''none''</dfn></dt>
- <dd>Do not align any objects to the grids.</dd>
- <dt><dfn title="layout-grid-mode::baseline">''baseline''</dfn></dt>
- <dd>Align baselines to the line grids.
- <!--
- The line in this definition is a line box
- with before margin included if it is the first line of a block,
- and with after margin if last.
- -->
- The height is the height of the line box.
- Increasing heights to fit to grids is done by
- increasing the computed height of the line box.
- <span class="issue">How to make this value work well with images, headings, etc.
- needs further thoughts.</span>
- </dd>
- <dt><dfn title="layout-grid-mode::block">''block''</dfn></dt>
- <dd>Align blocks to the line grids.
- <!--
- The height of the block in this definition includes margins.
- -->
- The height includes paddings and borders, but not margins.
- Increasing heights to fit to grids is done by
- adding to computed margins.
- </dd>
- <dt><dfn title="layout-grid-mode::line">''line''</dfn></dt>
- <dd>Align line boxes to the line grids.
- <!--
- The line in this definition is a line box
- with before margin included if it is the first line of a block,
- and with after margin if last.
- -->
- The height is the height of the line box.
- Increasing heights to fit to grids is done by
- increasing the computed height of the line box.
- </dd>
+ <dt><dfn>''none''</dfn>
+ <dd>No slack: each line box is snapped to the grid.
+ <dt><dfn><integer></dfn>
+ <dd>Nominally, each <var>n</var>th line box is snapped to the grid <em>or</em>
+ each <var>n</var>th grid line has a line box snapped to it, whichever
+ results in smaller shifts, for the specified integer as <var>n</var>.
+ A value of ''1'' allows, for example, lines of half the grid height
+ to fit twice as densely, while a value of ''2'' also allows lines
+ 1.5 times the grid height to match the grid 2:3.
+ A value less than ''1'' is invalid.
</dl>
- <p class="issue">Handling margins and borders needs review</p>
- <p>When this property is set to anything other than ''none'',
- the computed height of the object is increased to
- the smallest multiple of the grid height
- that is equal to or smaller than the original computed height.</p>
+ <p>When 'line-snap' is given as a <baseline>, the 'line-slack'
+ property interpolates a grid against the main line grid and snaps
+ the element's line boxes against this grid. The interpolated grid is
+ drawn by creating a new line grid using the baseline table and
+ 'line-height' of the current element and increasing the inter-line
+ spacing of this new grid to snap according to the element's 'line-snap'
+ and 'line-slack' values. The first snapped line is chosen to minimize
+ the shift of the first line box of the element.
+ The interpolated grid is only used for this block's line boxes;
+ descendant boxes interpolate their own grid against the main grid.)
- <p>When the value of this property is ''baseline'',
- the line box is then moved so that its baseline is aligned
- to the next closest grid.</p>
+ <p class="issue">Define something sane for ''line-snap: contain''.
- <p>When the value of this property is either ''block'' or ''line'',
- the object is vertically centered within the grid row.
- If the computed height is larger than the grid space,
- then the object is centered within the smallest number of grid rows
- necessary for the object to fit in.
- The starting alignment point is moved accordingly.
- This is illustrated below,
- where <em>a</em> represents the numerical 'layout-grid-line' value,
- and <em>b</em> and <em>c</em> are half the difference between the computed line-heights
- and either the layout-grid-line value or twice the value respectively.</p>
+<!--
+ <p>When 'line-snap' is ''contain'', then 'line-slack' not ''none''
+ is handled by line-snapping using the ''central'' baseline any time
+ the interpolated grid is narrower than the main grid. It has no effect
+ when the interpolated grid is wider than the main grid.
- <div class="figure">
- <img src="lgl.gif"
- alt="Layout of content within a line grid"
- />
- <p class="caption">Layout of content within a line grid,
- where <em>a</em> represents the layout-grid-line value,
- and the alignment baseline is at the bottom (after-edge).</p>
- </div>
+ <p>When 'line-snap' is ''contain'', the 'line-slack' property creates
+ an interpolated grid as above, but instead of snapping according to
+ a fixed ratio, it increases the spacing of the interpolated grid so
+ that its first ''text-over'' baseline aligns to one of the main grid's
+ ''text-over'' baselines and its last ''text-under'' baseline aligns
+ to one of the main grid's ''text-under'' baseline. In this case, the
+ integer represents the maximum number of line boxes in the block
+ before slack is ignored. The slack is
+-->
- <p>As for regular height computation, the ruby box is treated specifically.
- In a similar fashion to the line-height determination process,
- only the ruby base element is considered for centering purposes,
- however the above and/or the after space should be sufficient
- to fit the ruby text above and/or after the base text within the grid-line space.
- If this is not the case,
- the grid-line size needs to be increased in multiple grid rows until the whole ruby box fits.
- <span class="issue">Is just ignoring ruby text enough? like rt { layout-grid-mode: ignore; }
- or nothing needed to be defined if line-stacking-ruby: auto does the work?</span>
- </p>
+ <p>User Agents are not required to support values greater than 4;
+ unsupported used values higher than 4 must be clamped to 4.
- <p>Note that in order for this property to have an effect,
- line grids must be defined by the 'layout-grid-line' property.</p>
+<p class="issue">
+Can it be extended to handle vertical justification?
- <p class="issue">This design does not allow authors to specify
- the exact top position of the first line.
- It is probably ok for web/epub where viewport is not fixed and therefore
- the UA has to absorb fractions using margins,
- but print folks may want more precise controls.</p>
+<h3 id=box-snap>
+Snapping Block Boxes: the 'box-snap' property</h3>
- <p class="issue">Need to think more about use cases in tables.
- Turning off line grids for table cells is one easy way
- and probably is good enough when all cells are single line,
- but there probably are more use cases.</p>
+ <table class=propdef>
+ <tr>
+ <th>Name:
+ <td><dfn>box-snap</dfn>
+ <tr>
+ <th><a href="#values">Value</a>:
+ <td>[ none | margin-box | border-box | half-border ]? ]{1,4} [ / <identifier>{1,4} ]
+ <tr>
+ <th>Initial:
+ <td>none
+ <tr>
+ <th>Applies to:
+ <td>block-level boxes and internal table elements except table cells
+ <tr>
+ <th>Inherited:
+ <td>yes
+ <tr>
+ <th>Animatable:
+ <td>no
+ <tr>
+ <th>Percentages:
+ <td>N/A
+ <tr>
+ <th>Media:
+ <td>visual
+ <tr>
+ <th>Computed value:
+ <td>specified value
+ <tr>
+ <th>Canonical order:
+ <td><abbr title="follows order of property value definition">per grammar<abbr>
+ </table>
- <p class="issue">Need to think more about use cases in forms.</p>
+ <p>Specifies which edges, if any, are snapped to the line box grid.
+ If four values are specified, they apply to the before, end, after, and
+ start edges of the box, respectively. If the start edge is omitted, it is the
+ same as the end. If the after edge is omitted, it is the same as the
+ before. If the end edge is omitted, it is assigned ''none''.
+ Values have the following meanings:
- <div class="example">
- <div class="sidefigure">
- <img src="line-grid-wrap.png"
- width="276" height="244"
- alt="Large text wraps within line grids"
- />
- <p class="caption">Large text wraps within line grids.</p>
- </div>
+ <dl>
+ <dt><dfn>none</dfn>
+ <dd>The edge is not snapped to any grid.</dd>
+ <dt><dfn>margin-box</dfn>
+ <dd>The margin edge is snapped to the nearest grid line.
+ <dt><dfn>border-box</dfn>
+ <dd>The border edge is snapped to the nearest grid line.
+ <dt><dfn>half-border</dfn>
+ <dd>The edge halfway between the border and padding edges is snapped to
+ the nearest grid line.
+ <dt><dfn><identifier></dfn>
+ <dd>Names the grid to snap to. Defaults to the effective 'line-grid'.
+ If the named grid does not exist (or has no lines in the appropriate
+ dimension), then the affected edge is not snapped.
+ <p class="note">This allows the author to specify a grid that is not
+ a line grid.
+ </dl>
- <p>When a different size of text, such as a headings, wraps,
- it is usually aligned to grids as a block and
- the lines within the block do not align.</p>
+ <p>When snapping to baselines on a line grid, either the <i>text-over</i>
+ or <i>text-under</i> baseline is chosen: whichever one is on the matching
+ side of the central baseline. For example, when snapping the before edge
+ in horizontal writing mode, the <i>over</i> edge is chosen. In some
+ cases the <i>under</i> edge might be used instead for the before edge:
+ for example, when the writing mode of the line grid doesn't match that of
+ the affected element, or when due to the 'text-orientation' settings the
+ <i>under</i> side corresponds to the <i>after</i> edge.
- <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>
+ <p>To snap a before, start, or end edge of a block-level element or its
+ after margin-box edge to a grid line, the effective margin is increased
+ at that edge. To snap an after border-box or half-border edge to a grid
+ line, the effective content-box height is increased. If, however, the
+ box is an empty block that could be
+ <a href="http://www.w3.org/TR/CSS21/box.html">collapsed through</a>,
+ then this property has no effect. [[!CSS21]]
- <br style="clear:both;"/>
- </div>
+ <p>When applied to table row group and table row boxes, 'box-snap' only
+ affects the before and after edges, and only if those edges are not at
+ the beginning or end of the table, respectively. To snap a before edge
+ on a table row or row group, the preceding row's height is increased.
+ To snap an after edge on a table row or row group, the affected row's
+ height is increased.
-<h3>Grid Shorthand: the 'layout-grid' property</h3>
+ <p>When applied to table column group and table column boxes, 'box-snap'
+ only affects the start and end edges, and only if those edges are not at
+ the start or end of the table, respectively. How the space is redistributed
+ among columns to satisfy snapping constraints is not defined, however:
+ <ul>
+ <li>In an auto-sized table no column may be smaller than its minimum
+ content width.
+ <li>The resulting table must not exceed its original measure if it
+ had a non-''auto'' measure.
+ <li>The adjusted widths must not cause the table to overflow its
+ containing block any more than it would with ''box-snap: none''.
+ </ul>
+ <p>To satisfy these constraints, some column edges may remain unsnapped.
+<!--
+ Line snapping for columnsis processed from start to end: column widths
+ are increased or decreased in order to snap the column edges.
+ By preference, the widths are increased.
+ However if the table has an explicit size or is auto-sized and the resulting
+ table overflows its containing block, then columns whose widths were
+ increased must, one by one, switch their snap to decreasing the column
+ width, until the table reaches its specified size or
+-->
+ <p>For internal table elements in separated borders tables, ''margin-box''
+ represents the edge at the midpoint of the border spacing. For collapsed
+ tables, ''margin-box'' and ''border-box'' are treated as ''half-border''.
+ When two coinciding edges have conflicting snap values, the later value
+ wins.
- <p class="issue">TBD</p>
+<h2>Layout in Grid Units</h2>
-<h3 id="grid-length-unit">The ''<span class="index" title="length unit::gd">gd</span>'' length unit</h3>
+<p class="issue">This section is mostly unrevised brainstorming.</p>
+
+<h3 id="grid-length-unit">
+Grid Length Units: the ''gd'' unit</h3>
<p>The existence of a grid in an element makes it possible
and very useful to express various measurements in that
@@ -503,62 +592,11 @@
<p class="issue">''gem'' length unit is also requested</p>
-<h3>Forcing Line Width to Multiple of <em>em</em></h3>
- <p class="issue">There are 3 ideas for this, and all ideas are listed here for disucssions.</p>
-
-<h4>Character Grid: the 'layout-grid-char' property</h4>
-
- <table class=propdef>
- <tr>
- <th>Name:
- <td><dfn>layout-grid-char</dfn>
- <tr>
- <th>Value:
- <td>none
- | auto
- | <length>
- <tr>
- <th>Initial:
- <td>none
- <tr>
- <th>Applies to:
- <td>block containers
- <tr>
- <th>Inherited:
- <td>no
- <tr>
- <th>Percentages:
- <td>N/A
- <tr>
- <th>Media:
- <td>visual
- <tr>
- <th>Computed value:
- <td>specified value
- </table>
-
- <p>This property defines a character grid for the element. Possible values are:</p>
- <p>When a character grid is defined,
- start and end edges of a line box snap to the nearest grid
- in the direction to shorten the line box.</p>
-
- <div class="figure">
- <object
- data="line-length.svg" type="image/svg+xml"
- width="340" height="158">
- </object>
- <p class="caption">The gray part of a line box is rounded down to snap to the grid.
- The second line box has a float on the left (green),
- and therefore its start edge snaps to the grid as well.</p>
- </div>
-
- <p class="issue">Should we add ''edges'' to the 'line-grid-mode' property?</p>
-
-<h4 id="round-length">Rounding Lengths to Multiple of Units:
+<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>''
- </h4>
+ </h3>
<p>The 'width' and 'height' properties
accept ''rounddown(<em>length</em>)''
@@ -610,41 +648,35 @@
<!-- --></code></pre>
</div>
-<h4>Rounding Lengths to Multiple of Units: the 'layout-grid-measure' property</h4>
-
- <table class=propdef>
- <tr>
- <th>Name:
- <td><dfn>layout-grid-measure</dfn>
- <tr>
- <th>Value:
- <td>none
- | auto
- | <length>
- || up | down
- <tr>
- <th>Initial:
- <td>none
- <tr>
- <th>Applies to:
- <td>block containers
- <tr>
- <th>Inherited:
- <td>no
- <tr>
- <th>Percentages:
- <td>N/A
- <tr>
- <th>Media:
- <td>visual
- <tr>
- <th>Computed value:
- <td>specified value
- </table>
-
<h2 id="conformance">
Conformance</h2>
+<h3 id="conventions">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.
+
+ <p>All of the text of this specification is normative except sections
+ explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
+
+ <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 class="note">Note, this is an informative note.</p>
+
<h3 id="conformance-classes">
Conformance Classes</h3>
Received on Thursday, 19 January 2012 02:28:14 UTC