E84D [css-line-grid] root element and some cleanup · w3c/csswg-drafts@f5c2f72 · GitHub
Skip to content

Commit f5c2f72

Browse files
astearnsastearns
committed
[css-line-grid] root element and some cleanup
1 parent e5b4c98 commit f5c2f72

2 files changed

Lines changed: 36 additions & 12 deletions

File tree

‎css-line-grid/Overview.html‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
</p>
7777
<h1 class="p-name no-ref" id=title>CSS Line Grid Module Level 1</h1>
7878
<h2 class="no-num no-toc no-ref heading settled" id=subtitle><span class=content>Editor’s Draft,
79-
<span class=dt-updated><span class=value-title title=20141017>17 October 2014</span></span></span></h2>
79+
<span class=dt-updated><span class=value-title title=20141020>20 October 2014</span></span></span></h2>
8080
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-line-grid/>http://dev.w3.org/csswg/css-line-grid/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-line-grid-1/>http://www.w3.org/TR/css-line-grid-1/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2014/WD-css-line-grid-1-20140916/ rel=previous>http://www.w3.org/TR/2014/WD-css-line-grid-1-20140916/</a><dt>Feedback:<dd><span><a href="mailto:www-style@w3.org?subject=[css-line-grid] feedback">www-style@w3.org</a> with subject line “<kbd>[css-line-grid] <var>… message topic …</var></kbd>” (<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)</span><dt>Editors:<dd><div class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://fantasai.inkedblade.net/contact>Elika Etemad</a> (<span class="p-org org">Invited Expert</span>)</div><dd><div class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:kojiishi@gluesoft.co.jp>Koji Ishii</a> (<span class="p-org org">Invited Expert</span>)</div><dd><div class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:stearns@adobe.com>Alan Stearns</a> (<span class="p-org org">Adobe Systems, Inc.</span>)</div></dl></div>
8181
<div data-fill-with=warning></div>
8282
<p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2014 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</a>), All Rights Reserved. W3C <a href=http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer>liability</a>, <a href=http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks>trademark</a> and <a href=http://www.w3.org/Consortium/Legal/copyright-documents>document use</a> rules apply.
@@ -299,7 +299,7 @@ <h3 class="heading settled" data-level=1.3 id=values><span class=secno>1.3. </sp
299299
<h2 class="heading settled" data-level=2 id=line-grid><span class=secno>2. </span><span class=content>
300300
Defining a Line Grid: the <a class=property data-link-type=propdesc href=#propdef-line-grid title=line-grid>line-grid</a> property</span><a class=self-link href=#line-grid></a></h2>
301301

302-
<table class="definition propdef"><tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-line-grid>line-grid<a class=self-link href=#propdef-line-grid></a></dfn><tr><th>Value:<td class=prod>match-parent <a class=prod-punc data-link-for="" data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> create<tr><th>Initial:<td>match-parent<tr><th>Applies to:<td>block, flex and grid containers<tr><th>Inherited:<td>no<tr><th>Percentages:<td>N/A<tr><th>Media:<td>visual<tr><th>Computed value:<td>as specified<tr><th>Animatable:<td>no</table>
302+
<table class="definition propdef"><tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-line-grid>line-grid<a class=self-link href=#propdef-line-grid></a></dfn><tr><th>Value:<td class=prod>match-parent <a data-link-for="" data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> create<tr><th>Initial:<td>match-parent<tr><th>Applies to:<td>block, flex and grid containers<tr><th>Inherited:<td>no<tr><th>Percentages:<td>N/A<tr><th>Media:<td>visual<tr><th>Computed value:<td>as specified<tr><th>Animatable:<td>no</table>
303303

304304
<p>Specifies whether this box creates
305305
a new baseline grid for its descendants
@@ -339,9 +339,11 @@ <h2 class="heading settled" data-level=2 id=line-grid><span class=secno>2. </spa
339339
not the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-page-3/#page-area title="page area">page area</a>.
340340
This allows all pages of a document to share a common grid,
341341
even if page margins, border and/or padding change.
342-
If a line grid is needed in the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-page-3/#page-area title="page area">page area</a>,
343-
<a class=property data-link-type=propdesc href=#propdef-line-grid title=line-grid>line-grid</a> can be used on a top-level element (such as body)
344-
that is flowed into the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-page-3/#page-area title="page area">page area</a>.</p>
342+
If a page box line grid is defined,
343+
this grid is used when <a class=property data-link-type=propdesc href=#propdef-line-grid title=line-grid>line-grid</a> computes to <a class=css data-link-type=maybe href=#valdef-line-grid-match-parent title=match-parent>match-parent</a>
344+
on the root element of the page area.
345+
If no page box line grid is defined,
346+
the root element creates a new line grid.</p>
345347

