8000 [css-line-grid] fix intro images · smfr/csswg-drafts@6e69556 · GitHub
Skip to content

Commit 6e69556

Browse files
astearnsastearns
committed
[css-line-grid] fix intro images
1 parent 33a28b4 commit 6e69556

7 files changed

Lines changed: 91 additions & 18 deletions

File tree

‎css-line-grid/Overview.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
</p>
7777
<h1 class="p-name no-ref" id=title>CSS Line Grid Module Level 1</h1>
7878
<h2 class="no-num no-toc no-ref heading settled" id=subtitle><span class=content>Editor’s Draft,
79-
<span class=dt-updated><span class=value-title title=20140904>4 September 2014</span></span></span></h2>
79+
<span class=dt-updated><span class=value-title title=20140907>7 September 2014</span></span></span></h2>
8080
<div data-fill-with=spec-metadata><dl>
8181
<dt>This version:
8282
<dd><a class=u-url href=http://dev.w3.org/csswg/css-line-grid/>http://dev.w3.org/csswg/css-line-grid/</a>
@@ -87,9 +87,9 @@ <h2 class="no-num no-toc no-ref heading settled" id=subtitle><span class=content
8787
with subject line
8888
“<kbd>[css-line-grid] <var>… message topic …</var></kbd>”(<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)
8989
<dt>Editors:
90-
<dd><dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://fantasai.inkedblade.net/contact>Elika Etemad</a> (<span class="p-org org">Invited Expert</span>)
91-
<dd><dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:kojiishi@gluesoft.co.jp>Koji Ishii</a> (<span class="p-org org">Invited Expert</span>)
92-
<dd><dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:stearns@adobe.com>Alan Stearns</a> (<span class="p-org org">Adobe Systems, Inc.</span>)
90+
<dd><div class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://fantasai.inkedblade.net/contact>Elika Etemad</a> (<span class="p-org org">Invited Expert</span>)</div>
91+
<dd><div class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:kojiishi@gluesoft.co.jp>Koji Ishii</a> (<span class="p-org org">Invited Expert</span>)</div>
92+
<dd><div class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:stearns@adobe.com>Alan Stearns</a> (<span class="p-org org">Adobe Systems, Inc.</span>)</div>
9393
</dl>
9494
</div>
9595
<div data-fill-with=warning></div>
@@ -197,7 +197,7 @@ <h3 class="heading settled" data-level=1.1 id=context><span class=secno>1.1 </sp
197197
<li>East Asian layouts require vertical rhythm
198198
more often than other scripts do,
199199
even in single column, non-paged media documents,
200-
as defined in <a data-biblio-type=informative data-link-type=biblio href=#biblio-jlreq title=biblio-JLREQ>[JLREQ]</a>.</li>
200+
as defined in <a data-biblio-type=informative data-link-type=biblio href=#jlreq title=biblio-JLREQ>[JLREQ]</a>.</li>
201201
</ul>
202202

203203
<p>There are several types of objects in a document
@@ -206,13 +206,13 @@ <h3 class="heading settled" data-level=1.1 id=context><span class=secno>1.1 </sp
206206
pictures, and tables.</p>
207207

208208
<div class=figure>
209-
<img alt="Vertical rhythm kept through pictures and different size of text in a multi-column document" height=246 src=line-grid-multicol.png width=480>
209+
<img alt="Vertical rhythm kept through pictures and different size of text in a multi-column document" src=images/line-grid-multicol.png width=480>
210210
<p class=caption>Vertical rhythm kept through pictures and different size of text in a multi-column document.</p>
211211
</div>
212212

213213
<div class=example>
214214
<div class=sidefigure>
215-
<img alt="Large text wraps within line grids" height=244 src=line-grid-wrap.png width=276>
215+
<img alt="Large text wraps within line grids" src=images/line-grid-wrap.png width=276>
216216
<p class=caption>Large text wraps within line grids.</p>
217217
</div>
218218

@@ -286,7 +286,7 @@ <h3 class="heading settled" data-level=1.2 id=placement><span class=secno>1.2 </
286286
Module Interactions</span><a class=self-link href=#placement></a></h3>
287287

288288
<p>This module extends the line box model
289-
defined in <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a> sections 9.4.2 and 10.8.</p>
289+
defined in <a data-biblio-type=normative data-link-type=biblio href=#css21 title=biblio-CSS21>[CSS21]</a> sections 9.4.2 and 10.8.</p>
290290

