8000 [css-line-grid] line snapping example edits · w3c/csswg-drafts@37b699f · GitHub
Skip to content

Commit 37b699f

Browse files
astearnsastearns
committed
[css-line-grid] line snapping example edits
1 parent 98b8426 commit 37b699f

5 files changed

Lines changed: 213 additions & 38 deletions

File tree

‎css-line-grid/Overview.html‎

Lines changed: 46 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
rel=dcterms.rights>
1313
<meta content="CSS Line Grid Module Level 1" name=dcterms.title>
1414
<meta content=text name=dcterms.type>
15-
<meta content=2014-07-18 name=dcterms.date>
15+
<meta content=2014-07-21 name=dcterms.date>
1616
<meta content="Elika Etemad" name=dcterms.creator>
1717
<meta content="Koji Ishii" name=dcterms.creator>
1818
<meta content="Alan Stearns" name=dcterms.creator>
@@ -51,13 +51,13 @@
5151

5252
<h1>CSS Line Grid Module Level 1</h1>
5353

54-
<h2 class="no-num no-toc">Editor's Draft 18 July 2014</h2>
54+
<h2 class="no-num no-toc">Editor's Draft 21 July 2014</h2>
5555

5656
<dl>
5757
<dt>This version:
5858

5959
<dd><a href="http://dev.w3.org/csswg/css-line-grid-1/">
60-
http://www.w3.org/TR/2014/ED-css-line-grid-1-20140718/</a>
60+
http://www.w3.org/TR/2014/ED-css-line-grid-1-20140721/</a>
6161

6262
<dt>Latest version:
6363

@@ -542,38 +542,60 @@ <h3 id=line-snap><span class=secno>3.1. </span> Snapping Line Boxes: the
542542
next grid line.
543543

544544
<div class=example>
545-
<p>When a block is start-aligned, its line boxes will always shift
546-
downward when snapping to a line grid. Here and in the next two examples
547-
there are two lines (A and B) with line-snap:none and two or three lines
548-
(1, 2 and 3) with line-snap:baseline. Here lines 1, 2 and 3 shift down to
549-
snap their baselines to the line grid.
545+
<p>Line boxes almost always shift downward (towards the block-end
546+
direction) when snapping to a line grid. Here there are three lines with
547+
20px line-height and line-snap:baseline that should snap to a 30px line
548+
grid. Each line box shifts down so that the baselines align with the grid
549+
lines. <figure style="float:left;"> <img
550+
alt="line positions before snapping" src="images/simple-no-snap.png">
551+
<figcaption> Before line snapping </figcaption> </figure> <figure
552+
style="float:left;"> <img alt="line positions after snapping"
553+
src="images/simple-snapped.png"> <figcaption> After line snapping
554+
</figcaption> </figure>
555+
556+
<p style="clear:left;"> In the figures below, there are two additional
557+
lines from h3 elements with line-snap:none. These lines do not shift to
558+
align to the grid, but their positions can change based on the shifting
559+
of lines around them. In this example, lines 1 2 and 3 shift down to snap
560+
their baselines to the grid lines, and line B has normal line box
561+
placement just below the line above.
550562
<figure style="float:left;"> <img alt="line positions before snapping"
551-
src="images/top-no-snap.png"> <figcaption> Before snapping </figcaption>
552-
</figure> <figure style="float:left;"> <img
563+
src="images/top-no-snap.png"> <figcaption> Before line snapping
564+
</figcaption> </figure> <figure style="float:left;"> <img
553565
alt="line positions after snapping" src="images/top-snapped.png">
554566
<figcaption> After line snapping </figcaption> </figure></div>
555567

