8000 [css-rhythm] Swap order of line vs block sections in spec (editorial)… · w3c/csswg-drafts@6c647cc · GitHub
Skip to content

Commit 6c647cc

Browse files
fantasaifantasai
committed
[css-rhythm] Swap order of line vs block sections in spec (editorial). Fixes #1153.
1 parent 5a37afe commit 6c647cc

1 file changed

Lines changed: 142 additions & 142 deletions

File tree

‎css-rhythm/Overview.bs‎

Lines changed: 142 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -107,148 +107,6 @@ it is expected that
107107
the 'block-step' property or the 'line-grid' property are used,
108108
or that the 'line-height-step' property is used together with them.
109109

110-
Adjusting Line Box Heights: the 'line-height-step' property {#line-height-step}
111-
===============================================================================
112-
113-
<pre class='propdef'>
114-
Name: line-height-step
115-
Value: none | <<length>>
116-
Initial: none
117-
Applies to: block containers
118-
Inherited: yes
119-
Animatable: no
120-
Percentages: N/A
121-
Media: visual
122-
Computed Value: the absolute length, 0 for none
123-
</pre>
124-
125-
This property defines the <dfn>step unit</dfn> for line box heights.
126-
A <a>step unit</a> is the length of the vertical rhythm,
127-
usually the distance from one baseline to the next baseline of the body text.
128-
Body text should fit into one <a>step unit</a>,
129-
and taller lines such as headings
130-
should have heights of two or more <a>step unit</a>s.
131-
Vertical rhythm is created
132-
by making heights of all lines an integer multiple of the <a>step unit</a>.
133-
134-
When the <a>step unit</a> is set to a positive <<length>>,
135-
the line box heights are rounded <i>up</i> to
136-
the closest multiple of the unit.
137-
Negative <<length>> values are invalid.
138-
139-
[[!CSS21]] <a href="https://drafts.csswg.org/css2/visudet.html#line-height">&#xA7;10.8 Line height calculations</a>
140-
defines how to compute the height of a line box from its inline-level content.
141-
The rounding is applied to the resulting height of the line box,
142-
and the additional space is distributed to
143-
<a>over</a>-side and <a>under</a>-side of the line box equally,
144-
so that the original line box appears at the center of the
145-
multiple of <a>step unit</a>.
146-
This adjustment is done
147-
by assuming that there is an inline-level box that has adjusted A' and D'
148-
in the line box.
149-
This inline-level box does not affect alignment points of the 'vertical-align' property,
150-
except values that align relative to the line box.
151-
152-
<div class="figure">
153-
<img src="images/adjust-line-height.svg">
154-
<p class="caption">Rounding up the computed line box height.
155-
</div>
156-
157-
<div class="issue">''line-height-step/none'' and ''0'' are equivalent. Is this ok?</div>
158-
<div class="issue">Should this be animatable?
159-
There doesn't seem to be use cases but needed for consistency?</div>
160-
161-
<div class="example">
162-
<div class="figure" style="float:right">
163-
<img src="images/line-grid-center.svg"
164-
style="height: 300px"
165-
>
166-
</div>
167-
168-
In the following example,
169-
the height of line box in each paragraph is rounded up to the <a>step unit</a>.
170-
171-
<pre class="lang-css">
172-
:root {
173-
font-size: 12pt;
174-
--my-grid: 18pt;
175-
line-height-step: var(--my-grid);
176-
}
177-
h1 {
178-
font-size: 20pt;
179-
margin-top: calc(2 * var(--my-grid));
180-
}
181-
p {
182-
margin: 0;
183-
}
184-
</pre>
185-
186-
The line box in <code>&lt;h1&gt;</code> does not fit into one <a>step unit</a>
187-
and thus occupies two,
188-
but it is still centered within the two <a>step unit</a>.
189-
</div>
190-
191-
<div class="example">
192-
Authors can keep margins or other properties to be multiple of <a>step unit</a>
193-
using ''var()'' and ''calc()'' as in the example above.
194-
195-
If author prefers,
196-
tools like Sass can make such declarations shorter.
197-
198-
<pre class="lang-css">
199-
$gu: 18px;
200-
201-
@function gu($n) {
202-
@return $n * $gu;
203-
}
204-
205-
h1 {
206-
font-size: 20pt;
207-
margin: gu(1.2) auto gu(1.8);
208-
}
209-
</pre>
210-
</div>
211-
212-
<div class="note">
213-
It is usually recommended to set the 'line-height' lower than
214-
the <a>step unit</a>.
215-
The used line height can increase due to several factors such as
216-
the use of 'vertical-align' or font fallback.
217-
</div>
218-
219-
<!--
220-
Notes on Block-level Boxes {#inline-block}
221-
------------------------------------------
222-
223-
<i>This section is not normative.</i>
224-
225-
This level of the specification does not provide features
226-
to adjust heights of block-level boxes.
227-
228-
<div class="example">
229-
The following CSS turns <code>&lt;h2&gt;</code> to inline-blocks,
230-
so that the 'line-height-step' property can control its height.
231-
232-
<pre class="lang-css">
233-
:root {
234-
line-height-step: 18pt;
235-
}
236-
h2 {
237-
display: inline-block;
238-
width: 100%;
239-
line-height-step: 0;
240-
line-height: 1.2;
241-
}
242-
</pre>
243-
244-
When an <code>&lt;h2&gt;</code> is long enough to wrap,
245-
text inside the <code>&lt;h2&gt;</code> uses ''line-height: 1.2'', while
246-
the height of the <code>&lt;h2&gt;</code> block is rounded up
247-
to the multiple of ''18pt''.
248-
See <a href="examples/snap-height.html">a sample in action</a>.
249-
</div>
250-
-->
251-
252110
Adjusting Block-level Box Heights {#block-height}
253111
=================================
254112

@@ -457,6 +315,148 @@ Block Step Adjustment Shorthand: the 'block-step' shorthand {#block-step}
457315
Advisement: Authors are advised to use this shorthand rather than the longhands
458316
unless there is a specific need for its individual longhands to cascade independently.
459317

318+
Adjusting Line Box Heights: the 'line-height-step' property {#line-height-step}
319+
===============================================================================
320+
321+
<pre class='propdef'>
322+
Name: line-height-step
323+
Value: none | <<length>>
324+
Initial: none
325+
Applies to: block containers
326+
Inherited: yes
327+
Animatable: no
328+
Percentages: N/A
329+
Media: visual
330+
Computed Value: the absolute length, 0 for none
331+
</pre>
332+
333+
This property defines the <dfn>step unit</dfn> for line box heights.
334+
A <a>step unit</a> is the length of the vertical rhythm,
335+
usually the distance from one baseline to the next baseline of the body text.
336+
Body text should fit into one <a>step unit</a>,
337+
and taller lines such as headings
338+
should have heights of two or more <a>step unit</a>s.
339+
Vertical rhythm is created
340+
by making heights of all lines an integer multiple of the <a>step unit</a>.
341+
342+
When the <a>step unit</a> is set to a positive <<length>>,
343+
the line box heights are rounded <i>up</i> to
344+
the closest multiple of the unit.
345+
Negative <<length>> values are invalid.
346+
347+
[[!CSS21]] <a href="https://drafts.csswg.org/css2/visudet.html#line-height">&#xA7;10.8 Line height calculations</a>
348+
defines how to compute the height of a line box from its inline-level content.
349+
The rounding is applied to the resulting height of the line box,
350+
and the additional space is distributed to
351+
<a>over</a>-side and <a>under</a>-side of the line box equally,
352+
so that the original line box appears at the center of the
353+
multiple of <a>step unit</a>.
354+
This adjustment is done
355+
by assuming that there is an inline-level box that has adjusted A' and D'
356+
in the line box.
357+
This inline-level box does not affect alignment points of the 'vertical-align' property,
358+
except values that align relative to the line box.
359+
360+
<div class="figure">
361+
<img src="images/adjust-line-height.svg">
362+
<p class="caption">Rounding up the computed line box height.
363+
</div>
364+
365+
<div class="issue">''line-height-step/none'' and ''0'' are equivalent. Is this ok?</div>
366+
<div class="issue">Should this be animatable?
367+
There doesn't seem to be use cases but needed for consistency?</div>
368+
369+
<div class="example">
370+
<div class="figure" style="float:right">
371+
<img src="images/line-grid-center.svg"
372+
style="height: 300px"
373+
>
374+
</div>
375+
376+
In the following example,
377+
the height of line box in each paragraph is rounded up to the <a>step unit</a>.
378+
379+
<pre class="lang-css">
380+
:root {
381+
font-size: 12pt;
382+
--my-grid: 18pt;
383+
line-height-step: var(--my-grid);
384+
}
385+
h1 {
386+
font-size: 20pt;
387+
margin-top: calc(2 * var(--my-grid));
388+
}
389+
p {
390+
margin: 0;
391+
}
392+
</pre>
393+
394+
The line box in <code>&lt;h1&gt;</code> does not fit into one <a>step unit</a>
395+
and thus occupies two,
396+
but it is still centered within the two <a>step unit</a>.
397+
</div>
398+
399+
<div class="example">
400+
Authors can keep margins or other properties to be multiple of <a>step unit</a>
401+
using ''var()'' and ''calc()'' as in the example above.
402+
403+
If author prefers,
404+
tools like Sass can make such declarations shorter.
405+
406+
<pre class="lang-css">
407+
$gu: 18px;
408+
409+
@function gu($n) {
410+
@return $n * $gu;
411+
}
412+
413+
h1 {
414+
font-size: 20pt;
415+
margin: gu(1.2) auto gu(1.8);
416+
}
417+
</pre>
418+
</div>
419+
420+
<div class="note">
421+
It is usually recommended to set the 'line-height' lower than
422+
the <a>step unit</a>.
423+
The used line height can increase due to several factors such as
424+
the use of 'vertical-align' or font fallback.
425+
</div>
426+
427+
<!--
428+
Notes on Block-level Boxes {#inline-block}
429+
------------------------------------------
430+
431+
<i>This section is not normative.</i>
432+
433+
This level of the specification does not provide features
434+
to adjust heights of block-level boxes.
435+
436+
<div class="example">
437+
The following CSS turns <code>&lt;h2&gt;</code> to inline-blocks,
438+
so that the 'line-height-step' property can control its height.
439+
440+
<pre class="lang-css">
441+
:root {
442+
line-height-step: 18pt;
443+
}
444+
h2 {
445+
display: inline-block;
446+
width: 100%;
447+
line-height-step: 0;
448+
line-height: 1.2;
449+
}
450+
</pre>
451+
452+
When an <code>&lt;h2&gt;</code> is long enough to wrap,
453+
text inside the <code>&lt;h2&gt;</code> uses ''line-height: 1.2'', while
454+
the height of the <code>&lt;h2&gt;</code> block is rounded up
455+
to the multiple of ''18pt''.
456+
See <a href="examples/snap-height.html">a sample in action</a>.
457+
</div>
458+
-->
459+
460460
Privacy and Security Considerations {#priv-sec}
461461
===============================================
462462

0 commit comments

Comments
 (0)