8000 [css-snap-size] Reorganized sections, block-level cut, sample include… · w3c/csswg-drafts@f266fba · GitHub
Skip to content

Commit f266fba

Browse files
kojiishikojiishi
committed
[css-snap-size] Reorganized sections, block-level cut, sample includes images
1 parent d425182 commit f266fba

3 files changed

Lines changed: 58 additions & 35 deletions

File tree

‎css-snap-size/Overview.bs‎

Lines changed: 36 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ Values have the following meanings:
5252
Values between 1 and 100 (inclusive) are valid.
5353
</dl>
5454

55+
Snapping Line Box Heights {#snap-line-height}
56+
---------------------------------------------
57+
5558
When the <a>snap unit</a> is set to a positive length,
5659
the line box heights are rounded <i>up</i> to
5760
the closest multiple of the unit.
@@ -73,15 +76,6 @@ how the additional spaces are distributed.
7376
* When it is set,
7477
refer to the <a href="#snap-baseline">snapping baselines</a> section below.
7578

76-
For block-level replaced elements,
77-
the rounding is applied to their logical heights of the margin boxes
78-
by increasing the used value of 'margin-block-start' and 'margin-block-end' equally.
79-
80-
<div class="issue">
81-
Investigate complexities around margin collapsing.
82-
Does the use of padding or content height help?
83-
</div>
84-
8579
<div class="example">
8680
<div class="figure" style="float:right">
8781
<img src="images/line-grid-center.svg"
@@ -108,7 +102,7 @@ by increasing the used value of 'margin-block-start' and 'margin-block-end' equa
108102
}
109103
</pre>
110104

111-
The line box in &lt;h1&gt; does not fit into one <a>snap unit</a>
105+
The line box in <code>&lt;h1&gt;</code> does not fit into one <a>snap unit</a>
112106
and thus occupies two,
113107
but it is still centered within the two <a>snap unit</a>.
114108
</div>
@@ -132,8 +126,8 @@ the additional spaces are distributed using the following formula:
132126
* B: the distance between the bottom of the line box and the baseline.
133127

134128
This formula pushes the baseline of the line box
135-
down to the closest <a>snap baseline position</a>
136-
as a consequence.
129+
down to the closest <a>snap baseline position</a>,
130+
and the bottom to the next <a>snap unit</a>.
137131

138132
<div class="example">
139133
<div class="figure" style="float:right">
@@ -154,22 +148,48 @@ as a consequence.
154148
to the closest <a>snap baseline position</a>
155149
by adding the space-over.
156150

157-
&lt;h1&gt; is as tall as
151+
<code>&lt;h1&gt;</code> is as tall as
158152
its baseline being lower than the second <a>snap baseline position</a>
159153
that it is pushed down to the third <a>snap baseline position</a>.
160154
</div>
161155

162156
<div class="note">
163157
Since the bottom of the line box is rounded to the closest <a>snap unit</a>
164158
next to the descenders of the line box,
165-
large fonts may result in unintended spaces under the line box.
166-
Oftentimes setting smaller <a>snap baseline position</a> can solve such issue.
159+
large descenders may result in unintended spaces under the line box.
160+
Oftentimes changing <a>snap baseline position</a> can control such situations.
167161
</div>
168162

169163
Snapping Block Boxes {#snap-block-height}
170164
-----------------------------------------
171165

172-
<div class="issue">TBD, including priority and complexity, feedback appreciated.</div>
166+
<i>This section is not normative.</i>
167+
168+
This level of the specification does not provide a way to snap heights
169+
of block-level boxes.
170+
171+
<div class="example">
172+
The following CSS turns <code>&lt;h2&gt;</code> to an inline-block
173+
so that inside the <code>&lt;h2&gt;</code> can apply different 'snap-height'.
174+
175+
<pre class="lang-css">
176+
:root {
177+
snap-height: 18pt;
178+
}
179+
h2 {
180+
display: inline-block;
181+
width: 100%;
182+
snap-height: 0;
183+
line-height: 1.2;
184+
}
185+
</pre>
186+
187+
When an <code>&lt;h2&gt;</code> is long enough to wrap,
188+
text inside the <code>&lt;h2&gt;</code> uses ''line-height: 1.2'' while
189+
the height of the <code>&lt;h2&gt;</code> block is snapped
190+
to the multiple of ''18pt''.
191+
See <a href="examples/snap-height.html">a sample</a>.
192+
</div>
173193

174194
Snapping Widths: the 'snap-width' property {#snap-width}
175195
========================================================

‎css-snap-size/examples/1x1-green.png‎

135 Bytes
Loading

‎css-snap-size/examples/snap-height.html‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
<!DOCTYPE html>
22
<style>
33
#example {
4-
-webkit-columns: 5;
5-
columns: 5;
6-
width: 800px;
4+
-webkit-columns: 5 20ch;
5+
columns: 5 20ch;
76
font-size: 12pt;
7+
line-height: 1.5;
88
}
99
h1 {
10-
font-size: 30pt;
10+
font-size: 36pt;
11+
margin: .5em 0 .2em 0;
1112
}
1213
p {
1314
margin: 0;
1415
}
1516
.snap-height #example {
1617
line-height: 1;
17-
snap-height: 15pt;
18+
snap-height: 18pt;
1819
}
1920
.snap-height.baseline #example {
20-
snap-height: 15pt 70;
21+
snap-height: 18pt 70;
2122
}
2223
.snap-height #example > * {
2324
margin: 0;
@@ -36,14 +37,17 @@
3637
padding: .5em;
3738
margin: .5em 0;
3839
}
39-
.has-snap-height #prerequisite {
40-
display: none;
41-
}
4240
#control {
4341
-webkit-user-select: none;
4442
user-select: none;
4543
display: none;
4644
}
45+
code {
46+
border: thin solid black;
47+
}
48+
.has-snap-height #prerequisite {
49+
display: none;
50+
}
4751
.has-snap-height #control {
4852
display: block;
4953
}
@@ -57,12 +61,17 @@
5761
<body>
5862
<div id="panel">
5963
<div id="prerequisite">
60-
To experiment, you need:
64+
To experiment, you need to:
6165
<ol>
6266
<li>Install <a href="https://www.google.com/chrome/browser/canary.html">Chrome Canary</a>.
6367
<li>Go to <code>chrome://flags/#enable-experimental-web-platform-features</code> and
64-
Enable <b>Experimental Web Platform features</b>.
68+
click <b>Enable</b>.
69+
<li>Open this page.
6570
</ol>
71+
Note that this enables Experimental Web Platform features,
72+
which is not recommended for your daily use.
73+
When you are done with experiments,
74+
please open the URL above and click <b>Disable</b>.
6675
</div>
6776
<div id="control">
6877
<label><input type="checkbox" value="snap-height" onclick="onChange()">Snap height</label>
@@ -73,20 +82,14 @@
7382
</div>
7483
</div>
7584
<div id="example">
76-
<h1>Heading</h1>
77-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
78-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
79-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
80-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
81-
<h2>Heading</h2>
82-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
83-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
8485
<h1>Heading</h1>
8586
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
8687
<h2>Heading</h2>
8788
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
8889
<h2>A long multi-line heading</h2>
8990
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
91+
<div><img src="1x1-green.png" width="30" height="30"></div>
92+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
9093
</div>
9194
<script>
9295
(function () {

0 commit comments

Comments
 (0)