556568
<div class=example>
557-
<p>A center-aligned block's line boxes shift nearly the same as a
558-
start-aligned block's. All the lines except for the very first snapped
559-
line (line 1 in this example) shift exactly the same as a start-aligned
560-
block. Then the block is centered, and the shortest distance from the
561-
first snapped line's baseline to a grid line is measured.
562-
563-
<p> If the closest grid line is in the block-start direction, then the
564-
entire block is shifted up from the block-end edge to snap the first line
565-
to the grid when the block is centered again.
569+
<p> The block containing all of these lines might not be top-aligned
570+
within its container. In the figures below, the block containing the
571+
elements is centered. In a centered situation, you have to align
572+
baselines while maintaining centering.
573+
574+
<p> This can be done in two shift-and-center steps. First, shift the
575+
snapping lines as if there were no centering, then remove the shift for
576+
the very first snapping line and center the block. You can see the result
577+
in the partial shifting figure below. Note that the shift for lines 2 and
578+
3 are exactly the same as the full line snapping figure in the previous,
579+
top-aligned example.
580+
581+
<p> In the second step, measure the distance from the first snapped line's
582+
baseline to the grid lines above and below, looking for the closest grid
583+
line to that baseline. If the closest grid line is in the block-start
584+
direction, then add space below the last line equal to twice that
585+
distance. Then the block is centered again, which will align all of the
586+
snapped lines to the grid.
566587
<figure style="float:left;"> <img alt="line positions at step 1"
567-
src="images/first-center-part-snapped.png"> <figcaption> Partial snapping
588+
src="images/first-center-part-snapped.png"> <figcaption> Partial shifting
568589
</figcaption> </figure> <figure style="float:left;"> <img
569590
alt="line positions after full snapping"
570591
src="images/first-center-snapped.png"> <figcaption> Full line snapping
571592
</figcaption> </figure>
572-
<p style="clear:left;">If the closest grid line is in the block-end
573-
direction, then the first snapped line is shifted downward to snap the
574-
first line to the grid when the block is centered again.
593+
<p style="clear:left;"> If the closest grid line is in the block-end
594+
direction, then the first snapped line is shifted downward by twice that
595+
distance. Then the block is centered again, which will again align all of
596+
the snapped lines to the grid.
575597
<figure style="float:left;"> <img alt="line positions at step 1"
576-
src="images/second-center-part-snapped.png"> <figcaption> Partial snapping
598+
src="images/second-center-part-snapped.png"> <figcaption> Partial shifting
577599
</figcaption> </figure> <figure style="float:left;"> <img
578600
alt="line positions after full snapping"
579601
src="images/second-center-snapped.png"> <figcaption> Full line snapping

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

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -366,20 +366,29 @@ <h3 id=line-snap>
366366
jumping downward to the next grid line.
367367

368368
<div class="example">
369-
<p>When a block is start-aligned,
370-
its line boxes will always shift downward
371-
when snapping to a line grid.
372-
Here and in the next two examples
373-
there are two lines (A and B) with line-snap:none
374-
and two or three lines (1, 2 and 3) with line-snap:baseline.
375-
Here lines 1, 2 and 3 shift down
376-
to snap their baselines to the line grid.
369+
<p>Line boxes almost always shift downward (towards the block-end direction) when snapping to a line grid. Here there are three lines with 20px line-height and line-snap:baseline that should snap to a 30px line grid. Each line box shifts down so that the baselines align with the grid lines.
370+
<figure style="float:left;">
371+
<img src="images/simple-no-snap.png"
372+
alt="line positions before snapping"/>
373+
<figcaption>
374+
Before line snapping
375+
</figcaption>
376+
</figure>
377+
<figure style="float:left;">
378+
<img src="images/simple-snapped.png"
379+
alt="line positions after snapping"/>
380+
<figcaption>
381+
After line snapping
382+
</figcaption>
383+
</figure>
384+
<p style="clear:left;">
385+
In the figures below, there are two additional lines from h3 elements with line-snap:none. These lines do not shift to align to the grid, but their positions can change based on the shifting of lines around them. In this example, lines 1 2 and 3 shift down to snap their baselines to the grid lines, and line B has normal line box placement just below the line above.
377386
</p>
378387
<figure style="float:left;">
379388
<img src="images/top-no-snap.png"
380389
alt="line positions before snapping"/>
381390
<figcaption>
382-
Before snapping
391+
Before line snapping
383392
</figcaption>
384393
</figure>
385394
<figure style="float:left;">
@@ -393,16 +402,20 @@ <h3 id=line-snap>
393402

394403
<div class="example">
395404

396-
<p>A center-aligned block's line boxes shift nearly the same as a start-aligned block's. All the lines except for the very first snapped line (line 1 in this example) shift exactly the same as a start-aligned block. Then the block is centered, and the shortest distance from the first snapped line's baseline to a grid line is measured.
405+
<p>
406+
The block containing all of these lines might not be top-aligned within its container. In the figures below, the block containing the elements is centered. In a centered situation, you have to align baselines while maintaining centering.
407+
</p>
408+
<p>
409+
This can be done in two shift-and-center steps. First, shift the snapping lines as if there were no centering, then remove the shift for the very first snapping line and center the block. You can see the result in the partial shifting figure below. Note that the shift for lines 2 and 3 are exactly the same as the full line snapping figure in the previous, top-aligned example.
397410
</p>
398411
<p>
399-
If the closest grid line is in the block-start direction, then the entire block is shifted up from the block-end edge to snap the first line to the grid when the block is centered again.
412+
In the second step, measure the distance from the first snapped line's baseline to the grid lines above and below, looking for the closest grid line to that baseline. If the closest grid line is in the block-start direction, then add space below the last line equal to twice that distance. Then the block is centered again, which will align all of the snapped lines to the grid.
400413
</p>
401414
<figure style="float:left;">
402415
<img src="images/first-center-part-snapped.png"
403416
alt="line positions at step 1"/>
404417
<figcaption>
405-
Partial snapping
418+
Partial shifting
406419
</figcaption>
407420
</figure>
408421
<figure style="float:left;">
@@ -413,13 +426,14 @@ <h3 id=line-snap>
413426
</figcaption>
414427
</figure>
415428

