8000 *** empty log message *** · w3c/csswg-drafts@1876912 · GitHub
Skip to content

Commit 1876912

Browse files
kojiishikojiishi
committed
*** empty log message ***
1 parent 0627d0c commit 1876912

2 files changed

Lines changed: 79 additions & 77 deletions

File tree

‎css-line-grid/Overview.html‎

Lines changed: 50 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,6 @@
1111
type="text/css">
1212

1313
<style type="text/css">
14-
.right {
15-
float:right;
16-
}
1714
</style>
1815

1916
<body>
@@ -23,13 +20,13 @@
2320

2421
<h1>CSS Line Grid Module</h1>
2522

26-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 April 2011</h2>
23+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 28 April 2011</h2>
2724

2825
<dl>
2926
<dt>This version:
3027

31-
<dd><a href="http://www.w3.org/TR/2011/ED-unknown-shortname-20110426">
32-
http://www.w3.org/TR/2011/ED-unknown-shortname-20110426</a> <!--
28+
<dd><a href="http://www.w3.org/TR/2011/ED-unknown-shortname-20110428">
29+
http://www.w3.org/TR/2011/ED-unknown-shortname-20110428</a> <!--
3330
<dt>Latest version:
3431
<dd><a href="http://www.w3.org/TR/css-line-grid">
3532
http://www.w3.org/TR/css-line-grid</a>
@@ -137,9 +134,9 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
137134
<li><a href="#defining-grids"><span class=secno>2. </span>Defining
138135
Grids</a>
139136
<ul class=toc>
140-
<li><a href="#H1"><span class=secno>2.1. </span>Define Line Grids: the
141-
&lsquo;<code class=property>layout-grid-line</code>&rsquo; property</a>
142-
137+
<li><a href="#layout-grid-line-prop"><span class=secno>2.1.
138+
</span>Define Line Grids: the &lsquo;<code
139+
class=property>layout-grid-line</code>&rsquo; property</a>
143140
</ul>
144141

145142
<li><a href="#using-grids"><span class=secno>3. </span>Using Grids</a>
@@ -150,15 +147,14 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
150147

151148
<li><a href="#grid-shorthand-the-layout-grid-property"><span
152149
class=secno>3.2. </span>Grid Shorthand: the &lsquo;<code
153-
class=css>layout-grid</code>&rsquo; property</a>
150+
class=property>layout-grid</code>&rsquo; property</a>
154151

155-
<li><a href="#the-gd-length-unit"><span class=secno>3.3. </span>The
152+
<li><a href="#grid-length-unit"><span class=secno>3.3. </span>The
156153
&lsquo;<code class=css>gd</code>&rsquo; length unit</a>
157154

158-
<li><a href="#rounding-down-to-multiple-of-units-gd-an"><span
159-
class=secno>3.4. </span>Rounding Down to Multiple of Units:
160-
&lsquo;<code class=css>*gd</code>&rsquo; and &lsquo;<code
161-
class=css>*em</code>&rsquo;</a>
155+
<li><a href="#round-length"><span class=secno>3.4. </span>Rounding Down
156+
to Multiple of Units: &lsquo;<code class=css>*gd</code>&rsquo; and
157+
&lsquo;<code class=css>*em</code>&rsquo;</a>
162158
</ul>
163159

164160
<li><a href="#conformance"><span class=secno>4. </span> Conformance</a>
@@ -209,14 +205,18 @@ <h3 id=context><span class=secno>1.1. </span>Background</h3>
209205
<li>Align lines between columns in multi-column documents.
210206

211207
<li>Layout lines at the same position in every page in paged media.
212-
Keeping the position of the bottom line of a page has benefits from
213-
design perspective. This also results better readability on duplex
214-
printing, two pages spreads, or when displaying on slow display devices
215-
like e-ink.
208+
Keeping the position of the bottom line of a page has benefits for design
209+
and readability. This also results better readability on duplex printing,
210+
two pages spreads, or when displaying on slow display devices like e-ink.
216211

217-
<li>East Asian layouts require the use of grid layout more often than
212+
<li>East Asian layouts require the use of vertical rhythm more often than
218213
other scripts does, even in single column, non-paged media documents, as
219214
defined in <a href="#JLREQ" rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>.
215+
216+
<li>In East Asian documents, it is often desirable to make the line width
217+
to be multiple of <em>em</em>. Most East Asian characters have 1em
218+
advance, and most East Asian documents are justified, so this minimizes
219+
the case where justification needs to expand lines.
220220
</ul>
221221

