Skip to content

Commit

Permalink
[css-rhythm] Swap order of line vs block sections in spec (editorial). …
Browse files Browse the repository at this point in the history 
…Fixes #1153.
  • Loading branch information
@fantasai
fantasai committed Aug 4, 2017
1 parent 5a37afe commit 6c647cc
Showing 1 changed file with 142 additions and 142 deletions.
284 changes: 142 additions & 142 deletions css-rhythm/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,148 +107,6 @@ it is expected that
the 'block-step' property or the 'line-grid' property are used,
or that the 'line-height-step' property is used together with them.

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

<pre class='propdef'>
Name: line-height-step
Value: none | <<length>>
Initial: none
Applies to: block containers
Inherited: yes
Animatable: no
Percentages: N/A
Media: visual
Computed Value: the absolute length, 0 for none
</pre>

This property defines the <dfn>step unit</dfn> for line box heights.
A <a>step unit</a> is the length of the vertical rhythm,
usually the distance from one baseline to the next baseline of the body text.
Body text should fit into one <a>step unit</a>,
and taller lines such as headings
should have heights of two or more <a>step unit</a>s.
Vertical rhythm is created
by making heights of all lines an integer multiple of the <a>step unit</a>.

When the <a>step unit</a> is set to a positive <<length>>,
the line box heights are rounded <i>up</i> to
the closest multiple of the unit.
Negative <<length>> values are invalid.

[[!CSS21]] <a href="https://drafts.csswg.org/css2/visudet.html#line-height">&#xA7;10.8 Line height calculations</a>
defines how to compute the height of a line box from its inline-level content.
The rounding is applied to the resulting height of the line box,
and the additional space is distributed to
<a>over</a>-side and <a>under</a>-side of the line box equally,
so that the original line box appears at the center of the
multiple of <a>step unit</a>.
This adjustment is done
by assuming that there is an inline-level box that has adjusted A' and D'
in the line box.
This inline-level box does not affect alignment points of the 'vertical-align' property,
except values that align relative to the line box.

<div class="figure">
<img src="images/adjust-line-height.svg">
<p class="caption">Rounding up the computed line box height.
</div>

<div class="issue">''line-height-step/none'' and ''0'' are equivalent. Is this ok?</div>
<div class="issue">Should this be animatable?
There doesn't seem to be use cases but needed for consistency?</div>

<div class="example">
<div class="figure" style="float:right">
<img src="images/line-grid-center.svg"
style="height: 300px"
>
</div>

In the following example,
the height of line box in each paragraph is rounded up to the <a>step unit</a>.

<pre class="lang-css">
:root {
font-size: 12pt;
--my-grid: 18pt;
line-height-step: var(--my-grid);
}
h1 {
font-size: 20pt;
margin-top: calc(2 * var(--my-grid));
}
p {
margin: 0;
}
</pre>

The line box in <code>&lt;h1&gt;</code> does not fit into one <a>step unit</a>
and thus occupies two,
but it is still centered within the two <a>step unit</a>.
</div>

<div class="example">
Authors can keep margins or other properties to be multiple of <a>step unit</a>
using ''var()'' and ''calc()'' as in the example above.

If author prefers,
tools like Sass can make such declarations shorter.

<pre class="lang-css">
$gu: 18px;

@function gu($n) {
@return $n * $gu;
}

h1 {
font-size: 20pt;
margin: gu(1.2) auto gu(1.8);
}
</pre>
</div>

<div class="note">
It is usually recommended to set the 'line-height' lower than
the <a>step unit</a>.
The used line height can increase due to several factors such as
the use of 'vertical-align' or font fallback.
</div>

