Skip to content

Commit f1345c5

Browse files
kojiishikojiishi
committed
Design change to rounding length
1 parent 6276e70 commit f1345c5

File tree

2 files changed

+174
-52
lines changed

2 files changed

+174
-52
lines changed

‎css-line-grid/Overview.html

+107-32
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 6 May 2011</h2>
42+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 May 2011</h2>
4343

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

47-
<dd><a href="http://www.w3.org/TR/2011/ED-unknown-shortname-20110506">
48-
http://www.w3.org/TR/2011/ED-unknown-shortname-20110506</a> <!--
47+
<dd><a href="http://www.w3.org/TR/2011/ED-unknown-shortname-20110512/">
48+
http://www.w3.org/TR/2011/ED-unknown-shortname-20110512</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,9 +171,10 @@ <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 Down
175-
Lengths to Multiple of Units: &lsquo;<code class=css>*gd</code>&rsquo;
176-
and &lsquo;<code class=css>*em</code>&rsquo;</a>
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>
177178
</ul>
178179

179180
<li><a href="#conformance"><span class=secno>4. </span> Conformance</a>
@@ -239,11 +240,6 @@ <h3 id=context><span class=secno>1.1. </span>Background</h3>
239240
<li>East Asian layouts require vertical rhythm more often than other
240241
scripts do, even in single column, non-paged media documents, as defined
241242
in <a href="#JLREQ" rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>.
242-
243-
<li>It is often desirable in East Asian layouts to make the line width a
244-
multiple of <em>em</em> without fractions. Because most East Asian
245-
characters have 1em advance and most East Asian documents are justified,
246-
this minimizes cases where justification is needed to expand lines.
247243
</ul>
248244

249245
<p>There are several types of objects in a document that can break the
@@ -272,14 +268,30 @@ <h3 id=context><span class=secno>1.1. </span>Background</h3>
272268
with the basic text.</p>
273269
</div>
274270

271+
<div class=sidefigure id=ex-width> <img alt="East Asian layouts may require
272+
width be a multiple of em without fractions" height=168
273+
src=width-multiple-of-em.png width=206>
274+
<p class=caption>East Asian layouts may require width be a multiple of
275+
<em>em</em> without fractions.</p>
276+
</div>
277+
278+
<p>East Asian layouts may require grid-like features in inline progression
279+
direction as well.
280+
281+
<p>It is often desirable in East Asian layouts to make the line width a
282+
multiple of <em>em</em> without fractions. Because most East Asian
283+
characters have 1em advance and most East Asian documents are justified,
284+
this minimizes cases where justification needs to expand character
285+
spacing.
286+
275287
<p>This module provides the following capabilities:
276288

277289
<ul>
278290
<li>Defining grids in the line progression direction.
279291

280292
<li>Controling how lines and blocks align to the grids.
281293

282-
<li>Rounding lengths down to multiples of units.
294+
<li>Rounding lengths to multiples of units.
283295
</ul>
284296

285297
<p>It is important to control these capabilities independently, so that,
@@ -391,15 +403,49 @@ <h3 id=layout-grid-line-prop><span class=secno>2.1. </span>Define Line
391403
<td>specified value
392404
</table>
393405

394-
<p class=issue>TBD: I expect this to be very similar to the one in <a
406+
<p>This property defines a line grid for the element and its descendent
407+
elements. Possible values are:
408+
409+
<dl>
410+
<dt><dfn id=none title="layout-grid-line::none">&lsquo;<code
411+
class=css>none</code>&rsquo;</dfn>
412+
413+
<dd>No line grid is specified.
414+
415+
<dt><dfn id=auto title="layout-grid-line::auto">&lsquo;<code
416+
class=css>auto</code>&rsquo;</dfn>
417+
418+
<dd>The grid line size is determined by the computed value of the
419+
&lsquo;<code class=property>line-height</code>&rsquo; property.
420+
421+
<dt><dfn id=ltlengthgt
422+
title="layout-grid-line::length">&lt;length&gt;</dfn>
423+
424+
<dd>Size of the line grid's unit space (a.k.a. "line pitch").
425+
426+
<dt><dfn id=ltpercentgt
427+
title="layout-grid-line::percent">&lt;percent&gt;</dfn>
428+
429+
<dd>Size of the line grid's unit space relative to the logical height of
430+
the parent element. If the parent has no explicit height, it is treated
431+
as &lsquo;<code class=css>auto</code>&rsquo;. <span class=issue>This was
432+
defined in <a
433+
href="http://www.w3.org/TR/2001/WD-css3-text-20010517/#layout-grid-line-prop">CSS3
434+
module: text WD 20010517</a>, but not sure how much useful this is</span>
435+
</dl>
436+
437+
<p>The defined grid uses the position of the element as the origin of the
438+
grid. It uses the top of the element as the origin of the grid for
439+
horiozntal text flow. Similarly, it uses the right of the element as the
440+
origin of the grid for &lsquo;<code
441+
class=property>writing-mode</code>&rsquo; is &lsquo;<code
442+
class=css>vertical-rl</code>&rsquo;, and the left of the element for
443+
&lsquo;<code class=css>vertical-lr</code>&rsquo;.
444+
445+
<p class=issue>TBD: I might need to copy more text from <a
395446
href="http://www.w3.org/TR/2001/WD-css3-text-20010517/#layout-grid-line-prop">CSS3
396447
module: text WD 20010517</a>.
397448