222222
<p>There are several types of objects in a document that can break the
@@ -242,9 +242,7 @@ <h3 id=context><span class=secno>1.1. </span>Background</h3>
242242

243243
<p>It is important to control these capabilities independently, so that
244244
align to grids can be turned off for tables for example, but can be turned
245-
back on for the following text to the original grids. For example,
246-
oftentimes, text in tables do not align to line grids. But text following
247-
the table should align to the same grids as the text before the table.
245+
back on for the following text to the original grids.
248246

249247
<h3 id=placement><span class=secno>1.2. </span>Module Interactions</h3>
250248

@@ -304,8 +302,8 @@ <h3 id=values><span class=secno>1.4. </span>Values</h3>
304302

305303
<h2 id=defining-grids><span class=secno>2. </span>Defining Grids</h2>
306304

307-
<h3 id=H1><span class=secno>2.1. </span>Define Line Grids: the &lsquo;<a
308-
href="#layout-grid-line"><code
305+
<h3 id=layout-grid-line-prop><span class=secno>2.1. </span>Define Line
306+
Grids: the &lsquo;<a href="#layout-grid-line"><code
309307
class=property>layout-grid-line</code></a>&rsquo; property</h3>
310308

311309
<table class=propdef>
@@ -351,7 +349,13 @@ <h3 id=H1><span class=secno>2.1. </span>Define Line Grids: the &lsquo;<a
351349
<td>specified value
352350
</table>
353351

354-
<p class=issue>TBD
352+
<p class=issue>TBD: I expect this to be very similar to the one in <a
353+
href="http://www.w3.org/TR/2001/WD-css3-text-20010517/#layout-grid-line-prop">CSS3
354+
module: text WD 20010517</a>.
355+
356+
<p class=issue>Grid origin should be defined by the element that has this
357+
property. In that case, should it inherit, or not inherit value but
358+
inherit grid?
355359

356360
<h2 id=using-grids><span class=secno>3. </span>Using Grids</h2>
357361

@@ -409,7 +413,7 @@ <h3 id=layout-grid-mode-prop><span class=secno>3.1. </span>Grid Mode: the
409413
<dt><dfn id=none title="layout-grid-mode::none">&lsquo;<code
410414
class=css>none</code>&rsquo;</dfn>
411415

412-
<dd>Do not align any objects to grids.
416+
<dd>Do not align any objects to the grids.
413417

414418
<dt><dfn id=block title="layout-grid-mode::block">&lsquo;<code
415419
class=css>block</code>&rsquo;</dfn>
@@ -466,29 +470,30 @@ <h3 id=layout-grid-mode-prop><span class=secno>3.1. </span>Grid Mode: the
466470
class=property>layout-grid-line</code></a>&rsquo; property.
467471

468472
<div class=example>
469-
<p>When a different size of text like headings wraps, it is usually
470-
aligned to grids as a block and lines within the block do not align.</p>
471-
472-
<div class=figure> <img alt="A line of large text wraps within line grids"
473+
<div class=sidefigure> <img alt="Large text wraps within line grids"
473474
height=244 src=line-grid-wrap.png width=276>
474-
<p class=caption>A line of large text wraps within line grids.</p>
475+
<p class=caption>Large text wraps within line grids.</p>
475476
</div>
476477

478+
<p>When a different size of text like headings wraps, it is usually
479+
aligned to grids as a block and lines within the block do not align.</p>
480+
477481
<p>This effect can be achieved by the following code:</p>
478482

479483
<pre><code class=css>
480484
<!-- -->body { line-grid-mode: line; }
481485
<!-- -->h1 { line-grid-mode: block; }
482486
<!-- --></code></pre>
487+
<br style="clear:both;">
483488
</div>
484489

485490
<h3 id=grid-shorthand-the-layout-grid-property><span class=secno>3.2.
486491
</span>Grid Shorthand: the &lsquo;<code
487-
class=css>layout-grid</code>&rsquo; property</h3>
492+
class=property>layout-grid</code>&rsquo; property</h3>
488493