<!--
Notes on Block-level Boxes {#inline-block}
------------------------------------------
<i>This section is not normative.</i>
This level of the specification does not provide features
to adjust heights of block-level boxes.
<div class="example">
The following CSS turns <code>&lt;h2&gt;</code> to inline-blocks,
so that the 'line-height-step' property can control its height.
<pre class="lang-css">
:root {
line-height-step: 18pt;
}
h2 {
display: inline-block;
width: 100%;
line-height-step: 0;
line-height: 1.2;
}
</pre>
When an <code>&lt;h2&gt;</code> is long enough to wrap,
text inside the <code>&lt;h2&gt;</code> uses ''line-height: 1.2'', while
the height of the <code>&lt;h2&gt;</code> block is rounded up
to the multiple of ''18pt''.
See <a href="examples/snap-height.html">a sample in action</a>.
</div>
-->

Adjusting Block-level Box Heights {#block-height}
=================================

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

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

<pre class='propdef'>
Name: line-height-step
Value: none | <<length>>
Initial: none
Applies to: block containers
Inherited: yes
Animatable: no
Percentages: N/A
Media: visual
Computed Value: the absolute length, 0 for none
</pre>

This property defines the <dfn>step unit</dfn> for line box heights.
A <a>step unit</a> is the length of the vertical rhythm,
usually the distance from one baseline to the next baseline of the body text.
Body text should fit into one <a>step unit</a>,
and taller lines such as headings
should have heights of two or more <a>step unit</a>s.
Vertical rhythm is created
by making heights of all lines an integer multiple of the <a>step unit</a>.

When the <a>step unit</a> is set to a positive <<length>>,
the line box heights are rounded <i>up</i> to
the closest multiple of the unit.
Negative <<length>> values are invalid.

[[!CSS21]] <a href="https://drafts.csswg.org/css2/visudet.html#line-height">&#xA7;10.8 Line height calculations</a>
defines how to compute the height of a line box from its inline-level content.
The rounding is applied to the resulting height of the line box,
and the additional space is distributed to
<a>over</a>-side and <a>under</a>-side of the line box equally,
so that the original line box appears at the center of the
multiple of <a>step unit</a>.
This adjustment is done
by assuming that there is an inline-level box that has adjusted A' and D'
in the line box.
This inline-level box does not affect alignment points of the 'vertical-align' property,
except values that align relative to the line box.

<div class="figure">
<img src="images/adjust-line-height.svg">
<p class="caption">Rounding up the computed line box height.
</div>

<div class="issue">''line-height-step/none'' and ''0'' are equivalent. Is this ok?</div>
<div class="issue">Should this be animatable?
There doesn't seem to be use cases but needed for consistency?</div>

<div class="example">
<div class="figure" style="float:right">
<img src="images/line-grid-center.svg"
style="height: 300px"
>
</div>

In the following example,
the height of line box in each paragraph is rounded up to the <a>step unit</a>.

<pre class="lang-css">
:root {
font-size: 12pt;
--my-grid: 18pt;
line-height-step: var(--my-grid);
}
h1 {
font-size: 20pt;
margin-top: calc(2 * var(--my-grid));
}
p {
margin: 0;
}
</pre>

The line box in <code>&lt;h1&gt;</code> does not fit into one <a>step unit</a>
and thus occupies two,
but it is still centered within the two <a>step unit</a>.
</div>

<div class="example">
Authors can keep margins or other properties to be multiple of <a>step unit</a>
using ''var()'' and ''calc()'' as in the example above.

If author prefers,
tools like Sass can make such declarations shorter.

<pre class="lang-css">
$gu: 18px;

@function gu($n) {
@return $n * $gu;
}

h1 {
font-size: 20pt;
margin: gu(1.2) auto gu(1.8);
}
</pre>
</div>

<div class="note">
It is usually recommended to set the 'line-height' lower than
the <a>step unit</a>.
The used line height can increase due to several factors such as
the use of 'vertical-align' or font fallback.
</div>

<!--
Notes on Block-level Boxes {#inline-block}
------------------------------------------
<i>This section is not normative.</i>
This level of the specification does not provide features
to adjust heights of block-level boxes.
<div class="example">
The following CSS turns <code>&lt;h2&gt;</code> to inline-blocks,
so that the 'line-height-step' property can control its height.
<pre class="lang-css">
:root {
line-height-step: 18pt;
}
h2 {
display: inline-block;
width: 100%;
line-height-step: 0;
line-height: 1.2;
}
</pre>
When an <code>&lt;h2&gt;</code> is long enough to wrap,
text inside the <code>&lt;h2&gt;</code> uses ''line-height: 1.2'', while
the height of the <code>&lt;h2&gt;</code> block is rounded up
to the multiple of ''18pt''.
See <a href="examples/snap-height.html">a sample in action</a>.
</div>
-->

Privacy and Security Considerations {#priv-sec}
===============================================

Expand Down

0 comments on commit 6c647cc

Please sign in to comment.