346348
<p class=issue id=issue-e33d3ed2><a class=self-link href=#issue-e33d3ed2></a>The names of these values is currently up for debate.
347349
Current suggestions for <a class=css data-link-type=maybe href=#valdef-line-grid-match-parent title=match-parent>match-parent</a>
@@ -365,7 +367,7 @@ <h2 class="heading settled" data-level=3 id=grid-snapping><span class=secno>3. <
365367
<h3 class="heading settled" data-level=3.1 id=line-snap><span class=secno>3.1. </span><span class=content>
366368
Snapping Line Boxes: the <a class=property data-link-type=propdesc href=#propdef-line-snap title=line-snap>line-snap</a> property</span><a class=self-link href=#line-snap></a></h3>
367369

368-
<table class="definition propdef"><tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-line-snap>line-snap<a class=self-link href=#propdef-line-snap></a></dfn><tr><th>Value:<td class=prod>none <a class=prod-punc data-link-for="" data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> baseline <a class=prod-punc data-link-for="" data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> contain<tr><th>Initial:<td>none<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>yes<tr><th>Percentages:<td>N/A<tr><th>Media:<td>visual<tr><th>Computed value:<td>as specified<tr><th>Animatable:<td>no</table>
370+
<table class="definition propdef"><tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-line-snap>line-snap<a class=self-link href=#propdef-line-snap></a></dfn><tr><th>Value:<td class=prod>none <a data-link-for="" data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> baseline <a data-link-for="" data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> contain<tr><th>Initial:<td>none<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>yes<tr><th>Percentages:<td>N/A<tr><th>Media:<td>visual<tr><th>Computed value:<td>as specified<tr><th>Animatable:<td>no</table>
369371

370372
<p>This property applies to all the line boxes
371373
directly contained by the element,
@@ -424,7 +426,8 @@ <h3 class="heading settled" data-level=3.1 id=line-snap><span class=secno>3.1. <
424426
such that all of the snapping lines meet the line grid
425427
while maintaining the block layout constraint.
426428
The single adjustment chosen must be
427-
the smallest shift needed to achieve the result.
429+
the smallest shift needed to achieve the result
430+
without causing overflow.
428431
</li>
429432
</ul>
430433

@@ -614,7 +617,7 @@ <h3 class="heading settled" data-level=3.2 id=box-snap><span class=secno>3.2. </
614617
but snaps to before if it’s the first block in a fragment container,
615618
and snaps to after if it’s the last block in a fragment container.</p>
616619

617-
<table class="definition propdef"><tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-box-snap>box-snap<a class=self-link href=#propdef-box-snap></a></dfn><tr><th>Value:<td class=prod>none <a class=prod-punc data-link-for="" data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> block-start <a class=prod-punc data-link-for="" data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> block-end <a class=prod-punc data-link-for="" data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> center <a class=prod-punc data-link-for="" data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> first-baseline <a class=prod-punc data-link-for="" data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> last-baseline<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>Percentages:<td>N/A<tr><th>Media:<td>visual<tr><th>Computed value:<td>as specified<tr><th>Animatable:<td>no</table>
620+
<table class="definition propdef"><tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-box-snap>box-snap<a class=self-link href=#propdef-box-snap></a></dfn><tr><th>Value:<td class=prod>none <a data-link-for="" data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> block-start <a data-link-for="" data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> block-end <a data-link-for="" data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> center <a data-link-for="" data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> first-baseline <a data-link-for="" data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> last-baseline<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>Percentages:<td>N/A<tr><th>Media:<td>visual<tr><th>Computed value:<td>as specified<tr><th>Animatable:<td>no</table>
618621

619622
<p>Specifies how the block is snapped to the baseline grid.</p>
620623

@@ -637,6 +640,9 @@ <h3 class="heading settled" data-level=3.2 id=box-snap><span class=secno>3.2. </
637640
<dd>The last line box’s dominant baseline is snapped to the nearest grid line.
638641
</dl>
639642

