- From: Ishii Koji via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 29 Apr 2011 05:37:40 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css-line-grid
In directory hutz:/tmp/cvs-serv17221
Modified Files:
Overview.html Overview.src.html
Log Message:
Added roman use cases and sidenotes examples from "The Elements of Typographic Style Applied to the Web" <http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/>
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css-line-grid/Overview.html,v
retrieving revision 1.4
retrieving revision 1.5
diff -u -d -r1.4 -r1.5
--- Overview.html 28 Apr 2011 06:41:57 -0000 1.4
+++ Overview.html 29 Apr 2011 05:37:38 -0000 1.5
@@ -11,6 +11,25 @@
type="text/css">
<style type="text/css">
+ .sidenote-block {
+ border: 1px solid gray;
+ margin: auto;
+ text-align: left;
+ padding: 4pt;
+ position: relative;
+ max-width: 400pt;
+ }
+ .sidenote-body {
+ margin-left: 120pt;
+ font-size: 12pt;
+ line-height: 18pt;
+ }
+ .sidenote-note {
+ font-size: 10pt;
+ line-height: 18pt;
+ position: absolute; left: 4pt; top: 4pt;
+ width: 100pt;
+ }
</style>
<body>
@@ -20,13 +39,13 @@
<h1>CSS Line Grid Module</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 28 April 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 29 April 2011</h2>
<dl>
<dt>This version:
- <dd><a href="http://www.w3.org/TR/2011/ED-unknown-shortname-20110428">
- http://www.w3.org/TR/2011/ED-unknown-shortname-20110428</a> <!--
+ <dd><a href="http://www.w3.org/TR/2011/ED-unknown-shortname-20110429">
+ http://www.w3.org/TR/2011/ED-unknown-shortname-20110429</a> <!--
<dt>Latest version:
<dd><a href="http://www.w3.org/TR/css-line-grid">
http://www.w3.org/TR/css-line-grid</a>
@@ -197,7 +216,7 @@
<p>This specification provides features to align lines and blocks to
invisible grids in the document.
- <p>Alinging lines and blocks to grids gives the following benefits:
+ <p>Aligning lines and blocks to grids gives the following benefits:
<ul>
<li>Keep vertical rhythm for better readability.
@@ -205,7 +224,12 @@
<li>Align lines between columns in multi-column documents.
<li>Make the top and the bottom margins of pictures equal, while keeping
- the vertical rhythm of text before and after the pictures.
+ the vertical rhythm of text before and after the pictures.</li>
+ <!--
+ <li>Aligning to grids can sometimes be turned off for objects like tables,
+ but then turned back on for the following text
+ to the same grids as the one for the text before the objects.</li>
+ -->
<li>Layout lines at the same position in every page in paged media.
Keeping the position of the bottom line of a page has benefits for design
@@ -235,6 +259,21 @@
of text in a multi-column document.</p>
</div>
+ <div class=figure>
+ <div class=sidenote-block>
+ <div class=sidenote-body> Sidenotes (and footnotes for that matter) are
+ often set at a smaller size to the basic text. This smaller text should
+ still line up with basic text. Authors can achieve this effect by
+ calculating appropriate font-size, line-height, and margins*.</div>
+
+ <div class=sidenote-note> This module makes it much easier and more
+ robust.</div>
+ </div>
+
+ <p class=caption>Sidenotes set at a smaller size, but still line up with
+ basic text.</p>
+ </div>
+
<p>This module defines following capabilities:
<ul>
@@ -242,7 +281,7 @@
<li>Controls how lines and blocks align to the grids.
- <li>Rounds lengths down to mulitple of units.
+ <li>Rounds lengths down to multiple of units.
</ul>
<p>It is important to control these capabilities independently, so that
@@ -359,9 +398,9 @@
module: text WD 20010517</a>.
<p class=issue>Grid origin should be defined by the element that has this
- property, similar to ‘<code class=css>display: static</code>’.
- In that case, should this property inherit, or not inherit the property
- but inherit grid?
+ property, similar to ‘<code class=css>position:
+ static</code>’. In that case, should this property inherit, or not
+ inherit the property but inherit grid?
<h2 id=using-grids><span class=secno>3. </span>Using Grids</h2>
@@ -529,10 +568,25 @@
<p class=issue>Just copied from old WD, need to refresh
- <p class=issue>Use cases for non-East Asian layouts?
+ <div class=example id=vert-rhythm-p-margin>
+ <p>The most common addition of vertical space is that inserted between
+ paragraphs. If the rhythm of the page is to be maintained, the spacing of
+ paragraphs should be related to the basic leading. This is achieved by
+ setting top- and bottom-margins equal to ‘<code
+ class=css>1gd</code>’.
+
+ <pre><code class=css>
+<!-- -->p {
+<!-- --> layout-grid-line: 1.5;
+<!-- --> layout-grid-mode: baseline;
+<!-- --> margin-top: 1gd;
+<!-- --> margin-bottom: 1gd;
+<!-- -->}
+<!-- --></code></pre>
+ </div>
<div class=example id=gyou-dori>
- <p>East Asian layout often requires heights specified by multiple of the
+ <p>East Asian layout often requires heights specified by the count of the
line grids. In Japanese, this method is called Gyou-dori. Refer to <a
href="#JLREQ" rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a> for more
details of Gyou-dori.</p>
@@ -540,7 +594,7 @@
<pre><code class=css>
<!-- -->h1 {
<!-- --> line-grid-mode: block;
-<!-- --> min-height: 3gd;
+<!-- --> min-height: 3gd; /* 3 Gyou-dori */
<!-- -->}
<!-- --></code></pre>
</div>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css-line-grid/Overview.src.html,v
retrieving revision 1.4
retrieving revision 1.5
diff -u -d -r1.4 -r1.5
--- Overview.src.html 28 Apr 2011 06:41:57 -0000 1.4
+++ Overview.src.html 29 Apr 2011 05:37:38 -0000 1.5
@@ -8,6 +8,25 @@
<link rel="stylesheet" type="text/css"
href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
<style type="text/css">
+ .sidenote-block {
+ border: 1px solid gray;
+ margin: auto;
+ text-align: left;
+ padding: 4pt;
+ position: relative;
+ max-width: 400pt;
+ }
+ .sidenote-body {
+ margin-left: 120pt;
+ font-size: 12pt;
+ line-height: 18pt;
+ }
+ .sidenote-note {
+ font-size: 10pt;
+ line-height: 18pt;
+ position: absolute; left: 4pt; top: 4pt;
+ width: 100pt;
+ }
</style>
</head>
@@ -71,13 +90,18 @@
<p>This specification provides features to align lines and blocks
to invisible grids in the document.</p>
- <p>Alinging lines and blocks to grids gives the following benefits:</p>
+ <p>Aligning lines and blocks to grids gives the following benefits:</p>
<ul>
<li>Keep vertical rhythm for better readability.</li>
<li>Align lines between columns in multi-column documents.</li>
<li>Make the top and the bottom margins of pictures equal,
while keeping the vertical rhythm of text before and after the pictures.</li>
+ <!--
+ <li>Aligning to grids can sometimes be turned off for objects like tables,
+ but then turned back on for the following text
+ to the same grids as the one for the text before the objects.</li>
+ -->
<li>Layout lines at the same position in every page in paged media.
Keeping the position of the bottom line of a page has benefits for
design and readability.
@@ -108,11 +132,28 @@
<p class="caption">Keep vertical rhythm through pictures and different size of text in a multi-column document.</p>
</div>
+ <div class="figure">
+ <div class="sidenote-block">
+ <div class="sidenote-body">
+ Sidenotes (and footnotes for that matter) are often set
+ at a smaller size to the basic text.
+ This smaller text should still line up with basic text.
+ Authors can achieve this effect
+ by calculating appropriate font-size, line-height,
+ and margins*.
+ </div>
+ <div class="sidenote-note">
+ This module makes it much easier and more robust.
+ </div>
+ </div>
+ <p class="caption">Sidenotes set at a smaller size, but still line up with basic text.</p>
+ </div>
+
<p>This module defines following capabilities:</p>
<ul>
<li>Defines grids in the line progression direction.</li>
<li>Controls how lines and blocks align to the grids.</li>
- <li>Rounds lengths down to mulitple of units.</li>
+ <li>Rounds lengths down to multiple of units.</li>
</ul>
<p>It is important to control these capabilities independently,
@@ -207,7 +248,7 @@
I expect this to be very similar to the one in
<a href="http://www.w3.org/TR/2001/WD-css3-text-20010517/#layout-grid-line-prop">CSS3 module: text WD 20010517</a>.</p>
<p class="issue">Grid origin should be defined by the element that has this property,
- similar to ''display: static''.
+ similar to ''position: static''.
In that case, should this property inherit, or not inherit the property but inherit grid?</p>
@@ -355,16 +396,32 @@
<p>If no grid is specified, the gd unit should be treated the same as the em unit.</p>
<p class="issue">Just copied from old WD, need to refresh</p>
- <p class="issue">Use cases for non-East Asian layouts?</p>
+
+ <div id="vert-rhythm-p-margin" class="example">
+ <p>The most common addition of vertical space
+ is that inserted between paragraphs.
+ If the rhythm of the page is to be maintained,
+ the spacing of paragraphs should be related to the basic leading.
+ This is achieved by setting top- and bottom-margins equal to ''1gd''.
+ <pre><code class="css">
+<!-- -->p {
+<!-- --> layout-grid-line: 1.5;
+<!-- --> layout-grid-mode: baseline;
+<!-- --> margin-top: 1gd;
+<!-- --> margin-bottom: 1gd;
+<!-- -->}
+<!-- --></code></pre>
+ </div>
<div id="gyou-dori" class="example">
- <p>East Asian layout often requires heights specified by multiple of the line grids.
+ <p>East Asian layout often requires heights specified
+ by the count of the line grids.
In Japanese, this method is called Gyou-dori.
Refer to [[JLREQ]] for more details of Gyou-dori.</p>
<pre><code class="css">
<!-- -->h1 {
<!-- --> line-grid-mode: block;
-<!-- --> min-height: 3gd;
+<!-- --> min-height: 3gd; /* 3 Gyou-dori */
<!-- -->}
<!-- --></code></pre>
</div>
Received on Friday, 29 April 2011 05:37:45 UTC