W3C home > Mailing lists > Public > public-css-commits@w3.org > April 2011

csswg/css-line-grid Overview.html,1.4,1.5 Overview.src.html,1.4,1.5

From: Ishii Koji via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 29 Apr 2011 05:37:40 +0000
To: public-css-commits@w3.org
Message-Id: <E1QFgOa-0004U8-RV@lionel-hutz.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 &lsquo;<code class=css>display: static</code>&rsquo;.
-   In that case, should this property inherit, or not inherit the property
-   but inherit grid?
+   property, similar to &lsquo;<code class=css>position:
+   static</code>&rsquo;. 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 &lsquo;<code
+    class=css>1gd</code>&rsquo;.
+
+   <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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 29 April 2011 05:37:46 GMT