643+
<p>Snapping block boxes always uses the line grid of the box parent
644+
(a block’s own line grid has no effect on box snapping).</p>
645+
640646
<p>When snapping to baselines on a line grid,
641647
either the text-over-edge
642648
or text-under-edge baseline is chosen:
@@ -691,9 +697,13 @@ <h3 class="heading settled" data-level=3.2 id=box-snap><span class=secno>3.2. </
691697
<h2 class="no-num heading settled" id=acknowledgments><span class=content>Acknowledgments</span><a class=self-link href=#acknowledgments></a></h2>
692698

693699
<p>This module was made possible by the advice and contributions of
700+
Tab Atkins,
694701
Dave Cramer,
695702
Dave Hyatt,
696703
Bem Jones-Bey,
704+
Håkon Wium Lie,
705+
Shinyu Murakami,
706+
Liam Quin,
697707
and the CSS Working Group members.</p>
698708

699709
<h2 class="no-num heading settled" id=change-log><span class=content>
@@ -703,6 +713,8 @@ <h3 class="no-num heading settled" id=20140403><span class=content>
703713
Since <a href=http://www.w3.org/TR/2014/WD-css-line-grid-1-20140916/>September 16th 2014</a></span><a class=self-link href=#20140403></a></h3>
704714
<ul>
705715
<li>Added flex and grid container applicability for line-grid</li>
716+
<li>Added normative text for line-snap examples</li>
717+
<li>Added @page and root element line grid handling</li>
706718
</ul>
707719

708720
<h3 class="no-num heading settled" id=201404030><span class=content>

‎css-line-grid/Overview.src.html‎

Lines changed: 16 additions & 4 deletions
< 5C56 tr class="diff-line-row">
Original file line numberDiff line numberDiff line change
@@ -250,9 +250,11 @@ <h2 id='line-grid'>
250250
not the <a>page area</a>.
251251
This allows all pages of a document to share a common grid,
252252
even if page margins, border and/or padding change.
253-
If a line grid is needed in the <a>page area</a>,
254-
'line-grid' can be used on a top-level element (such as body)
255-
that is flowed into the <a>page area</a>.
253+
If a page box line grid is defined,
254+
this grid is used when 'line-grid' computes to ''match-parent''
255+
on the root element of the page area.
256+
If no page box line grid is defined,
257+
the root element creates a new line grid.
256258

257259
Issue: The names of these values is currently up for debate.
258260
Current suggestions for ''match-parent''
@@ -345,7 +347,8 @@ <h3 id='line-snap'>
345347
such that all of the snapping lines meet the line grid
346348
while maintaining the block layout constraint.
347349
The single adjustment chosen must be
348-
the smallest shift needed to achieve the result.
350+
the smallest shift needed to achieve the result
351+
without causing overflow.
349352
</li>
350353
</ul>
351354

@@ -578,6 +581,9 @@ <h3 id='box-snap'>
578581
<dd>The last line box's dominant baseline is snapped to the nearest grid line.
579582
</dl>
580583

584+
Snapping block boxes always uses the line grid of the box parent
585+
(a block's own line grid has no effect on box snapping).
586+
581587
When snapping to baselines on a line grid,
582588
either the text-over-edge
583589
or text-under-edge baseline is chosen:
@@ -647,9 +653,13 @@ <h3 id='box-snap'>
647653
<h2 class=no-num id='acknowledgments'>Acknowledgments</h2>
648654

649655
This module was made possible by the advice and contributions of
656+
Tab Atkins,
650657
Dave Cramer,
651658
Dave Hyatt,
652659
Bem Jones-Bey,
660+
Håkon Wium Lie,
661+
Shinyu Murakami,
662+
Liam Quin,
653663
and the CSS Working Group members.
654664

655665
<h2 class=no-num id='change-log'>
@@ -659,6 +669,8 @@ <h3 class="no-num" id="20140403">
659669
Since <a href="http://www.w3.org/TR/2014/WD-css-line-grid-1-20140916/">September 16th 2014</a></h3>
660670
<ul>
661671
<li>Added flex and grid container applicability for line-grid</li>
672+
<li>Added normative text for line-snap examples</li>
673+
<li>Added @page and root element line grid handling</li>
662674
</ul>
663675

664676
<h3 class="no-num" id="20140403">

0 commit comments

Comments
 (0)