Skip to content

Commit

Permalink
[css-sizing-4] Draft up aspect-ratio feature. #333 #1173
Browse files Browse the repository at this point in the history
  • Loading branch information
@fantasai
fantasai committed Oct 18, 2018
1 parent f661cef commit eaccbc4
Showing 1 changed file with 137 additions and 45 deletions.
182 changes: 137 additions & 45 deletions css-sizing-4/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,10 @@ spec:css2; type: property
<h2 id="intro">
Introduction</h2>

<p><em>This section is not normative.</em>

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

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

<h2 id="terms">
Terminology</h2>

…

<h3 id='auto-box-sizes'>
Auto Box Sizes</h3>

…

<h3 id='contributions' dfn export lt="intrinsic size contribution">
Intrinsic Size Contributions</h3>

…

<h3 id='constraints' dfn export lt="intrinsic size constraint">
Intrinsic Size Constraints</h3>

…

<h2 id='size-keywords'>
New Sizing Keywords</h2>

<h3 id='width-height-keywords'>
New Keywords for 'width' and 'height'</h3>

…

<h3 id='the-contain-floats-value'>
Containing Floats</h3>

…

<h3 id='column-sizing'>
Column Sizing Keywords</h3>

…
<h2 id="ratios">
Aspect Ratios</h2>

ISSUE: This section is a rough draft proposal.
See discussion in <a href="https://github.com/w3c/csswg-drafts/issues/333">Issue 333</a>
and <a href="https://github.com/w3c/csswg-drafts/issues/1173">Issue 1173</a>.

<h3 id="aspect-ratio">
Intrinsic Aspect Ratios: the 'aspect-ratio' property</h3>

<pre class="propdef">
Name: aspect-ratio
Value: auto | <<ratio>>
Initial: auto
Inherited: no
Applies to: all elements except <a>inline boxes</a> and internal ruby or table boxes
Computed value: specified keyword or a pair of numbers
</pre>

This property sets an intrinsic aspect ratio for the box,
which will be used in the calculation of ''height/auto'' sizes
and some other layout functions.
The box will essentially size the same as a <a>replaced element</a>
with an <a>intrinsic aspect ratio</a>,
see e.g. <a href="https://www.w3.org/TR/CSS2/visudet.html">CSS2&sect;10</a>.

<dl dfn-for="aspect-ratio" dfn-type="value">
<dt><dfn>auto</dfn>
<dd>
<a>Replaced elements</a> with an <a>intrinsic aspect ratio</a>
use that aspect ratio;
otherwise the box has no aspect ratio.

<dt><dfn><<ratio>></dfn>
<dd>
The box’s aspect ratio is the specified ratio.
</dl>

Note: If a box has both a specified 'width' and a specified 'height',
then the aspect ratio has no effect:
at least one of these sizes must be ''width/auto''
for the aspect ratio to have an impact on sizing.

ISSUE: Clarify interaction with intrinsic size keywords like ''width/min-content'' etc.

ISSUE: Add examples

<h3 id="min/max-ratio">
Aspect Ratio Limits Option A: the ''from-ratio''</h3>

<pre class="partial propdef">
Name: min-width, min-height, max-width, max-height
New Values: from-ratio
Computed value: keyword as specified
</pre>

The <dfn type=value for="min-width, min-height, max-width, max-height">from-ratio</dfn> keyword
specifies that the used value of the property
is calculated from the used size of the opposite dimension
converted through the aspect ratio.
If the box has no aspect ratio,
then an aspect ratio of 1:1 is assumed.

ISSUE: Define a table of all the ways this creates conflicts and cycles and break them.

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

<pre>
div {
aspect-ratio: 1/1;
min-height: from-ratio;
height: max-content;
}
</pre>

<pre class="figure">
+----------+ +----------+ +----------+
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| ~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| | | ~~~ | | ~~~~~~~~ |
+----------+ +----------+ | ~~~~~~~~ |
| ~~~~~~ |
+----------+
</pre>
</div>

<h3 id="min/max-ratio">
Aspect Ratio Limits Option B: the ''ar'' unit</h3>

<pre class="partial propdef">
Name: min-width, min-height, max-width, max-height
New Values: <<aspect-ratio>>
Computed value: ''ar'' dimension value
</pre>

The <dfn type=value for="min-width, min-height, max-width, max-height"><<aspect-ratio>></dfn> value,
which is a <a>dimension</a> with the unit ''ar'',
specifies that the used value of the property
is calculated from the used size of the opposite dimension
multiplied by the ''ar'' value.

ISSUE: Define a table of all the ways this creates conflicts and cycles and break them.

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

<pre>
div {
min-height: 1ar;
}
</pre>

<pre class="figure">
+----------+ +----------+ +----------+
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| ~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| | | ~~~ | | ~~~~~~~~ |
+----------+ +----------+ | ~~~~~~~~ |
| ~~~~~~ |
+----------+
</pre>
</div>

<h2 id='intrinsic'>
Intrinsic Size Determination</h2>

ISSUE: <strong>Need to Sync This Section With Level 3 It is Super Out Of Date</strong>

<p>
<dfn export>Intrinsic sizing</dfn> determines sizes based on the contents of an element,
without regard for its context.
Expand Down

0 comments on commit eaccbc4

Please sign in to comment.