8000 Add 'layout-grid-char' property · w3c/csswg-drafts@1da5b39 · GitHub
Skip to content

Commit 1da5b39

Browse files
kojiishikojiishi
committed
Add 'layout-grid-char' property
Add 'layout-grid-measure' property
1 parent b38411d commit 1da5b39

2 files changed

Lines changed: 263 additions & 18 deletions

File tree

‎css-line-grid/Overview.html‎

Lines changed: 178 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,13 @@
3939

4040
<h1>CSS Line Grid Module</h1>
4141

42-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 May 2011</h2>
42+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 21 May 2011</h2>
4343

4444
<dl>
4545
<dt>This version:
4646

47-
<dd><a href="http://www.w3.org/TR/2011/ED-unknown-shortname-20110514/">
48-
http://www.w3.org/TR/2011/ED-unknown-shortname-20110514</a> <!--
47+
<dd><a href="http://www.w3.org/TR/2011/ED-unknown-shortname-20110521/">
48+
http://www.w3.org/TR/2011/ED-unknown-shortname-20110521</a> <!--
4949
<dt>Latest version:
5050
<dd><a href="http://www.w3.org/TR/css-line-grid">
5151
http://www.w3.org/TR/css-line-grid</a>
@@ -171,10 +171,24 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
171171
<li><a href="#grid-length-unit"><span class=secno>3.3. </span>The
172172
&lsquo;<code class=css>gd</code>&rsquo; length unit</a>
173173

174-
<li><a href="#round-length"><span class=secno>3.4. </span>Rounding
175-
Lengths to Multiple of Units: &lsquo;<code
176-
class=css>rounddown()</code>&rsquo; and &lsquo;<code
177-
class=css>roundup()</code>&rsquo; </a>
174+
<li><a href="#forcing-line-width-to-multiple-of-em"><span
175+
class=secno>3.4. </span>Forcing Line Width to Multiple of
176+
<em>em</em></a>
177+
<ul class=toc>
178+
<li><a href="#round-length"><span class=secno>3.4.1. </span>Rounding
179+
Lengths to Multiple of Units: &lsquo;<code
180+
class=css>rounddown()</code>&rsquo; and &lsquo;<code
181+
class=css>roundup()</code>&rsquo; </a>
182+
183+
<li><a href="#rounding-lengths-to-multiple-of-units-th"><span
184+
class=secno>3.4.2. </span>Rounding Lengths to Multiple of Units: the
185+
&lsquo;<code class=property>layout-grid-measure</code>&rsquo;
186+
property</a>
187+
188+
<li><a href="#character-grid-the-layout-grid-char-prop"><span
189+
class=secno>3.4.3. </span>Character Grid: the &lsquo;<code
190+
class=property>layout-grid-char</code>&rsquo; property</a>
191+
</ul>
178192
</ul>
179193

180194
<li><a href="#conformance"><span class=secno>4. </span> Conformance</a>
@@ -675,11 +689,17 @@ <h3 id=grid-length-unit><span class=secno>3.3. </span>The &lsquo;<code
675689
<!-- --></code></pre>
676690
</div>
677691

678-
<h3 id=round-length><span class=secno>3.4. </span>Rounding Lengths to
692+
<h3 id=forcing-line-width-to-multiple-of-em><span class=secno>3.4.
693+
</span>Forcing Line Width to Multiple of <em>em</em></h3>
694+
695+
<p class=issue>There are multiple ideas for this, and all ideas are listed
696+
here for disucssions.
697+
698+
<h4 id=round-length><span class=secno>3.4.1. </span>Rounding Lengths to
679699
Multiple of Units: &lsquo;<code class=css><span class=index id=rounddown
680700
title="length unit::rounddown()">rounddown()</span></code>&rsquo; and
681701
&lsquo;<code class=css><span class=index id=roundup title="length
682-
unit::rounddown()">roundup()</span></code>&rsquo;</h3>
702+
unit::rounddown()">roundup()</span></code>&rsquo;</h4>
683703

684704
<p>The &lsquo;<code class=property>width</code>&rsquo; and &lsquo;<code
685705
class=property>height</code>&rsquo; properties accept &lsquo;<code
@@ -708,8 +728,6 @@ <h3 id=round-length><span class=secno>3.4. </span>Rounding Lengths to
708728
class=property>float</code>&rsquo; property is &lsquo;<code
709729
class=css>left</code>&rsquo;, the fraction is added to the right margins.
710730

711-
<p class=issue>Should this be a property instead?
712-
713731
<p class=issue>Is this design appropriate to solve text with floats case?
714732

715733
<p class=issue>Are there requirements for table cell width?
@@ -738,6 +756,114 @@ <h3 id=round-length><span class=secno>3.4. </span>Rounding Lengths to
738756
<!-- --></code></pre>
739757
</div>
740758

