Skip to content

Commit 954102c

Browse files
committed
[css-sizing-4][editorial] More editorial tweaking.
1 parent e304055 commit 954102c

File tree

1 file changed

+18
-18
lines changed

1 file changed

+18
-18
lines changed

css-sizing-4/Overview.bs

+18-18
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ Aspect Ratios</h2>
151151
and for altering the effective aspect ratio of replaced elements.
152152

153153
<h3 id="aspect-ratio">
154-
Intrinsic Aspect Ratios: the 'aspect-ratio' property</h3>
154+
Preferred Aspect Ratios: the 'aspect-ratio' property</h3>
155155

156156
<pre class="propdef">
157157
Name: aspect-ratio
@@ -172,14 +172,14 @@ Intrinsic Aspect Ratios: the 'aspect-ratio' property</h3>
172172
<a>Replaced elements</a> with an <a>intrinsic aspect ratio</a>
173173
use that aspect ratio;
174174
otherwise the box has no <a>preferred aspect ratio</a>.
175-
Size calculations involving <a>intrinsic aspect ratio</a>
175+
Size calculations involving the aspect ratio
176176
work with the <a>content box</a> dimensions always.
177177

178178
<dt><dfn><<ratio>></dfn>
179179
<dd>
180180
The box’s <a>preferred aspect ratio</a> is the specified ratio
181181
of ''<var>width</var> / <var>height</var>''.
182-
Size calculations involving <a>preferred aspect ratio</a>
182+
Size calculations involving the aspect ratio
183183
work with the dimensions of the box specified by 'box-sizing'.
184184

185185
<dt><dfn>auto && <<ratio>></dfn>
@@ -189,16 +189,17 @@ Intrinsic Aspect Ratios: the 'aspect-ratio' property</h3>
189189
of ''<var>width</var> / <var>height</var>''
190190
unless it is a [=replaced element=] with an [=intrinsic aspect ratio=],
191191
in which case that aspect ratio is used instead.
192-
In all cases, size calculations involving this aspect ratio
192+
In all cases, size calculations involving the aspect ratio
193193
work with the [=content box=] dimensions always.
194194
</dl>
195195

196196
Note: Having a [=preferred aspect ratio=] does not make a box into a [=replaced element=];
197-
layout rules specific to [=replaced elements=] generally
198-
do not apply to [=non-replaced=] boxes with a [=preferred aspect ratio=].
197+
layout rules specific to [=replaced elements=]
198+
do not generally apply to [=non-replaced=] boxes with a [=preferred aspect ratio=].
199199
For example, a [=non-replaced=] [=absolutely-positioned=] box
200200
treats ''justify-self: normal'' as ''justify-self/stretch'', not as ''justify-self/start''
201-
([[CSS-ALIGN-3#justify-abspos]]).
201+
([[CSS-ALIGN-3#justify-abspos]]),
202+
even if it has a [=preferred aspect ratio=]
202203

203204
ISSUE: CSS2.1 does not cleanly differentiate between
204205
replaced elements vs. elements with an aspect ratio;
@@ -253,9 +254,6 @@ Intrinsic Aspect Ratios: the 'aspect-ratio' property</h3>
253254
</pre>
254255
</div>
255256

256-
<h4 id="aspect-ratio-intrinsic-replaced">
257-
Intrinsic Sizes Of Replaced Elements</h4>
258-
259257
If a replaced element's only [=intrinsic dimension=]
260258
is an intrinsic width or an intrinsic height,
261259
giving it a [=preferred aspect ratio=]
@@ -265,7 +263,7 @@ Intrinsic Sizes Of Replaced Elements</h4>
265263
through the [=preferred aspect ratio=].
266264

267265
<h3 id="aspect-ratio-automatic">
268-
Automatic Sizes In The Presence Of A Preferred Aspect Ratio</h3>
266+
Effects of Preferred Aspect Ratio on Automatic Sizes</h3>
269267

270268
When a box has a [=preferred aspect ratio=],
271269
its <a>automatic sizes</a>
@@ -289,7 +287,7 @@ Automatic Sizes In The Presence Of A Preferred Aspect Ratio</h3>
289287
it can have no effect on its [=preferred sizes=].
290288

291289
<h4 id="aspect-ratio-margin-collapse">
292-
Margin-collapse</h4>
290+
Margin-collapsing</h4>
293291

294292
For the purpose of margin collapsing ([[css2/box#collapsing-margins]]),
295293
if the [=block axis=] is the [=ratio-dependent axis=],
@@ -303,15 +301,15 @@ Automatic Content-based Minimum Sizes</h3>
303301
of a box with a <a>preferred aspect ratio</a>
304302
that is neither a <a>replaced element</a> nor a <a>scroll container</a>
305303
is its <a>min-content size</a>
306-
clamped from above by its <a>maximum size</a>.
304+
capped by its <a>maximum size</a>.
307305

308306
<div class="example">
309307
In the following example,
310308
the box is as wide as the container (as usual),
311309
and its height is as tall as needed to contain its content
312310
but at least as tall as it is wide.
313311

314-
<pre>
312+
<pre highlight=css>
315313
div {
316314
aspect-ratio: 1/1;
317315
/* 'width' and 'height' both default to 'auto' */
@@ -333,7 +331,7 @@ Automatic Content-based Minimum Sizes</h3>
333331
even the box with excess content maintains the 1:1 aspect ratio
334332
(and handles overflow by becoming scrollable instead, as usual).
335333

336-
<pre>
334+
<pre highlight=css>
337335
div {
338336
overflow: auto;
339337
aspect-ratio: 1/1;
@@ -353,7 +351,7 @@ Automatic Content-based Minimum Sizes</h3>
353351
but will result in content overflowing the box
354352
if it is not otherwise handled.
355353

356-
<pre>
354+
<pre highlight=css>
357355
div {
358356
aspect-ratio: 1/1;
359357
min-height: 0;
@@ -374,7 +372,8 @@ Automatic Content-based Minimum Sizes</h3>
374372
<div class="example">
375373
This automatic minimum operates in both axes.
376374
Consider this example:
377-
<pre>
375+
376+
<pre highlight=html>
378377
&lt;div style="height: 100px; aspect-ratio: 1/1;">
379378
&lt;span style="display: inline-block; width: 50px;">&lt;/span>
380379
&lt;span style="display: inline-block; width: 150px;">&lt;/span>
@@ -464,7 +463,8 @@ Cyclic Aspect-Ratio Calculations</h4>
464463

465464
<div class="example">
466465
For example, given a (<a>horizontal writing mode</a>) element with
467-
<pre>
466+
467+
<pre highlight=css>
468468
width: auto;
469469
min-height: min-content;
470470
aspect-ratio: 1/1;

0 commit comments

Comments
 (0)