489494
<p class=issue>TBD
490495

491-
<h3 id=the-gd-length-unit><span class=secno>3.3. </span>The &lsquo;<code
496+
<h3 id=grid-length-unit><span class=secno>3.3. </span>The &lsquo;<code
492497
class=css><span class=index id=gd title="length
493498
unit::gd">gd</span></code>&rsquo; length unit</h3>
494499

@@ -510,33 +515,26 @@ <h3 id=the-gd-length-unit><span class=secno>3.3. </span>The &lsquo;<code
510515
<p>If no grid is specified, the gd unit should be treated the same as the
511516
em unit.
512517

513-
<h3 id=rounding-down-to-multiple-of-units-gd-an><span class=secno>3.4.
514-
</span>Rounding Down to Multiple of Units: &lsquo;<code class=css><span
515-
class=index id=gd0 title="length unit::*gd">*gd</span></code>&rsquo; and
516-
&lsquo;<code class=css><span class=index id=em title="length
517-
unit::*em">*em</span></code>&rsquo;</h3>
518+
<p class=issue>Just copied from old WD, need to refresh
519+
520+
<h3 id=round-length><span class=secno>3.4. </span>Rounding Down to Multiple
521+
of Units: &lsquo;<code class=css><span class=index id=gd0 title="length
522+
unit::*gd">*gd</span></code>&rsquo; and &lsquo;<code class=css><span
523+
class=index id=em title="length unit::*em">*em</span></code>&rsquo;</h3>
518524

519525
<p>The &lsquo;<code class=property>width</code>&rsquo; and &lsquo;<code
520526
class=property>height</code>&rsquo; properties accept &lsquo;<code
521527
class=css>*gd</code>&rsquo; and &lsquo;<code class=css>*em</code>&rsquo;
522-
values. This syntax computes to &lsquo;<code class=css>auto</code>&rsquo;,
528+
values. These values compute to &lsquo;<code class=css>auto</code>&rsquo;,
523529
and then the result will be round down to the largest multiple of the
524530
specified unit that is equal to or less than the original computed value.
525531

526-
<p>The half of the fraction is added to each margin of the direction; if it
527-
is used for &lsquo;<code class=property>height</code>&rsquo;, the half of
528-
fraction is added to the top and bottom margins, and if for &lsquo;<code
532+
<p>The fraction is distributed evenly to each side margins. If it is used
533+
for &lsquo;<code class=property>height</code>&rsquo;, the half of fraction
534+
is added to the top and bottom margins, and if for &lsquo;<code
529535
class=property>width</code>&rsquo;, to the left and right margins.
530536

531-
<div class=example>
532-
<pre><code class=css>
533-
<!-- -->body {
534-
<!-- --> width: *em;
535-
<!-- --> height: *gd;
536-
<!-- --> margin: 3em 2gd 3em 3gd;
537-
<!-- -->}
538-
<!-- --></code></pre>
539-
</div>
537+
<p class=issue>Should this be a property instead?
540538

541539
<h2 id=conformance><span class=secno>4. </span> Conformance</h2>
542540

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

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,6 @@
88
<link rel="stylesheet" type="text/css"
99
href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
1010
<style type="text/css">
11-
.right {
12-
float:right;
13-
}
1411
</style>
1512
</head>
1613

@@ -80,14 +77,20 @@ <h3 id="context">Background</h3>
8077
<li>Keep vertical rhythm for better readability.</li>
8178
<li>Align lines between columns in multi-column documents.</li>
8279
<li>Layout lines at the same position in every page in paged media.
83-
Keeping the position of the bottom line of a page has benefits from design perspective.
80+
Keeping the position of the bottom line of a page has benefits for
81+
design and readability.
8482
This also results better readability on duplex printing,
8583
two pages spreads,
8684
or when displaying on slow display devices like e-ink.</li>
87-
<li>East Asian layouts require the use of grid layout
85+
<li>East Asian layouts require the use of vertical rhythm
8886
more often than other scripts does,
8987
even in single column, non-paged media documents,
9088
as defined in [[JLREQ]].</li>
89+
<li>In East Asian documents,
90+
it is often desirable to make the line width to be multiple of <em>em</em>.
91+
Since most East Asian characters have 1em advance,
92+
and since most East Asian documents are justified,
93+
this minimizes the case where justification needs to expand lines.</li>
9194
</ul>
9295