759+
<h4 id=rounding-lengths-to-multiple-of-units-th><span class=secno>3.4.2.
760+
</span>Rounding Lengths to Multiple of Units: the &lsquo;<a
761+
href="#layout-grid-measure"><code
762+
class=property>layout-grid-measure</code></a>&rsquo; property</h4>
763+
764+
<table class=propdef>
765+
<tbody>
766+
<tr>
767+
<th>Name:
768+
769+
<td><dfn id=layout-grid-measure>layout-grid-measure</dfn>
770+
771+
<tr>
772+
<th>Value:
773+
774+
<td>none | auto | &lt;length&gt; || up | down
775+
776+
<tr>
777+
<th>Initial:
778+
779+
<td>none
780+
781+
<tr>
782+
<th>Applies to:
783+
784+
<td>block containers
785+
786+
<tr>
787+
<th>Inherited:
788+
789+
<td>no
790+
791+
<tr>
792+
<th>Percentages:
793+
794+
<td>N/A
795+
796+
<tr>
797+
<th>Media:
798+
799+
<td>visual
800+
801+
<tr>
802+
<th>Computed&nbsp;value:
803+
804+
<td>specified value
805+
</table>
806+
807+
<h4 id=character-grid-the-layout-grid-char-prop><span class=secno>3.4.3.
808+
</span>Character Grid: the &lsquo;<a href="#layout-grid-char"><code
809+
class=property>layout-grid-char</code></a>&rsquo; property</h4>
810+
811+
<table class=propdef>
812+
<tbody>
813+
<tr>
814+
<th>Name:
815+
816+
<td><dfn id=layout-grid-char>layout-grid-char</dfn>
817+
818+
<tr>
819+
<th>Value:
820+
821+
<td>none | auto | &lt;length&gt;
822+
823+
<tr>
824+
<th>Initial:
825+
826+
<td>none
827+
828+
<tr>
829+
<th>Applies to:
830+
831+
<td>block containers
832+
833+
<tr>
834+
<th>Inherited:
835+
836+
<td>no
837+
838< AA29 span class="diff-text-marker">+
<tr>
839+
<th>Percentages:
840+
841+
<td>N/A
842+
843+
<tr>
844+
<th>Media:
845+
846+
<td>visual
847+
848+
<tr>
849+
<th>Computed&nbsp;value:
850+
851+
<td>specified value
852+
</table>
853+
854+
<p>This property defines a character grid for the element. Possible values
855+
are:
856+
857+
<p>When a character grid is defined, the start and end edge of a line box
858+
snap to the nearest grid in the direction to shorten the line box.
859+
860+
<div class=figure> <object data=line-length.svg height=158
861+
type="image/svg+xml" width=340> </object>
862+
<p class=caption>The gray part of a line box is rounded down to snap to
863+
the grid. The second line box has a float on the left (green), and
864+
therefore its start edge snaps to the grid as well.</p>
865+
</div>
866+
741867
<h2 id=conformance><span class=secno>4. </span> Conformance</h2>
742868

743869
<h3 id=conformance-classes><span class=secno>4.1. </span> Conformance
@@ -957,6 +1083,9 @@ <h2 class=no-num id=index>Index</h2>
9571083
<li>authoring tool, <a href="#authoring-tool" title="authoring
9581084
tool"><strong>4.1.</strong></a>
9591085

1086+
<li>layout-grid-char, <a href="#layout-grid-char"
1087+
title=layout-grid-char><strong>3.4.3.</strong></a>
1088+
9601089
<li>layout-grid-line, <a href="#layout-grid-line"
9611090
title=layout-grid-line><strong>2.1.</strong></a>
9621091
<ul>
@@ -973,6 +1102,9 @@ <h2 class=no-num id=index>Index</h2>
9731102
percent"><strong>2.1.</strong></a>
9741103
</ul>
9751104

1105+
<li>layout-grid-measure, <a href="#layout-grid-measure"
1106+
title=layout-grid-measure><strong>3.4.2.</strong></a>
1107+
9761108
<li>layout-grid-mode, <a href="#layout-grid-mode"
9771109
title=layout-grid-mode><strong>3.1.</strong></a>
9781110
<ul>
@@ -994,8 +1126,8 @@ <h2 class=no-num id=index>Index</h2>
9941126
<li>gd, <a href="#gd" title="length unit, gd">3.3.</a>
9951127

9961128
<li>rounddown(), <a href="#rounddown" title="length unit,
997-
rounddown()">3.4.</a>, <a href="#roundup" title="length unit,
998-
rounddown()">3.4.</a>
1129+
rounddown()">3.4.1.</a>, <a href="#roundup" title="length unit,
1130+
rounddown()">3.4.1.</a>
9991131
</ul>
10001132

10011133
<li>renderer, <a href="#renderer" title=renderer><strong>4.1.</strong></a>
@@ -1030,7 +1162,22 @@ <h2 class=no-num id=property-index>Property index</h2>
10301162
<th>Media
10311163