398-
<p class=issue>Grid origin should be defined by the element that has this
399-
property, similar to &lsquo;<code class=css>position:
400-
static</code>&rsquo;. In that case, should this property inherit, or not
401-
inherit the property but inherit grid?
402-
403449
<h2 id=using-grids><span class=secno>3. </span>Using Grids</h2>
404450

405451
<h3 id=layout-grid-mode-prop><span class=secno>3.1. </span>Grid Mode: the
@@ -453,7 +499,7 @@ <h3 id=layout-grid-mode-prop><span class=secno>3.1. </span>Grid Mode: the
453499
have the following meanings:
454500

455501
<dl>
456-
<dt><dfn id=none title="layout-grid-mode::none">&lsquo;<code
502+
<dt><dfn id=none0 title="layout-grid-mode::none">&lsquo;<code
457503
class=css>none</code>&rsquo;</dfn>
458504

459505
<dd>Do not align any objects to the grids.
@@ -622,27 +668,43 @@ <h3 id=grid-length-unit><span class=secno>3.3. </span>The &lsquo;<code
622668
<!-- --></code></pre>
623669
</div>
624670

625-
<h3 id=round-length><span class=secno>3.4. </span>Rounding Down Lengths to
626-
Multiple of Units: &lsquo;<code class=css><span class=index id=gd0
627-
title="length unit::*gd">*gd</span></code>&rsquo; and &lsquo;<code
628-
class=css><span class=index id=em title="length
629-
unit::*em">*em</span></code>&rsquo;</h3>
671+
<h3 id=round-length><span class=secno>3.4. </span>Rounding Lengths to
672+
Multiple of Units: &lsquo;<code class=css><span class=index id=rounddown
673+
title="length unit::rounddown()">rounddown()</span></code>&rsquo; and
674+
&lsquo;<code class=css><span class=index id=roundup title="length
675+
unit::rounddown()">roundup()</span></code>&rsquo;</h3>
630676

631677
<p>The &lsquo;<code class=property>width</code>&rsquo; and &lsquo;<code
632678
class=property>height</code>&rsquo; properties accept &lsquo;<code
633-
class=css>*gd</code>&rsquo; and &lsquo;<code class=css>*em</code>&rsquo;
634-
values. These values compute to &lsquo;<code class=css>auto</code>&rsquo;,
635-
and then the result will be rounded down to the largest multiple of the
636-
specified unit that is equal to or less than the original computed value.
679+
class=css>rounddown(<em>length</em>)</code>&rsquo; and &lsquo;<code
680+
class=css>roundup(<em>length</em>)</code>&rsquo; values.
681+
682+
<p>The &lsquo;<code class=css>rounddown(<em>length</em>)</code>&rsquo;
683+
computes to &lsquo;<code class=css>auto</code>&rsquo;, and then the result
684+
will be rounded down to the largest multiple of the specified unit that is
685+
equal to or less than the original computed value.
686+
687+
<p>Similarly, the &lsquo;<code
688+
class=css>roundup(<em>length</em>)</code>&rsquo; computes to &lsquo;<code
689+
class=css>auto</code>&rsquo;, and then the result will be rounded up to
690+
the smallest multiple of the specified unit that is equal to or greater
691+
than the original computed value.
637692

638693
<p>The fraction is distributed evenly to the computed values of margins on
639694
each side. If it is used for &lsquo;<code
640695
class=property>height</code>&rsquo;, half the fraction is added to the top
641696
and the bottom margins. If for &lsquo;<code
642697
class=property>width</code>&rsquo;, to the left and the right margins.
643698

699+
<p>When the element is a float, the fraction is added to the opposite side
700+
of the float direction instead. For example, if the &lsquo;<code
701+
class=property>float</code>&rsquo; property is &lsquo;<code
702+
class=css>left</code>&rsquo;, the fraction is added to the right margins.
703+
644704
<p class=issue>Should this be a property instead?
645705

