Skip to content

Commit e787674

Browse files
kojiishikojiishi
committed
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/>
1 parent b53be41 commit e787674

2 files changed

Lines changed: 129 additions & 18 deletions

File tree

‎css-line-grid/Overview.html‎

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

1313
<style type="text/css">
14+
.sidenote-block {
15+
border: 1px solid gray;
16+
margin: auto;
17+
text-align: left;
18+
padding: 4pt;
19+
position: relative;
20+
max-width: 400pt;
21+
}
22+
.sidenote-body {
23+
margin-left: 120pt;
24+
font-size: 12pt;
25+
line-height: 18pt;
26+
}
27+
.sidenote-note {
28+
font-size: 10pt;
29+
line-height: 18pt;
30+
position: absolute; left: 4pt; top: 4pt;
31+
width: 100pt;
32+
}
1433
</style>
1534

1635
<body>
@@ -20,13 +39,13 @@
2039

2140
<h1>CSS Line Grid Module</h1>
2241

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

2544
<dl>
2645
<dt>This version:
2746

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> <!--
47+
<dd><a href="http://www.w3.org/TR/2011/ED-unknown-shortname-20110429">
48+
http://www.w3.org/TR/2011/ED-unknown-shortname-20110429</a> <!--
3049
<dt>Latest version:
3150
<dd><a href="http://www.w3.org/TR/css-line-grid">
3251
http://www.w3.org/TR/css-line-grid</a>
@@ -197,15 +216,20 @@ <h3 id=context><span class=secno>1.1. </span>Background</h3>
197216
<p>This specification provides features to align lines and blocks to
198217
invisible grids in the document.
199218

200-
<p>Alinging lines and blocks to grids gives the following benefits:
219+
<p>Aligning lines and blocks to grids gives the following benefits:
201220

202221
<ul>
203222
<li>Keep vertical rhythm for better readability.
204223

205224
<li>Align lines between columns in multi-column documents.
206225

207226
<li>Make the top and the bottom margins of pictures equal, while keeping
208-
the vertical rhythm of text before and after the pictures.
227+
the vertical rhythm of text before and after the pictures.</li>
228+
<!--
229+
<li>Aligning to grids can sometimes be turned off for objects like tables,
230+
but then turned back on for the following text
231+
to the same grids as the one for the text before the objects.</li>
232+
-->
209233

210234
<li>Layout lines at the same position in every page in paged media.
211235
Keeping the position of the bottom line of a page has benefits for design
@@ -235,14 +259,29 @@ <h3 id=context><span class=secno>1.1. </span>Background</h3>
235259
of text in a multi-column document.</p>
236260
</div>
237261

262+
<div class=figure>
263+
<div class=sidenote-block>
264+
<div class=sidenote-body> Sidenotes (and footnotes for that matter) are
265+
often set at a smaller size to the basic text. This smaller text should
266+
still line up with basic text. Authors can achieve this effect by
267+
calculating appropriate font-size, line-height, and margins*.</div>
268+
269+
<div class=sidenote-note> This module makes it much easier and more
270+
robust.</div>
271+
</div>
272+
273+
<p class=caption>Sidenotes set at a smaller size, but still line up with
274+
basic text.</p>
275+
</div>
276+
238277
<p>This module defines following capabilities:
239278

240279
<ul>
241280
<li>Defines grids in the line progression direction.
242281

243282
<li>Controls how lines and blocks align to the grids.
244283

245-
<li>Rounds lengths down to mulitple of units.
284+
<li>Rounds lengths down to multiple of units.
246285
</ul>
247286

248287
<p>It is important to control these capabilities independently, so that
@@ -359,9 +398,9 @@ <h3 id=layout-grid-line-prop><span class=secno>2.1. </span>Define Line
359398
module: text WD 20010517</a>.
360399

361400
<p class=issue>Grid origin should be defined by the element that has this
362-
property, similar to &lsquo;<code class=css>display: static</code>&rsquo;.
363-
In that case, should this property inherit, or not inherit the property
364-
but inherit grid?
401+
property, similar to &lsquo;<code class=css>position:
402+
static</code>&rsquo;. In that case, should this property inherit, or not
403+
inherit the property but inherit grid?
365404

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

@@ -529,18 +568,33 @@ <h3 id=grid-length-unit><span class=secno>3.3. </span>The &lsquo;<code
529568

530569
<p class=issue>Just copied from old WD, need to refresh
531570

532-
<p class=issue>Use cases for non-East Asian layouts?
571+
<div class=example id=vert-rhythm-p-margin>
572+
<p>The most common addition of vertical space is that inserted between
573+
paragraphs. If the rhythm of the page is to be maintained, the spacing of
574+
paragraphs should be related to the basic leading. This is achieved by
575+
setting top- and bottom-margins equal to &lsquo;<code
576+
class=css>1gd</code>&rsquo;.
577+
578+
<pre><code class=css>
579+
<!-- -->p {
580+
<!-- --> layout-grid-line: 1.5;
581+
<!-- --> layout-grid-mode: baseline;
582+
<!-- --> margin-top: 1gd;
583+
<!-- --> margin-bottom: 1gd;
584+
<!-- -->}
585+
<!-- --></code></pre>
586+
</div>
533587

534588
<div class=example id=gyou-dori>
535-
<p>East Asian layout often requires heights specified by multiple of the
589+
<p>East Asian layout often requires heights specified by the count of the
536590
line grids. In Japanese, this method is called Gyou-dori. Refer to <a
537591
href="#JLREQ" rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a> for more
538592
details of Gyou-dori.</p>
539593