291291
<h3 class="heading settled" data-level=1.3 id=values><span class=secno>1.3 </span><span class=content>
292292
Values</span><a class=self-link href=#values></a></h3>
@@ -295,12 +295,12 @@ <h3 class="heading settled" data-level=1.3 id=values><span class=secno>1.3 </spa
295295
<a href=http://www.w3.org/TR/CSS21/about.html#property-defs>
296296
CSS property definition conventions
297297
</a>
298-
from <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a>.
298+
from <a data-biblio-type=normative data-link-type=biblio href=#css21 title=biblio-CSS21>[CSS21]</a>.
299299
Value types not defined in this specification
300-
are defined in CSS Level 2 Revision 1 <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a>.
300+
are defined in CSS Level 2 Revision 1 <a data-biblio-type=normative data-link-type=biblio href=#css21 title=biblio-CSS21>[CSS21]</a>.
301301
Other CSS modules may expand
302302
the definitions of these value types:
303-
for example <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3color title=biblio-CSS3COLOR>[CSS3COLOR]</a>,
303+
for example <a data-biblio-type=informative data-link-type=biblio href=#css3color title=biblio-CSS3COLOR>[CSS3COLOR]</a>,
304304
when combined with this module,
305305
expands the definition
306306
of the &lt;color&gt; value type
@@ -391,7 +391,7 @@ <h3 class="heading settled" data-level=3.1 id=line-snap><span class=secno>3.1 </
391391
(The unshifted position is the position that
392392
would be determined by normal line stacking rules,
393393
with consideration of any new controls
394-
defined by other modules such as <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3line title=biblio-CSS3LINE>[CSS3LINE]</a>.)
394+
defined by other modules such as <a data-biblio-type=informative data-link-type=biblio href=#css3line title=biblio-CSS3LINE>[CSS3LINE]</a>.)
395395
Shifting line boxes in this way affects layout –
396396
it is not merely a display translation.
397397
If a line box is shifted downward,
@@ -645,7 +645,7 @@ <h3 class="heading settled" data-level=3.2 id=box-snap><span class=secno>3.2 </s
645645
the effective margin is increased at that edge.
646646
If, however, the box is an empty block that could be
647647
<a href=http://www.w3.org/TR/CSS21/box.html>collapsed through</a>,
648-
then this property has no effect. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a></p>
648+
then this property has no effect. <a data-biblio-type=normative data-link-type=biblio href=#css21 title=biblio-CSS21>[CSS21]</a></p>
649649

650650

651651
<p>When applied to table row group and table row boxes,
@@ -695,7 +695,7 @@ <h3 class="no-ref heading settled" id=conventions><span class=content>
695695
letters in this specification.
696696

697697
<p>All of the text of this specification is normative except sections
698-
explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#biblio-rfc2119 title=biblio-RFC2119>[RFC2119]</a></p>
698+
explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#rfc2119 title=biblio-RFC2119>[RFC2119]</a></p>
699699

700700
<p>Examples in this specification are introduced with the words "for example"
701701
or are set apart from the normative text with <code>class="example"</code>,

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,17 +78,17 @@ <h3 id='context'>
7878
pictures, and tables.
7979

8080
<div class="figure">
81-
<img src="line-grid-multicol.png"
82-
width="480" height="246"
81+
<img src="images/line-grid-multicol.png"
82+
width="480"
8383
alt="Vertical rhythm kept through pictures and different size of text in a multi-column document"
8484
/>
8585
<p class="caption">Vertical rhythm kept through pictures and different size of text in a multi-column document.</p>
8686
</div>
8787

8888
<div class="example">
8989
<div class="sidefigure">
90-
<img src="line-grid-wrap.png"
91-
width="276" height="244"
90+
<img src="images/line-grid-wrap.png"
91+
width="276"
9292
alt="Large text wraps within line grids"
9393
/>
9494
<p class="caption">Large text wraps within line grids.</p>

‎css-line-grid/examples/line-grid-intro.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<title>Baseline Grid intro examples</title>
5+
<style>
6+
* { margin: 0px;}
7+
.container {
8+
margin: 15px;
9+
overflow: hidden;
10+
background: repeating-linear-gradient(to bottom, white 0px, white 29px, black 30px);
11+
background-size: 30px 30px; /* fixes too-light lines for some reason */
12+
}
13+
14+
.single {
15+
padding-top: 40px;
16+
width: 275px;
17+
height: 250px;
18+
}
19+
20+
.multi {
21+
padding-top: 40px;
22+
width: 550px;
23+
height: 225px;
24+
-moz-columns: 2;
25+
-moz-column-gap: 40px;
26+
columns: 2;
27+
}
28+
29+
h2 {
30+
font-family: sans-serif;
31+
font-size: 30px;
32+
margin-top: 14px;
33+
margin-bottom: 15px;
34+
}
35+
36+
p {
37+
font-size: 20px;
38+
line-height: 30px;
39+
text-align: justify;
40+
}
41+
.box {
42+
width 250px;
43+
height: 60px;
44+
background-color: rgba(57, 139, 183, 1);
45+
border: 4px solid rgba(67, 91, 141, 1);
46+
border-radius: 2px;
47+
margin: 8px;
48+
margin-bottom: 14px;
49+
}
50+
.single-line {
51+
margin-top: 15px;
52+
}
53+
54+
</style>
55+
</head>
56+
<body>
57+
58+
<div class="container single">
59+
<p>lazy dog. A quick brown fox jumps over the lazy dog.</p>
60+
<h2>Wrapping Large Text</h2>
61+
<p>A quick brown fox jumps over the lazy dog. A quick brown fox</p>
62+
</div>
63+
64+
<div class="container multi">
65+
<p>A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog.</p>
66+
<div class="box"></div>
67+
<p>A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog.</p>
68+
<h2 class="single-line">Heading</h2>
69+
<p>A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog.</p>
70+
</div>
71+
72+
</body>
73+
</html>

‎css-line-grid/images/line-grid-multicol.png‎

99.1 KB
Loading

‎css-line-grid/images/line-grid-wrap.png‎

59.2 KB
Loading

‎css-line-grid/line-grid-multicol.png‎

-9.41 KB
Binary file not shown.

‎css-line-grid/line-grid-wrap.png‎

-7.32 KB
Binary file not shown.

0 commit comments

Comments
 (0)