706+
<p class=issue>Is this design appropriate to solve text with floats case?
707+
646708
<p class=issue>Should have an option to left/right align instead of center?
647709
Can author align running head and page numbers with body with this design?
648710

@@ -884,6 +946,19 @@ <h2 class=no-num id=index>Index</h2>
884946

885947
<li>layout-grid-line, <a href="#layout-grid-line"
886948
title=layout-grid-line><strong>2.1.</strong></a>
949+
<ul>
950+
<li>auto, <a href="#auto" title="layout-grid-line,
951+
auto"><strong>2.1.</strong></a>
952+
953+
<li>length, <a href="#ltlengthgt" title="layout-grid-line,
954+
length"><strong>2.1.</strong></a>
955+
956+
<li>none, <a href="#none" title="layout-grid-line,
957+
none"><strong>2.1.</strong></a>
958+
959+
<li>percent, <a href="#ltpercentgt" title="layout-grid-line,
960+
percent"><strong>2.1.</strong></a>
961+
</ul>
887962

888963
<li>layout-grid-mode, <a href="#layout-grid-mode"
889964
title=layout-grid-mode><strong>3.1.</strong></a>
@@ -897,17 +972,17 @@ <h2 class=no-num id=index>Index</h2>
897972
<li>line, <a href="#line" title="layout-grid-mode,
898973
line"><strong>3.1.</strong></a>
899974

900-
<li>none, <a href="#none" title="layout-grid-mode,
975+
<li>none, <a href="#none0" title="layout-grid-mode,
901976
none"><strong>3.1.</strong></a>
902977
</ul>
903978

904979
<li>length unit
905980
<ul>
906-
<li>*em, <a href="#em" title="length unit, *em">3.4.</a>
907-
908981
<li>gd, <a href="#gd" title="length unit, gd">3.3.</a>
909982

910-
<li>*gd, <a href="#gd0" title="length unit, *gd">3.4.</a>
983+
<li>rounddown(), <a href="#rounddown" title="length unit,
984+
rounddown()">3.4.</a>, <a href="#roundup" title="length unit,
985+
rounddown()">3.4.</a>
911986
</ul>
912987

913988
<li>renderer, <a href="#renderer" title=renderer><strong>4.1.</strong></a>

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

+67-20
Original file line numberDiff line numberDiff line change
@@ -112,12 +112,6 @@ <h3 id="context">Background</h3>
112112
more often than other scripts do,
113113
even in single column, non-paged media documents,
114114
as defined in [[JLREQ]].</li>
115-
<li>It is often desirable in East Asian layouts
116-
to make the line width
117-
a multiple of <em>em</em> without fractions.
118-
Because most East Asian characters have 1em advance
119-
and most East Asian documents are justified,
120-
this minimizes cases where justification is needed to expand lines.</li>
121115
</ul>
122116

123117
<p>There are several types of objects in a document
@@ -150,11 +144,29 @@ <h3 id="context">Background</h3>
150144
<p class="caption">Sidenotes are set at a smaller size, but still line up with the basic text.</p>
151145
</div>
152146

147+
<div id="ex-width" class="sidefigure">
148+
<img src="width-multiple-of-em.png"
149+
width="206" height="168"
150+
alt="East Asian layouts may require width be a multiple of em without fractions"
151+
/>
152+
<p class="caption">East Asian layouts may require width
153+
be a multiple of <em>em</em> without fractions.</p>
154+
</div>
155+
156+
<p>East Asian layouts may require grid-like features
157+
in inline progression direction as well.</p>
158+
<p>It is often desirable in East Asian layouts
159+
to make the line width
160+
a multiple of <em>em</em> without fractions.
161+
Because most East Asian characters have 1em advance
162+
and most East Asian documents are justified,
163+
this minimizes cases where justification needs to expand character spacing.</p>
164+
153165
<p>This module provides the following capabilities:</p>
154166
<ul>
155167
<li>Defining grids in the line progression direction.</li>
156168
<li>Controling how lines and blocks align to the grids.</li>
157-
<li>Rounding lengths down to multiples of units.</li>
169+
<li>Rounding lengths to multiples of units.</li>
158170
</ul>
159171

160172
<p>It is important to control these capabilities independently,
@@ -222,9 +234,10 @@ <h3 id="layout-grid-line-prop">Define Line Grids: the 'layout-grid-line' propert
222234
<td><dfn>layout-grid-line</dfn>
223235
<tr>
224236
<th>Value:
225-
<td>none | auto |
226-
&lt;length&gt; |
227-
&lt;percentage&gt;
237+
<td>none
238+
| auto
239+
| &lt;length&gt;
240+
| &lt;percentage&gt;
228241
<tr>
229242
<th>Initial:
230243
<td>none
@@ -245,13 +258,33 @@ <h3 id="layout-grid-line-prop">Define Line Grids: the 'layout-grid-line' propert
245258
<td>specified value
246259
</table>
247260

