Skip to content

Commit df4dd80

Browse files
fantasaifantasai
committed
[css-rhythm] Indentation is nice. (no non-WS changes)
1 parent 0a38b08 commit df4dd80

File tree

1 file changed

+153
-152
lines changed

1 file changed

+153
-152
lines changed

‎css-rhythm/Overview.bs

+153-152
Original file line numberDiff line numberDiff line change
@@ -27,175 +27,176 @@ spec:css21; type:property; text:min-width
2727
Introduction {#intro}
2828
=====================
2929

30-
This specification provides features to control sizes of CSS objects
31-
according to the rules desired by use cases.
30+
This specification provides features to control sizes of CSS objects
31+
according to the rules desired by use cases.
3232

33-
Controlling sizes of CSS objects to be multiple of a unit
34-
is desired in many cases.
35-
This level of the specification focuses on following cases.
33+
Controlling sizes of CSS objects to be multiple of a unit
34+
is desired in many cases.
35+
This level of the specification focuses on following cases.
3636

37-
* Adjust heights of line boxes to multiples of the specified length.
38-
* Adjust heights of block-level boxes to multiples of the specified length.
37+
* Adjust heights of line boxes to multiples of the specified length.
38+
* Adjust heights of block-level boxes to multiples of the specified length.
3939

40-
By controlling heights of line boxes,
41-
lines of text in different fonts can create consistent visuals
42-
to help readability.
40+
By controlling heights of line boxes,
41+
lines of text in different fonts can create consistent visuals
42+
to help readability.
4343

44-
Also by stacking such line boxes,
45-
authors can align lines across columns,
46-
pages, scroll-snapped blocks, or multiple blocks placed absolutely,
47-
to produce vertical rhythm.
44+
Also by stacking such line boxes,
45+
authors can align lines across columns,
46+
pages, scroll-snapped blocks, or multiple blocks placed absolutely,
47+
to produce vertical rhythm.
4848

49-
<div class="figure">
50-
<a href="examples/snap-height.html">
51-
<img src="images/snap-height-sample.png"></a>
52-
<p class="caption">Vertical rhythm kept through pictures and different size of text in a multi-column document.
53-
</div>
49+
<div class="figure">
50+
<a href="examples/snap-height.html">
51+
<img src="images/snap-height-sample.png"></a>
52+
<p class="caption">Vertical rhythm kept through pictures and different size of text in a multi-column document.
53+
</div>
5454

5555
Adjusting Line Box Heights: the 'line-height-step' property {#line-height-step}
5656
===============================================================================
5757

58-
<pre class='propdef'>
59-
Name: line-height-step
60-
Value: <<length>>
61-
Initial: 0
62-
Applies to: block containers
63-
Inherited: yes
64-
Animatable: no
65-
Percentages: N/A
66-
Media: visual
67-
Computed Value: the absolute length
68-
</pre>
69-
70-
This property defines the <dfn>step unit</dfn> for line box heights.
71-
When the <a>step unit</a> is set to a positive <<length>>,
72-
the line box heights are rounded <i>up</i> to
73-
the closest multiple of the unit.
74-
Non-negative <<length>>s are valid.
75-
76-
[[!CSS21]] <a href="https://drafts.csswg.org/css2/visudet.html#line-height">&#xA7;10.8 Line height calculations</a>
77-
defines how to compute the height of a line box from its inline-level content.
78-
The rounding is applied to the resulting height of the line box,
79-
and the additional space is distributed to
80-
<a>over</a>-side and <a>under</a>-side of the line box equally,
81-
so that the original line box appears at the center of the
82-
multiple of <a>step unit</a>.
83-
This adjustment is done
84-
by assuming that there is an inline-level box that has adjusted A' and D'
85-
in the line box.
86-
87-
<div class="figure">
88-
<img src="images/adjust-line-height.svg">
89-
<p class="caption">Rounding up the computed line box height.
90-
</div>
91-
92-
<div class="issue">Should this be animatable?
93-
There doesn't seem to be use cases but needed for consistency?</div>
94-
95-
<div class="example">
96-
<div class="figure" style="float:right">
97-
<img src="images/line-grid-center.svg"
98-
style="height: 300px"
99-
>
100-
</div>
101-
102-
In the following example,
103-
the height of line box in each paragraph is rounded up to the <a>step unit</a>.
104-
105-
<pre class="lang-css">
106-
:root {
107-
font-size: 12pt;
108-
--my-grid: 18pt;
109-
line-height-step: var(--my-grid);
110-
}
111-
h1 {
112-
font-size: 20pt;
113-
margin-top: calc(2 * var(--my-grid));
114-
}
115-
p {
116-
margin: 0;
117-
}
118-
</pre>
119-
120-
The line box in <code>&lt;h1&gt;</code> does not fit into one <a>step unit</a>
121-
and thus occupies two,
122-
but it is still centered within the two <a>step unit</a>.
123-
</div>
124-
125-
<div class="example">
126-
Authors can keep margins or other properties to be multiple of <a>step unit</a>
127-
using ''var()'' and ''calc()'' as in the example above.
128-
129-
If author prefers,
130-
tools like Sass can make such declarations shorter.
131-
132-
<pre class="lang-css">
133-
$gu: 18px;
134-
135-
@function gu($n) {
136-
@return $n * $gu;
137-
}
138-
139-
h1 {
140-
font-size: 20pt;
141-
margin: gu(1.2) auto gu(1.8);
142-
}
143-
</pre>
144-
</div>
145-
146-
<div class="note">
147-
It is usually recommended to set the 'line-height' lower than
148-
the <a>step unit</a>.
149-
The used line height can increase due to several factors such as
150-
the use of 'vertical-align' or font fallback.
151-
</div>
58+
<pre class='propdef'>
59+
Name: line-height-step
60+
Value: <<length>>
61+
Initial: 0
62+
Applies to: block containers
63+
Inherited: yes
64+
Animatable: no
65+
Percentages: N/A
66+
Media: visual
67+
Computed Value: the absolute length
68+
</pre>
69+
70+
This property defines the <dfn>step unit</dfn> for line box heights.
71+
When the <a>step unit</a> is set to a positive <<length>>,
72+
the line box heights are rounded <i>up</i> to
73+
the closest multiple of the unit.
74+
Non-negative <<length>>s are valid.
75+
76+
[[!CSS21]] <a href="https://drafts.csswg.org/css2/visudet.html#line-height">&#xA7;10.8 Line height calculations</a>
77+
defines how to compute the height of a line box from its inline-level content.
78+
The rounding is applied to the resulting height of the line box,
79+
and the additional space is distributed to
80+
<a>over</a>-side and <a>under</a>-side of the line box equally,
81+
so that the original line box appears at the center of the
82+
multiple of <a>step unit</a>.
83+
This adjustment is done
84+
by assuming that there is an inline-level box that has adjusted A' and D'
85+
in the line box.
86+
87+
<div class="figure">
88+
<img src="images/adjust-line-height.svg">
89+
<p class="caption">Rounding up the computed line box height.
90+
</div>
91+
92+
<div class="issue">Should this be animatable?
93+
There doesn't seem to be use cases but needed for consistency?</div>
94+
95+
<div class="example">
96+
<div class="figure" style="float:right">
97+
<img src="images/line-grid-center.svg"
98+
style="height: 300px"
99+
>
100+
</div>
101+
102+
In the following example,
103+
the height of line box in each paragraph is rounded up to the <a>step unit</a>.
104+
105+
<pre class="lang-css">
106+
:root {
107+
font-size: 12pt;
108+
--my-grid: 18pt;
109+
line-height-step: var(--my-grid);
110+
}
111+
h1 {
112+
font-size: 20pt;
113+
margin-top: calc(2 * var(--my-grid));
114+
}
115+
p {
116+
margin: 0;
117+
}
118+
</pre>
119+
120+
The line box in <code>&lt;h1&gt;</code> does not fit into one <a>step unit</a>
121+
and thus occupies two,
122+
but it is still centered within the two <a>step unit</a>.
123+
</div>
124+
125+
<div class="example">
126+
Authors can keep margins or other properties to be multiple of <a>step unit</a>
127+
using ''var()'' and ''calc()'' as in the example above.
128+
129+
If author prefers,
130+
tools like Sass can make such declarations shorter.
131+
132+
<pre class="lang-css">
133+
$gu: 18px;
134+
135+
@function gu($n) {
136+
@return $n * $gu;
137+
}
138+
139+
h1 {
140+
font-size: 20pt;
141+
margin: gu(1.2) auto gu(1.8);
142+
}
143+
</pre>
144+
</div>
145+
146+
<div class="note">
147+
It is usually recommended to set the 'line-height' lower than
148+
the <a>step unit</a>.
149+
The used line height can increase due to several factors such as
150+
the use of 'vertical-align' or font fallback.
151+
</div>
152152

153153
Notes on Block-level Boxes {#block-height}
154154
------------------------------------------
155155

156-
<i>This section is not normative.</i>
157-
158-
This level of the specification does not provide features
159-
to adjust heights of block-level boxes.
160-
161-
<div class="example">
162-
The following CSS turns <code>&lt;h2&gt;</code> to inline-blocks,
163-
so that the 'line-height-step' property can control its height.
164-
165-
<pre class="lang-css">
166-
:root {
167-
line-height-step: 18pt;
168-
}
169-
h2 {
170-
display: inline-block;
171-
width: 100%;
172-
line-height-step: 0;
173-
line-height: 1.2;
174-
}
175-
</pre>
176-
177-
When an <code>&lt;h2&gt;</code> is long enough to wrap,
178-
text inside the <code>&lt;h2&gt;</code> uses ''line-height: 1.2'', while
179-
the height of the <code>&lt;h2&gt;</code> block is rounded up
180-
to the multiple of ''18pt''.
181-
See <a href="examples/snap-height.html">a sample in action</a>.
182-
</div>
156+
<i>This section is not normative.</i>
157+
158+
This level of the specification does not provide features
159+
to adjust heights of block-level boxes.
160+
161+
<div class="example">
162+
The following CSS turns <code>&lt;h2&gt;</code> to inline-blocks,
163+
so that the 'line-height-step' property can control its height.
164+
165+
<pre class="lang-css">
166+
:root {
167+
line-height-step: 18pt;
168+
}
169+
h2 {
170+
display: inline-block;
171+
width: 100%;
172+
line-height-step: 0;
173+
line-height: 1.2;
174+
}
175+
</pre>
176+
177+
When an <code>&lt;h2&gt;</code> is long enough to wrap,
178+
text inside the <code>&lt;h2&gt;</code> uses ''line-height: 1.2'', while
179+
the height of the <code>&lt;h2&gt;</code> block is rounded up
180+
to the multiple of ''18pt''.
181+
See <a href="examples/snap-height.html">a sample in action</a>.
182+
</div>
183183

184184
Privacy and Security Considerations {#priv-sec}
185185
===============================================
186186

187-
This specification introduces no new privacy leaks,
188-
or security considerations beyond "implement it correctly".
187+
This specification introduces no new privacy leaks,
188+
or security considerations beyond "implement it correctly".
189189

190190
Acknowledgments {#acks}
191191
=======================
192-
This specification would not have been possible without the help from:
193-
Takao Baba,
194-
Chris Eppstein,
195-
Shinyu Murakami,
196-
Tsutomu Nanjo,
197-
Charlie Neely,
198-
Florian Rivoal,
199-
Hiroshi Sakakibara,
200-
Alan Stearns,
201-
and the CSS Working Group members.
192+
193+
This specification would not have been possible without the help from:
194+
Takao Baba,
195+
Chris Eppstein,
196+
Shinyu Murakami,
197+
Tsutomu Nanjo,
198+
Charlie Neely,
199+
Florian Rivoal,
200+
Hiroshi Sakakibara,
201+
Alan Stearns,
202+
and the CSS Working Group members.

0 commit comments

Comments
 (0)