540594
<pre><code class=css>
541595
<!-- -->h1 {
542596
<!-- --> line-grid-mode: block;
543-
<!-- --> min-height: 3gd;
597+
<!-- --> min-height: 3gd; /* 3 Gyou-dori */
544598
<!-- -->}
545599
<!-- --></code></pre>
546600
</div>

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

Lines changed: 63 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,25 @@
88
<link rel="stylesheet" type="text/css"
99
href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
1010
<style type="text/css">
11+
.sidenote-block {
12+
border: 1px solid gray;
13+
margin: auto;
14+
text-align: left;
15+
padding: 4pt;
16+
position: relative;
17+
max-width: 400pt;
18+
}
19+
.sidenote-body {
20+
margin-left: 120pt;
21+
font-size: 12pt;
22+
line-height: 18pt;
23+
}
24+
.sidenote-note {
25+
font-size: 10pt;
26+
line-height: 18pt;
27+
position: absolute; left: 4pt; top: 4pt;
28+
width: 100pt;
29+
}
1130
</style>
1231
</head>
1332

@@ -71,13 +90,18 @@ <h3 id="context">Background</h3>
7190
<p>This specification provides features to align lines and blocks
7291
to invisible grids in the document.</p>
7392

74-
<p>Alinging lines and blocks to grids gives the following benefits:</p>
93+
<p>Aligning lines and blocks to grids gives the following benefits:</p>
7594

7695
<ul>
7796
<li>Keep vertical rhythm for better readability.</li>
7897
<li>Align lines between columns in multi-column documents.</li>
7998
<li>Make the top and the bottom margins of pictures equal,
8099
while keeping the vertical rhythm of text before and after the pictures.</li>
100+
<!--
101+
<li>Aligning to grids can sometimes be turned off for objects like tables,
102+
but then turned back on for the following text
103+
to the same grids as the one for the text before the objects.</li>
104+
-->
81105
<li>Layout lines at the same position in every page in paged media.
82106
Keeping the position of the bottom line of a page has benefits for
83107
design and readability.
@@ -108,11 +132,28 @@ <h3 id="context">Background</h3>
108132
<p class="caption">Keep vertical rhythm through pictures and different size of text in a multi-column document.</p>
109133
</div>
110134

135+
<div class="figure">
136+
<div class="sidenote-block">
137+
<div class="sidenote-body">
138+
Sidenotes (and footnotes for that matter) are often set
139+
at a smaller size to the basic text.
140+
This smaller text should still line up with basic text.
141+
Authors can achieve this effect
142+
by calculating appropriate font-size, line-height,
143+
and margins*.
144+
</div>
145+
<div class="sidenote-note">
146+
This module makes it much easier and more robust.
147+
</div>
148+
</div>
149+
<p class="caption">Sidenotes set at a smaller size, but still line up with basic text.</p>
150+
</div>
151+
111152
<p>This module defines following capabilities:</p>
112153
<ul>
113154
<li>Defines grids in the line progression direction.</li>
114155
<li>Controls how lines and blocks align to the grids.</li>
115-
<li>Rounds lengths down to mulitple of units.</li>
156+
<li>Rounds lengths down to multiple of units.</li>
116157
</ul>
117158

118159
<p>It is important to control these capabilities independently,
@@ -207,7 +248,7 @@ <h3 id="layout-grid-line-prop">Define Line Grids: the 'layout-grid-line' propert
207248
I expect this to be very similar to the one in
208249
<a href="http://www.w3.org/TR/2001/WD-css3-text-20010517/#layout-grid-line-prop">CSS3 module: text WD 20010517</a>.</p>
209250
<p class="issue">Grid origin should be defined by the element that has this property,
210-
similar to ''display: static''.
251+
similar to ''position: static''.
211252
In that case, should this property inherit, or not inherit the property but inherit grid?</p>
212253

213254

@@ -355,16 +396,32 @@ <h3 id="grid-length-unit">The ''<span class="index" title="length unit::gd">gd</
355396
<p>If no grid is specified, the gd unit should be treated the same as the em unit.</p>
356397

357398
<p class="issue">Just copied from old WD, need to refresh</p>
358-
<p class="issue">Use cases for non-East Asian layouts?</p>
399+
400+
<div id="vert-rhythm-p-margin" class="example">
401+
<p>The most common addition of vertical space
402+
is that inserted between paragraphs.
403+
If the rhythm of the page is to be maintained,
404+
the spacing of paragraphs should be related to the basic leading.
405+
This is achieved by setting top- and bottom-margins equal to ''1gd''.
406+
<pre><code class="css">
407+
<!-- -->p {
408+
<!-- --> layout-grid-line: 1.5;
409+
<!-- --> layout-grid-mode: baseline;
410+
<!-- --> margin-top: 1gd;
411+
<!-- --> margin-bottom: 1gd;
412+
<!-- -->}
413+
<!-- --></code></pre>
414+
</div>
359415

360416
<div id="gyou-dori" class="example">
361-
<p>East Asian layout often requires heights specified by multiple of the line grids.
417+
<p>East Asian layout often requires heights specified
418+
by the count of the line grids.
362419
In Japanese, this method is called Gyou-dori.
363420
Refer to [[JLREQ]] for more details of Gyou-dori.</p>
364421
<pre><code class="css">
365422
<!-- -->h1 {
366423
<!-- --> line-grid-mode: block;
367-
<!-- --> min-height: 3gd;
424+
<!-- --> min-height: 3gd; /* 3 Gyou-dori */
368425
<!-- -->}
369426
<!-- --></code></pre>
370427
</div>

0 commit comments

Comments
 (0)