9396
<p>There are several types of objects in a document
@@ -166,7 +169,7 @@ <h3 id="values">Values</h3>
166169

167170
<h2>Defining Grids</h2>
168171

169-
<h3 id="H1">Define Line Grids: the 'layout-grid-line' property</h3>
172+
<h3 id="layout-grid-line-prop">Define Line Grids: the 'layout-grid-line' property</h3>
170173

171174
<table class=propdef>
172175
<tr>
@@ -197,7 +200,12 @@ <h3 id="H1">Define Line Grids: the 'layout-grid-line' property</h3>
197200
<td>specified value
198201
</table>
199202

200-
<p class="issue">TBD</p>
203+
<p class="issue">TBD:
204+
I expect this to be very similar to the one in
205+
<a href="http://www.w3.org/TR/2001/WD-css3-text-20010517/#layout-grid-line-prop">CSS3 module: text WD 20010517</a>.</p>
206+
<p class="issue">Grid origin should be defined by the element that has this property,
207+
similar to ''display: static''.
208+
In that case, should this property inherit, or not inherit the property but inherit grid?</p>
201209

202210

203211
<h2>Using Grids</h2>
@@ -294,30 +302,32 @@ <h3 id="layout-grid-mode-prop">Grid Mode: the 'layout-grid-mode' property</h3>
294302
line grids must be defined by the 'layout-grid-line' property.</p>
295303

296304
<div class="example">
297-
<p>When a different size of text like headings wraps,
298-
it is usually aligned to grids as a block and
299-
lines within the block do not align.</p>
300-
301-
<div class="figure">
305+
<div class="sidefigure">
302306
<img src="line-grid-wrap.png"
303307
width="276" height="244"
304-
alt="A line of large text wraps within line grids"
308+
alt="Large text wraps within line grids"
305309
/>
306-
<p class="caption">A line of large text wraps within line grids.</p>
310+
<p class="caption">Large text wraps within line grids.</p>
307311
</div>
308312

313+
<p>When a different size of text like headings wraps,
314+
it is usually aligned to grids as a block and
315+
lines within the block do not align.</p>
316+
309317
<p>This effect can be achieved by the following code:</p>
310318
<pre><code class="css">
311319
<!-- -->body { line-grid-mode: line; }
312320
<!-- -->h1 { line-grid-mode: block; }
313321
<!-- --></code></pre>
322+
323+
<br style="clear:both;"/>
314324
</div>
315325

316326
<h3>Grid Shorthand: the 'layout-grid' property</h3>
317327

318328
<p class="issue">TBD</p>
319329

320-
<h3>The ''<span class="index" title="length unit::gd">gd</span>'' length unit</h3>
330+
<h3 id="grid-length-unit">The ''<span class="index" title="length unit::gd">gd</span>'' length unit</h3>
321331

322332
<p>The existence of a grid in an element makes it possible
323333
and very useful to express various measurements in that
@@ -335,7 +345,9 @@ <h3>The ''<span class="index" title="length unit::gd">gd</span>'' length unit</h
335345

336346
<p>If no grid is specified, the gd unit should be treated the same as the em unit.</p>
337347

338-
<h3>Rounding Down to Multiple of Units:
348+
<p class="issue">Just copied from old WD, need to refresh</p>
349+
350+
<h3 id="round-length">Rounding Down to Multiple of Units:
339351
''<span class="index" title="length unit::*gd">*gd</span>''
340352
and ''<span class="index" title="length unit::*em">*em</span>''</h3>
341353

@@ -350,15 +362,7 @@ <h3>Rounding Down to Multiple of Units:
350362
If it is used for 'height', the half of fraction is added to the top and bottom margins,
351363
and if for 'width', to the left and right margins.</p>
352364

353-
<div class="example">
354-
<pre><code class="css">
355-
<!-- -->body {
356-
<!-- --> width: *em;
357-
<!-- --> height: *gd;
358-
<!-- --> margin: 3em 2gd 3em 3gd;
359-
<!-- -->}
360-
<!-- --></code></pre>
361-
</div>
365+
<p class="issue">Should this be a property instead?</p>
362366

363367
<h2 id="conformance">
364368
Conformance</h2>

0 commit comments

Comments
 (0)