Skip to content

Commit eaccbc4

Browse files
fantasaifantasai
committed
[css-sizing-4] Draft up aspect-ratio feature. #333 #1173 
1 parent f661cef commit eaccbc4

File tree

1 file changed

+137
-45
lines changed

1 file changed

+137
-45
lines changed

‎css-sizing-4/Overview.bs

+137-45
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,10 @@ spec:css2; type: property
3535
<h2 id="intro">
3636
Introduction</h2>
3737

38-
<p><em>This section is not normative.</em>
39-
40-
<p>
41-
CSS layout has several different concepts of automatic sizing that are used in various layout calculations.
42-
This section defines some more precise terminology
43-
to help connect the layout behaviors of this spec to the calculations used in other modules,
44-
and some new keywords for the 'width' and 'height' properties
45-
to allow authors to assign elements the dimensions resulting from these size calculations.
38+
ISSUE: This is a diff spec from <a href="https://www.w3.org/TR/css-sizing-3/">CSS Sizing Level 3</a>.
39+
It is currently an Exploratory Working Draft:
40+
if you are implementing anything, please use Level 3 as a reference.
41+
We will merge the Level 3 text into this draft once it reaches CR.
4642

4743
<h3 id="placement">
4844
Module interactions</h3>
@@ -62,47 +58,143 @@ Values</h3>
6258
also accept the <a>CSS-wide keywords</a> keywords as their property value.
6359
For readability they have not been repeated explicitly.
6460

