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 ‘< code class =css > gd</ code > ’ length unit</ a >
173173
174- < li > < a href ="#round-length "> < span class =secno > 3.4. </ span > Rounding Down
175- Lengths to Multiple of Units: ‘< code class =css > *gd</ code > ’
176- and ‘< code class =css > *em</ code > ’</ a >
174+ < li > < a href ="#round-length "> < span class =secno > 3.4. </ span > Rounding
175+ Lengths to Multiple of Units: ‘< code
176+ class =css > rounddown()</ code > ’ and ‘< code
177+ class =css > roundup()</ code > ’ </ 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 "> ‘< code
411+ class =css > none</ code > ’</ dfn >
412+
413+ < dd > No line grid is specified.
414+
415+ < dt > < dfn id =auto title ="layout-grid-line::auto "> ‘< code
416+ class =css > auto</ code > ’</ dfn >
417+
418+ < dd > The grid line size is determined by the computed value of the
419+ ‘< code class =property > line-height</ code > ’ property.
420+
421+ < dt > < dfn id =ltlengthgt
422+ title ="layout-grid-line::length "> <length></ 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 "> <percent></ 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 ‘< code class =css > auto</ code > ’. < 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 ‘< code
441+ class =property > writing-mode</ code > ’ is ‘< code
442+ class =css > vertical-rl</ code > ’, and the left of the element for
443+ ‘< code class =css > vertical-lr</ code > ’.
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 ‘< code class =css > position:
400- static</ code > ’. 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 "> ‘< code
502+ < dt > < dfn id =none0 title ="layout-grid-mode::none "> ‘< code
457503 class =css > none</ code > ’</ 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 ‘<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: ‘< code class =css > < span class =index id =gd0
627- title ="length unit::*gd " > *gd </ span > </ code > ’ and ‘ < code
628- class =css > < span class =index id =em title ="length
629- unit::*em " > *em </ span > </ code > ’</ h3 >
671+ < h3 id =round-length > < span class =secno > 3.4. </ span > Rounding Lengths to
672+ Multiple of Units: ‘< code class =css > < span class =index id =rounddown
673+ title ="length unit::rounddown() " > rounddown() </ span > </ code > ’ and
674+ ‘ < code class =css > < span class =index id =roundup title ="length
675+ unit::rounddown() " > roundup() </ span > </ code > ’</ h3 >
630676
631677 < p > The ‘< code class =property > width</ code > ’ and ‘< code
632678 class =property > height</ code > ’ properties accept ‘< code
633- class =css > *gd</ code > ’ and ‘< code class =css > *em</ code > ’
634- values. These values compute to ‘< code class =css > auto</ code > ’,
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 > ’ and ‘< code
680+ class =css > roundup(< em > length</ em > )</ code > ’ values.
681+
682+ < p > The ‘< code class =css > rounddown(< em > length</ em > )</ code > ’
683+ computes to ‘< code class =css > auto</ code > ’, 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 ‘< code
688+ class =css > roundup(< em > length</ em > )</ code > ’ computes to ‘< code
689+ class =css > auto</ code > ’, 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 ‘< code
640695 class =property > height</ code > ’, half the fraction is added to the top
641696 and the bottom margins. If for ‘< code
642697 class =property > width</ code > ’, 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 ‘< code
701+ class =property > float</ code > ’ property is ‘< code
702+ class =css > left</ code > ’, 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.
1DDA
</ 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 c
EDE6
lass=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 >
0 commit comments