416-
<p style="clear:left;">If the closest grid line is in the block-end direction, then the first snapped line is shifted downward to snap the first line to the grid when the block is centered again.
429+
<p style="clear:left;">
430+
If the closest grid line is in the block-end direction, then the first snapped line is shifted downward by twice that distance. Then the block is centered again, which will again align all of the snapped lines to the grid.
417431
</p>
418432
<figure style="float:left;">
419433
<img src="images/second-center-part-snapped.png"
420434
alt="line positions at step 1"/>
421435
<figcaption>
422-
Partial snapping
436+
Partial shifting
423437
</figcaption>
424438
</figure>
425439
<figure style="float:left;">

‎css-line-grid/examples/positioned-blocks.html‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<title>Baseline Grid examples</title>
5+
<style>
6+
* { margin: 0px;}
7+
.container {
8+
margin: 15px;
9+
width: 200px;
10+
height: 250px;
11+
overflow: hidden;
12+
background: repeating-linear-gradient(to bottom, white 0px, white 29px, black 30px);
13+
background-size: 30px 30px; /* fixes too-light lines for some reason */
14+
display: flex;
15+
}
16+
17+
.container.top {
18+
align-items: flex-start;
19+
}
20+
.container.bottom {
21+
align-items: flex-end;
22+
}
23+
.container.center {
24+
align-items: center;
25+
}
26+
27+
.block {
28+
border: thin green solid;
29+
width: 100%;
30+
}
31+
32+
h2 {
33+
background-color: rgba(255, 255, 180, .5);
34+
font-size: 24px;
35+
line-height: 30px;
36+
}
37+
38+
p {
39+
background-color: rgba(255, 255, 180, .5);
40+
font-size: 16px;
41+
line-height: 20px;
42+
}
43+
44+
.top .snap .one {
45+
margin-top: 15px;
46+
}
47+
.top .snap .two {
48+
margin-top: 10px;
49+
}
50+
.top .snap .three {
51+
margin-top: 10px;
52+
}
53+
54+
.bottom .snap .one {
55+
margin-bottom: 10px;
56+
}
57+
.bottom .snap .two {
58+
margin-bottom: 10px;
59+
}
60+
.bottom .snap .three {
61+
margin-bottom: 3px;
62+
}
63+
64+
.center .snap .two {
65+
margin-top: 10px;
66+
}
67+
.center .snap .three {
68+
margin-top: 10px;
69+
margin-bottom: 18px;
70+
}
71+
72+
/* first step for center
73+
.center .two {
74+
margin-top: 10px;
75+
}
76+
.center .three {
77+
margin-top: 10px;
78+
} */
79+
80+
/* second step for center without line 3
81+
.center .snap .one {
82+
margin-top: 11px;
83+
} */
84+
85+
label {
86+
margin: 10px;
87+
}
88+
</style>
89+
</head>
90+
<body>
91+
92+
<div class="container top">
93+
<div class="block">
94+
<h2>Not Snapped A</h2>
95+
<p class=one>Snap 1</p>
96+
<p class=two>Snap 2</p>
97+
<h2>Not Snapped B</h2>
98+
<p class=three>Snap 3</p>
99+
</div>
100+
</div>
101+
<form name="switches">
102+
<label>Top
103+
<input type="radio" name="alignment" value="top" onClick="setAlignment()" checked>
104+
</label>
105+
<label>Center
106+
<input type="radio" name="alignment" value="center" onClick="setAlignment()" >
107+
</label>
108+
<label>Bottom
109+
<input type="radio" name="alignment" value="bottom" onClick="setAlignment()" >
110+
</label>
111+
<label>Snap
112+
<input type="checkbox" name="snap" onClick="toggleSnap()">
113+
</label>
114+
</form>
115+
116+
<script type="text/javascript">
117+
118+
function toggleSnap() {
119+
var blockElement = document.querySelector(".block");
120+
if (document.switches.snap.checked == true) {
121+
blockElement.className = "block snap";
122+
}
123+
else {
124+
blockElement.className = "block";
125+
}
126+
}
127+
128+
function setAlignment() {
129+
var containerElement = document.querySelector(".container");
130+
for (i=0; i < document.switches.alignment.length; i++) {
131+
if (document.switches.alignment[i].checked == true) {
132+
containerElement.className = "container " + document.switches.alignment[i].value;
133+
}
134+
}
135+
}
136+
</script>
137+
138+
</body>
139+
</html>

‎css-line-grid/images/simple-no-snap.png‎

6.76 KB
Loading

‎css-line-grid/images/simple-snapped.png‎

6.19 KB
Loading

0 commit comments

Comments
 (0)