Logical sizing properties

Draft Community Group Report,

This version:
http://example.com/url-this-spec-will-live-at
Issue Tracking:
GitHub
Inline In Spec
Editors:
Jonathan Kingston (Mozilla)
Tab Atkins Jr. (Google)

Abstract

This specification introduces a shorthand property for specifying logical properties of layout sizing.

Status of this document

This specification was published by the Web Platform Incubator Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Contributor License Agreement (CLA) there is a limited opt-out and other conditions apply. Learn more about W3C Community and Business Groups.

1. Introduction

1.1. Logical sizing shorthand: the size property

Name: size
Value: <sizing> <‘box-sizing’>?
Initial: auto
Applies to: see individual properties
Inherited: no
Percentages: see individual properties
Media: visual
Computed value: see individual properties
Canonical order: per grammar
Animatable: see individual properties

Where

<sizing> = [  <inline-size-dimension> |
  [ <inline-size-dimension> <block-size-dimension> ]
]
<inline-size-dimension> = [  <‘inline-size’> |
  <‘aspect-ratio’> |
  [ <‘min-inline-size’>/<‘max-inline-size’> ] |
  [ <‘min-inline-size’>/[<‘inline-size’>|<‘aspect-ratio’>]/<‘max-inline-size’> ]
]
<block-size-dimension> = [  <‘block-size’> |
  <‘aspect-ratio’> |
  [ <‘min-block-size’>/<‘max-block-size’> ] |
  [ <‘min-block-size’>/[<‘block-size’>|<‘aspect-ratio’>]/<‘max-block-size’> ]
]

The size property is a shorthand property for setting logical sizing and box sizing.

If only inline-size-dimension is specified block-size-dimension is set to the same value unless an aspect-ratio is defined in which case block-size-dimension and inline-size-dimension are set to auto and the aspect-ratio is used.

For example if just inline-size-dimension is given both inline-size and block-size would be 12px.
img {
  size: 12px;
}

If however the image is set to a ratio and it’s inside a 400px wide container the inline-size and block-size are auto and the ratio the result of calc(1/2) resulting in a 400px x 200px image.

img {
  size: calc(2/1);
}

When only the max/min sizes are specified block-size/inline-size are set to auto. If both inline-size-dimension and block-size-dimension are specified they specify inline-size and block-size respectively.

For example the following defines an image that has an inline-size of 12px and a min-block-size of 12px and a max-block-size of 20px with border-box box-sizing.
img {
  size: 12px 12px/20px border-box;
}

block-size would also be auto in this case.

If aspect-ratio is defined in both inline-size-dimension and block-size-dimension it is a syntax error.

1.2. Aspect based sizing: the aspect-ratio property

Name: aspect-ratio
Value: <number> | none
Initial: none
Applies to: block level elements
Inherited: no
Percentages: n/a
Media: visual
Computed value: same as specified value
Canonical order: per grammar
Animation type: discrete

Note: The term "min or max constraints" refers to min-width, max-width, min-height, and max-height, whichever is appropriate for the dimension in question.

The aspect-ratio property controls the resolution of underspecified values for the width and height properties of elements in CSS, such that the ratio of the inline-size and 'block-size is a specific value.

For elements in in-flow, width or height are underspecified if the computed values of width/height for the element are auto and the element is not a replaced element. For out-of-flow elements, width is underspecified if the computed value for width on the element is auto and the computed values of left or right are auto; height is underspecified if the computed value for height on the element is auto and the computed values of left or right are auto.

What about replaced elements?

The <number> in the value of the property must be greater than zero. If it is not, it is a syntax error.

If aspect-ratio is none, it must have no effect.

If aspect-ratio is not none, but neither width nor height are underspecified for the element, aspect-ratio must have no effect.

Brad Kemper points out that it may be better for back-compat to have aspect-ratio override in this case, just ignoring the block-size dimension. This would let someone specify a "default" ratio via an explicit width/height, and have aspect-ratio take over to ensure it actually maintains the desired ratio.

Conformance

Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words “for example” or are set apart from the normative text with class="example", like this:

This is an example of an informative example.

Informative notes begin with the word “Note” and are set apart from the normative text with class="note", like this:

Note, this is an informative note.

Index

Terms defined by this specification

Terms defined by reference

References

Normative References

[CSS-LOGICAL-PROPS-1]
CSS Logical Properties Module Level 1 URL: https://drafts.csswg.org/css-logical-props-1/
[CSS-PAGE-3]
CSS Paged Media Module Level 3 URL: https://drafts.csswg.org/css-page-3/
[CSS-POSITION-3]
Rossen Atanassov; Arron Eicholz. CSS Positioned Layout Module Level 3. 17 May 2016. WD. URL: https://drafts.csswg.org/css-position/
[CSS-UI-3]
Tantek Çelik; Florian Rivoal. CSS Basic User Interface Module Level 3 (CSS3 UI). 7 July 2015. CR. URL: http://dev.w3.org/csswg/css-ui/
[CSS-VALUES]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 11 June 2015. CR. URL: http://dev.w3.org/csswg/css-values/
[CSS2]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. REC. URL: https://www.w3.org/TR/CSS2
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119
[SVG2]
Nikos Andronikos; et al. Scalable Vector Graphics (SVG) 2. 15 September 2015. WD. URL: https://svgwg.org/svg2-draft/

Informative References

[CSS-SHAPES-1]
Vincent Hardy; Rossen Atanassov; Alan Stearns. CSS Shapes Module Level 1. 20 March 2014. CR. URL: http://dev.w3.org/csswg/css-shapes/

Property Index

Name Value Initial Applies to Inh. %ages Media Ani­mat­able Anim­ation type Canonical order Com­puted value
size <sizing> <‘box-sizing’>? auto see individual properties no see individual properties visual see individual properties per grammar see individual properties
aspect-ratio <number> | none none block level elements no n/a visual discrete per grammar same as specified value

Issues Index

What about replaced elements?
Brad Kemper points out that it may be better for back-compat to have aspect-ratio override in this case, just ignoring the block-size dimension. This would let someone specify a "default" ratio via an explicit width/height, and have aspect-ratio take over to ensure it actually maintains the desired ratio.
Should we instead make it try and satisfy the aspect ratio somehow?