261+
<p>This property defines a line grid for the element and its descendent elements.
262+
Possible values are:</p>
263+
<dl>
264+
<dt><dfn title="layout-grid-line::none">''none''</dfn></dt>
265+
<dd>No line grid is specified.</dd>
266+
<dt><dfn title="layout-grid-line::auto">''auto''</dfn></dt>
267+
<dd>The grid line size is determined by the computed value of the 'line-height' property.</span></dd>
268+
<dt><dfn title="layout-grid-line::length">&lt;length&gt;</dfn></dt>
269+
<dd>Size of the line grid's unit space (a.k.a. "line pitch").</dd>
270+
<dt><dfn title="layout-grid-line::percent">&lt;percent&gt;</dfn></dt>
271+
<dd>Size of the line grid's unit space
272+
relative to the logical height of the parent element.
273+
If the parent has no explicit height, it is treated as ''auto''.
274+
<span class="issue">This was defined in
275+
<a href="http://www.w3.org/TR/2001/WD-css3-text-20010517/#layout-grid-line-prop">CSS3 module: text WD 20010517</a>,
276+
but not sure how much useful this is</span></dd>
277+
</dl>
278+
279+
<p>The defined grid uses the position of the element as the origin of the grid.
280+
It uses the top of the element as the origin of the grid for horiozntal text flow.
281+
Similarly, it uses the right of the element as the origin of the grid
282+
for 'writing-mode' is ''vertical-rl'',
283+
and the left of the element for ''vertical-lr''.</p>
284+
248285
<p class="issue">TBD:
249-
I expect this to be very similar to the one in
286+
I might need to copy more text from
250287
<a href="http://www.w3.org/TR/2001/WD-css3-text-20010517/#layout-grid-line-prop">CSS3 module: text WD 20010517</a>.</p>
251-
<p class="issue">Grid origin should be defined by the element that has this property,
252-
similar to ''position: static''.
253-
In that case, should this property inherit, or not inherit the property but inherit grid?</p>
254-
255288

256289
<h2>Using Grids</h2>
257290

@@ -450,23 +483,37 @@ <h3 id="grid-length-unit">The ''<span class="index" title="length unit::gd">gd</
450483
<!-- --></code></pre>
451484
</div>
452485

453-
<h3 id="round-length">Rounding Down Lengths to Multiple of Units:
454-
''<span class="index" title="length unit::*gd">*gd</span>''
455-
and ''<span class="index" title="length unit::*em">*em</span>''</h3>
486+
<h3 id="round-length">Rounding Lengths to Multiple of Units:
487+
''<span class="index" title="length unit::rounddown()">rounddown()</span>''
488+
and ''<span class="index" title="length unit::rounddown()">roundup()</span>''
489+
</h3>
456490

457491
<p>The 'width' and 'height' properties
458-
accept ''*gd'' and ''*em'' values.
459-
These values compute to ''auto'',
492+
accept ''rounddown(<em>length</em>)''
493+
and ''roundup(<em>length</em>)'' values.</p>
494+
495+
<p>The ''rounddown(<em>length</em>)'' computes to ''auto'',
460496
and then the result will be rounded down to
461497
the largest multiple of the specified unit
462498
that is equal to or less than the original computed value.</p>
463499

500+
<p>Similarly, the ''roundup(<em>length</em>)'' computes to ''auto'',
501+
and then the result will be rounded up to
502+
the smallest multiple of the specified unit
503+
that is equal to or greater than the original computed value.</p>
504+
464505
<p>The fraction is distributed evenly to the computed values of margins on each side.
465506
If it is used for 'height',
466507
half the fraction is added to the top and the bottom margins.
467508
If for 'width', to the left and the right margins.</p>
468509

510+
<p>When the element is a float,
511+
the fraction is added to the opposite side of the float direction instead.
512+
For example, if the 'float' property is ''left'',
513+
the fraction is added to the right margins.</p>
514+
469515
<p class="issue">Should this be a property instead?</p>
516+
<p class="issue">Is this design appropriate to solve text with floats case?</p>
470517
<p class="issue">Should have an option to left/right align instead of center?
471518
Can author align running head and page numbers with body with this design?</p>
472519
<p class="issue">Use cases for non-East Asian layouts?</p>

0 commit comments

Comments
 (0)