10321164
<tbody>
1033-
<tr valign=baseline>
1165+
<tr>
1166+
<td><a class=property href="#layout-grid-char">layout-grid-char</a>
1167+
1168+
<td>none | auto | &lt;length&gt;
1169+
1170+
<td>none
1171+
1172+
<td>block containers
1173+
1174+
<td>no
1175+
1176+
<td>N/A
1177+
1178+
<td>visual
1179+
1180+
<tr>
10341181
<td><a class=property href="#layout-grid-line">layout-grid-line</a>
10351182

10361183
<td>none | auto | &lt;length&gt; | &lt;percentage&gt;
@@ -1045,7 +1192,23 @@ <h2 class=no-num id=property-index>Property index</h2>
10451192

10461193
<td>visual
10471194

1048-
<tr valign=baseline>
1195+
<tr>
1196+
<td><a class=property
1197+
href="#layout-grid-measure">layout-grid-measure</a>
1198+
1199+
<td>none | auto | &lt;length&gt; || up | down
1200+
1201+
<td>none
1202+
1203+
<td>block containers
1204+
1205+
<td>no
1206+
1207+
<td>N/A
1208+
1209+
<td>visual
1210+
1211+
<tr>
10491212
<td><a class=property href="#layout-grid-mode">layout-grid-mode</a>
10501213

10511214
<td>none | baseline | block | line

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

Lines changed: 85 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -491,10 +491,12 @@ <h3 id="grid-length-unit">The ''<span class="index" title="length unit::gd">gd</
491491
<!-- --></code></pre>
492492
</div>
493493

494-
<h3 id="round-length">Rounding Lengths to Multiple of Units:
494+
<h3>Forcing Line Width to Multiple of <em>em</em></h3>
495+
<p class="issue">There are 3 ideas for this, and all ideas are listed here for disucssions.</p>
496+
<h4 id="round-length">Rounding Lengths to Multiple of Units:
495497
''<span class="index" title="length unit::rounddown()">rounddown()</span>''
496498
and ''<span class="index" title="length unit::rounddown()">roundup()</span>''
497-
</h3>
499+
</h4>
498500

499501
<p>The 'width' and 'height' properties
500502
accept ''rounddown(<em>length</em>)''
@@ -520,7 +522,6 @@ <h3 id="round-length">Rounding Lengths to Multiple of Units:
520522
For example, if the 'float' property is ''left'',
521523
the fraction is added to the right margins.</p>
522524

523-
<p class="issue">Should this be a property instead?</p>
524525
<p class="issue">Is this design appropriate to solve text with floats case?</p>
525526
<p class="issue">Are there requirements for table cell width?</p>
526527
<p class="issue">Should have an option to left/right align instead of center?
@@ -547,6 +548,87 @@ <h3 id="round-length">Rounding Lengths to Multiple of Units:
547548
<!-- --></code></pre>
548549
</div>
549550

551+
<h4>Rounding Lengths to Multiple of Units: the 'layout-grid-measure' property</h4>
552+
553+
<table class=propdef>
554+
<tr>
555+
<th>Name:
556+
<td><dfn>layout-grid-measure</dfn>
557+
<tr>
558+
<th>Value:
559+
<td>none
560+
| auto
561+
| &lt;length&gt;
562+
|| up | down
563+
<tr>
564+
<th>Initial:
565+
<td>none
566+
<tr>
567+
<th>Applies to:
568+
<td>block containers
569+
<tr>
570+
<th>Inherited:
571+
<td>no
572+
<tr>
573+
<th>Percentages:
574+
<td>N/A
575+
<tr>
576+
<th>Media:
577+
<td>visual
578+
<tr>
579+
<th>Computed&nbsp;value:
580+
<td>specified value
581+
</table>
582+
583+
<h4>Character Grid: the 'layout-grid-char' property</h4>
584+
585+
<table class=propdef>
586+
<tr>
587+
<th>Name:< 7B3C /div>
588+
<td><dfn>layout-grid-char</dfn>
589+
<tr>
590+
<th>Value:
591+
<td>none
592+
| auto
593+
| &lt;length&gt;
594+
<tr>
595+
<th>Initial:
596+
<td>none
597+
<tr>
598+
<th>Applies to:
599+
<td>block containers
600+
<tr>
601+
<th>Inherited:
602+
<td>no
603+
<tr>
604+
<th>Percentages:
605+
<td>N/A
606+
<tr>
607+
<th>Media:
608+
<td>visual
609+
<tr>
610+
<th>Computed&nbsp;value:
611+
<td>specified value
612+
</table>
613+
614+
<p>This property defines a character grid for the element. Possible values are:</p>
615+
616+
<p>When a character grid is defined,
617+
start and end edges of a line box snap to the nearest grid
618+
in the direction to shorten the line box.</p>
619+
620+
<div class="figure">
621+
<object
622+
data="line-length.svg" type="image/svg+xml"
623+
width="340" height="158">
624+
</object>
625+
<p class="caption">The gray part of a line box is rounded down to snap to the grid.
626+
The second line box has a float on the left (green),
627+
and therefore its start edge snaps to the grid as well.</p>
628+
</div>
629+
630+
631+
550632
<h2 id="conformance">
551633
Conformance</h2>
552634

0 commit comments

Comments
 (0)