@@ -151,7 +151,7 @@ Aspect Ratios</h2>
151
151
and for altering the effective aspect ratio of replaced elements.
152
152
153
153
<h3 id="aspect-ratio">
154
- Intrinsic Aspect Ratios: the 'aspect-ratio' property</h3>
154
+ Preferred Aspect Ratios: the 'aspect-ratio' property</h3>
155
155
156
156
<pre class="propdef">
157
157
Name : aspect-ratio
@@ -172,14 +172,14 @@ Intrinsic Aspect Ratios: the 'aspect-ratio' property</h3>
172
172
<a>Replaced elements</a> with an <a>intrinsic aspect ratio</a>
173
173
use that aspect ratio;
174
174
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
176
176
work with the <a>content box</a> dimensions always.
177
177
178
178
<dt> <dfn><<ratio>></dfn>
179
179
<dd>
180
180
The box’s <a>preferred aspect ratio</a> is the specified ratio
181
181
of ''<var>width</var> / <var>height</var>'' .
182
- Size calculations involving <a>preferred aspect ratio</a>
182
+ Size calculations involving the aspect ratio
183
183
work with the dimensions of the box specified by 'box-sizing' .
184
184
185
185
<dt> <dfn>auto && <<ratio>></dfn>
@@ -189,16 +189,17 @@ Intrinsic Aspect Ratios: the 'aspect-ratio' property</h3>
189
189
of ''<var>width</var> / <var>height</var>''
190
190
unless it is a [=replaced element=] with an [=intrinsic aspect ratio=] ,
191
191
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
193
193
work with the [=content box=] dimensions always.
194
194
</dl>
195
195
196
196
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=] .
199
199
For example, a [=non-replaced=] [=absolutely-positioned=] box
200
200
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=]
202
203
203
204
ISSUE: CSS2.1 does not cleanly differentiate between
204
205
replaced elements vs. elements with an aspect ratio;
@@ -253,9 +254,6 @@ Intrinsic Aspect Ratios: the 'aspect-ratio' property</h3>
253
254
</pre>
254
255
</div>
255
256
256
- <h4 id="aspect-ratio-intrinsic-replaced">
257
- Intrinsic Sizes Of Replaced Elements</h4>
258
-
259
257
If a replaced element's only [=intrinsic dimension=]
260
258
is an intrinsic width or an intrinsic height,
261
259
giving it a [=preferred aspect ratio=]
@@ -265,7 +263,7 @@ Intrinsic Sizes Of Replaced Elements</h4>
265
263
through the [=preferred aspect ratio=] .
266
264
267
265
<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>
269
267
270
268
When a box has a [=preferred aspect ratio=] ,
271
269
its <a>automatic sizes</a>
@@ -289,7 +287,7 @@ Automatic Sizes In The Presence Of A Preferred Aspect Ratio</h3>
289
287
it can have no effect on its [=preferred sizes=] .
290
288
291
289
<h4 id="aspect-ratio-margin-collapse">
292
- Margin-collapse </h4>
290
+ Margin-collapsing </h4>
293
291
294
292
For the purpose of margin collapsing ([[css2/box#collapsing-margins]] ),
295
293
if the [=block axis=] is the [=ratio-dependent axis=] ,
@@ -303,15 +301,15 @@ Automatic Content-based Minimum Sizes</h3>
303
301
of a box with a <a>preferred aspect ratio</a>
304
302
that is neither a <a>replaced element</a> nor a <a>scroll container</a>
305
303
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> .
307
305
308
306
<div class="example">
309
307
In the following example,
310
308
the box is as wide as the container (as usual),
311
309
and its height is as tall as needed to contain its content
312
310
but at least as tall as it is wide.
313
311
314
- <pre>
312
+ <pre highlight=css >
315
313
div {
316
314
aspect-ratio: 1/1;
317
315
/* 'width' and 'height' both default to 'auto' */
@@ -333,7 +331,7 @@ Automatic Content-based Minimum Sizes</h3>
333
331
even the box with excess content maintains the 1:1 aspect ratio
334
332
(and handles overflow by becoming scrollable instead, as usual).
335
333
336
- <pre>
334
+ <pre highlight=css >
337
335
div {
338
336
overflow: auto;
339
337
aspect-ratio: 1/1;
@@ -353,7 +351,7 @@ Automatic Content-based Minimum Sizes</h3>
353
351
but will result in content overflowing the box
354
352
if it is not otherwise handled.
355
353
356
- <pre>
354
+ <pre highlight=css >
357
355
div {
358
356
aspect-ratio: 1/1;
359
357
min-height: 0;
@@ -374,7 +372,8 @@ Automatic Content-based Minimum Sizes</h3>
374
372
<div class="example">
375
373
This automatic minimum operates in both axes.
376
374
Consider this example:
377
- <pre>
375
+
376
+ <pre highlight=html>
378
377
<div style="height: 100px; aspect-ratio: 1/1;">
379
378
<span style="display: inline-block; width: 50px;"></span>
380
379
<span style="display: inline-block; width: 150px;"></span>
@@ -464,7 +463,8 @@ Cyclic Aspect-Ratio Calculations</h4>
464
463
465
464
<div class="example">
466
465
For example, given a (<a>horizontal writing mode</a> ) element with
467
- <pre>
466
+
467
+ <pre highlight=css>
468
468
width: auto;
469
469
min-height: min-content;
470
470
aspect-ratio: 1/1;
0 commit comments