65-
<h2 id="terms">
66-
Terminology</h2>
67-
68-
…
69-
70-
<h3 id='auto-box-sizes'>
71-
Auto Box Sizes</h3>
72-
73-
…
74-
75-
<h3 id='contributions' dfn export lt="intrinsic size contribution">
76-
Intrinsic Size Contributions</h3>
77-
78-
…
79-
80-
<h3 id='constraints' dfn export lt="intrinsic size constraint">
81-
Intrinsic Size Constraints</h3>
82-
83-
…
84-
85-
<h2 id='size-keywords'>
86-
New Sizing Keywords</h2>
87-
88-
<h3 id='width-height-keywords'>
89-
New Keywords for 'width' and 'height'</h3>
90-
91-
…
92-
93-
<h3 id='the-contain-floats-value'>
94-
Containing Floats</h3>
95-
96-
…
97-
98-
<h3 id='column-sizing'>
99-
Column Sizing Keywords</h3>
100-
101-
…
61+
<h2 id="ratios">
62+
Aspect Ratios</h2>
63+
64+
ISSUE: This section is a rough draft proposal.
65+
See discussion in <a href="https://github.com/w3c/csswg-drafts/issues/333">Issue 333</a>
66+
and <a href="https://github.com/w3c/csswg-drafts/issues/1173">Issue 1173</a>.
67+
68+
<h3 id="aspect-ratio">
69+
Intrinsic Aspect Ratios: the 'aspect-ratio' property</h3>
70+
71+
<pre class="propdef">
72+
Name: aspect-ratio
73+
Value: auto | <<ratio>>
74+
Initial: auto
75+
Inherited: no
76+
Applies to: all elements except <a>inline boxes</a> and internal ruby or table boxes
77+
Computed value: specified keyword or a pair of numbers
78+
</pre>
79+
80+
This property sets an intrinsic aspect ratio for the box,
81+
which will be used in the calculation of ''height/auto'' sizes
82+
and some other layout functions.
83+
The box will essentially size the same as a <a>replaced element</a>
84+
with an <a>intrinsic aspect ratio</a>,
85+
see e.g. <a href="https://www.w3.org/TR/CSS2/visudet.html">CSS2&sect;10</a>.
86+
87+
<dl dfn-for="aspect-ratio" dfn-type="value">
88+
<dt><dfn>auto</dfn>
89+
<dd>
90+
<a>Replaced elements</a> with an <a>intrinsic aspect ratio</a>
91+
use that aspect ratio;
92+
otherwise the box has no aspect ratio.
93+
94+
<dt><dfn><<ratio>></dfn>
95+
<dd>
96+
The box’s aspect ratio is the specified ratio.
97+
</dl>
98+
99+
Note: If a box has both a specified 'width' and a specified 'height',
100+
then the aspect ratio has no effect:
101+
at least one of these sizes must be ''width/auto''
102+
for the aspect ratio to have an impact on sizing.
103+
104+
ISSUE: Clarify interaction with intrinsic size keywords like ''width/min-content'' etc.
105+
106+
ISSUE: Add examples
107+
108+
<h3 id="min/max-ratio">
109+
Aspect Ratio Limits Option A: the ''from-ratio''</h3>
110+
111+
<pre class="partial propdef">
112+
Name: min-width, min-height, max-width, max-height
113+
New Values: from-ratio
114+
Computed value: keyword as specified
115+
</pre>
116+
117+
The <dfn type=value for="min-width, min-height, max-width, max-height">from-ratio</dfn> keyword
118+
specifies that the used value of the property
119+
is calculated from the used size of the opposite dimension
120+
converted through the aspect ratio.
121+
If the box has no aspect ratio,
122+
then an aspect ratio of 1:1 is assumed.
123+
124+
ISSUE: Define a table of all the ways this creates conflicts and cycles and break them.
125+
126+
<div class="example">
127+
In the following example,
128+
the box is as wide as the container (as usual),
129+
and its height is as tall as needed to contain its content
130+
but at least as tall as it is high.
131+
132+
<pre>
133+
div {
134+
aspect-ratio: 1/1;
135+
min-height: from-ratio;
136+
height: max-content;
137+
}
138+
</pre>
139+
140+
<pre class="figure">
141+
+----------+ +----------+ +----------+
142+
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
143+
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
144+
| ~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
145+
| | | ~~~ | | ~~~~~~~~ |
146+
+----------+ +----------+ | ~~~~~~~~ |
147+
| ~~~~~~ |
148+
+----------+
149+
</pre>
150+
</div>
151+
152+
<h3 id="min/max-ratio">
153+
Aspect Ratio Limits Option B: the ''ar'' unit</h3>
154+
155+
<pre class="partial propdef">
156+
Name: min-width, min-height, max-width, max-height
157+
New Values: <<aspect-ratio>>
158+
Computed value: ''ar'' dimension value
159+
</pre>
160+
161+
The <dfn type=value for="min-width, min-height, max-width, max-height"><<aspect-ratio>></dfn> value,
162+
which is a <a>dimension</a> with the unit ''ar'',
163+
specifies that the used value of the property
164+
is calculated from the used size of the opposite dimension
165+
multiplied by the ''ar'' value.
166+
167+
ISSUE: Define a table of all the ways this creates conflicts and cycles and break them.
168+
169+
<div class="example">
170+
In the following example,
171+
the box is as wide as the container (as usual),
172+
and its height is as tall as needed to contain its content
173+
but at least as tall as it is high.
174+
175+
<pre>
176+
div {
177+
min-height: 1ar;
178+
}
179+
</pre>
180+
181+
<pre class="figure">
182+
+----------+ +----------+ +----------+
183+
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
184+
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
185+
| ~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
186+
| | | ~~~ | | ~~~~~~~~ |
187+
+----------+ +----------+ | ~~~~~~~~ |
188+
| ~~~~~~ |
189+
+----------+
190+
</pre>
191+
</div>
102192

103193
<h2 id='intrinsic'>
104194
Intrinsic Size Determination</h2>
105195

196+
ISSUE: <strong>Need to Sync This Section With Level 3 It is Super Out Of Date</strong>
197+
106198
<p>
107199
<dfn export>Intrinsic sizing</dfn> determines sizes based on the contents of an element,
108200
without regard for its context.

0 commit comments

Comments
 (0)