Title: CSS Logical Properties and Values Level 1 Shortname: css-logical Level: 1 Status: ED Work Status: Refining Group: csswg ED: https://drafts.csswg.org/css-logical-1/ TR: https://www.w3.org/TR/css-logical-1/ Previous version: https://www.w3.org/TR/2017/WD-css-logical-1-20170518/ Editor: Rossen Atanassov, Microsoft, ratan@microsoft.com, w3cid 49885 Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400 Abstract: This module introduces logical properties and values that provide the author with the ability to control layout through logical, rather than physical, direction and dimension mappings. The module defines logical properties and values for the features defined in [[CSS21]]. These properties are writing-mode relative equivalents of their corresponding physical properties. Ignored Terms: div, dl, dfn Ignored Vars: * Link Defaults: css2 (property) width/height/min-width/min-height/max-width/max-height
spec:css-writing-modes-3; type:dfn; text:start spec:css-writing-modes-3; type:dfn; text:end
Name: caption-side
New values: inline-start | inline-end
Computed value: specified keyword
These two values are added only for implementations that support
''caption-side/left'' and ''caption-side/right'' values for 'caption-side'.
The ''caption-side/left'' and ''caption-side/right'' values themselves
are defined to be line-relative.
The existing ''caption/top'' and ''caption/bottom'' values are idiosyncratically redefined
as assigning to the block-start and block-end sides of the table, respectively.
The mapping on this property uses the writing mode of the caption’s containing block
(that is, the table wrapper box).
Name: float, clear
New values: inline-start | inline-end
Computed value: specified keyword
The mapping on these properties uses the writing mode of the element’s containing block.
Note: These properties are 1-dimensional in CSS2,
but are planned to be expanded to two dimensions,
and therefore are given unabbreviated flow-relative keywords.
Name: text-align
New values: start | end
Computed value: specified keyword
These values are normatively defined in [[!css-text-3]].
Name: resize
New values: block | inline
Computed value: specified keyword
Note that this requires implementations to maintain relative order of declarations within a CSS declaration block, which was not previously required for CSS cascading.
p {
margin-inline-start: 1px;
margin-left: 2px;
margin-inline-end: 3px;
}
In a paragraph with computed 'writing-mode' being ''horizontal-tb''
and computed 'direction' being ''ltr'',
the computed value of 'margin-left' is ''2px'',
since for that 'writing-mode' and 'direction',
'margin-inline-start' and 'margin-left' share a computed value,
and the declaration of 'margin-left'
is after the declaration of 'margin-inline-start'.
However, if the computed 'direction' were instead ''rtl'',
the computed value of 'margin-left' is ''3px'',
since 'margin-inline-end' and 'margin-left' share a computed value,
and the declaration of 'margin-inline-end'
is after the declaration of 'margin-left'.
getComputedStyle())
must return the same value for equivalent pairs of such properties.
ISSUE: There are some open questions on
the order of inheritance vs mapping in flow-relative properties
and on the interaction of shorthands and logical properties.
Name: block-size, inline-size Value: <<'width'>> Initial: auto Applies to: Same as 'height' and 'width' Inherited: No Percentages: As for the corresponding physical property Computed value: Same as 'height', 'width' Animation type: by computed value typeThese properties correspond to the 'height' and 'width' properties. The mapping depends on the element's 'writing-mode'.
Name: min-block-size, min-inline-size Value: <<'min-width'>> Initial: 0 Applies to: same as 'height' and 'width' Inherited: No Percentages: As for the corresponding physical property Computed value: Same as 'min-height', 'min-width' Animation type: by computed value typeThese properties correspond to the 'min-height' and 'min-width' properties. The mapping depends on the element's 'writing-mode'.
Name: max-block-size, max-inline-size Value: <<'max-width'>> Initial: none Applies to: same as 'height' and 'width' Inherited: no Percentages: As for the corresponding physical property Computed value: Same as 'max-height', 'max-width' Animation type: by computed value typeThese properties correspond to the 'max-height' and 'max-width' properties. The mapping depends on the element's 'writing-mode'.
Name: margin-block-start, margin-block-end, margin-inline-start, margin-inline-end Value: <<'margin-top'>> Initial: 0 Applies to: Same as 'margin-top' Inherited: no Percentages: As for the corresponding physical property Computed value: Same as corresponding 'margin-*' properties Animation type: by computed value typeThese properties correspond to the 'margin-top', 'margin-bottom', 'margin-left', and 'margin-right' properties. The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
Name: margin-block, margin-inline
Value: <<'margin-top'>>{1,2}
These two shorthand properties set the
'margin-block-start' & 'margin-block-end'
and
'margin-inline-start' & 'margin-inline-end',
respectively.
The first value represents the start edge style,
and the second value represents the end edge style.
If only one value is given, it applies to both the start and end edges.
Name: inset-block-start, inset-block-end, inset-inline-start, inset-inline-end Value: <<'top'>> Initial: auto Applies to: positioned elements Inherited: no Percentages: As for the corresponding physical property Computed value: Same as corresponding 'top'/'right'/'bottom'/'left' properties Animation type: by computed value typeThese properties correspond to the 'top', 'bottom', 'left', and 'right' properties. The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
Name: inset-block, inset-inline
Value: <<'top'>>{1,2}
These two shorthand properties set the
'inset-block-start' & 'inset-block-end'
and
'inset-inline-start' & 'inset-inline-end',
respectively.
The first value represents the start edge style,
and the second value represents the end edge style.
If only one value is given, it applies to both the start and end edges.
Name: inset
Value: <<'top'>>{1,4}
This shorthand property sets the
'top', 'right', 'bottom', and 'left' properties.
Values are assigned to its sub-properties as for 'margin'.
Name: padding-block-start, padding-block-end, padding-inline-start, padding-inline-end Value: <<'padding-top'>> Initial: 0 Applies to: all elements Inherited: no Percentages: As for the corresponding physical property Computed value: Same as corresponding 'padding-*' properties Animation type: by computed value typeThese properties correspond to the 'padding-top', 'padding-bottom', 'padding-left', and 'padding-right' properties. The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
Name: padding-block, padding-inline
Value: <<'padding-top'>>{1,2}
These two shorthand properties set the
'padding-block-start' & 'padding-block-end'
and
'padding-inline-start' & 'padding-inline-end',
respectively.
The first value represents the start edge style,
and the second value represents the end edge style.
If only one value is given, it applies to both the start and end edges.
Name: border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width Value: <<'border-top-width'>> Initial: medium Applies to: all elements Inherited: no Percentages: n/a Computed value: Same as corresponding 'border-*-width' properties Animation type: by computed value typeThese properties correspond to the 'border-top-width', 'border-bottom-width', 'border-left-width', and 'border-right-width' properties. The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
Name: border-block-width, border-inline-width
Value: <<'border-top-width'>>{1,2}
These two shorthand properties set the
'border-block-start-width' & 'border-block-end-width'
and
'border-inline-start-width' & 'border-inline-end-width',
respectively.
The first value represents the start edge width,
and the second value represents the end edge width.
If only one value is given, it applies to both the start and end edges.
Name: border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style Value: <<'border-top-style'>> Initial: none Applies to: all elements Inherited: no Percentages: n/a Computed value: Same as corresponding 'border-*-style' properties Animation type: discreteThese properties correspond to the 'border-top-style', 'border-bottom-style', 'border-left-style', and 'border-right-style' properties. The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
Name: border-block-style, border-inline-style
Value: <<'border-top-style'>>{1,2}
These two shorthand properties set the
'border-block-start-style' & 'border-block-end-style'
and
'border-inline-start-style' & 'border-inline-end-style',
respectively.
The first value represents the start edge style,
and the second value represents the end edge style.
If only one value is given, it applies to both the start and end edges.
Name: border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color Value: <<'border-top-color'>> Initial: currentcolor Applies to: all elements Inherited: no Percentages: n/a Computed value: Same as corresponding 'border-*-color' properties Animation type: by computed value typeThese properties correspond to the 'border-top-color', 'border-bottom-color', 'border-left-color', and 'border-right-color' properties. The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
Name: border-block-color, border-inline-color
Value: <<'border-top-color'>>{1,2}
These two shorthand properties set the
'border-block-start-color' & 'border-block-end-color'
and
'border-inline-start-color' & 'border-inline-end-color',
respectively.
The first value represents the start edge style,
and the second value represents the end edge style.
If only one value is given, it applies to both the start and end edges.
Name: border-block-start, border-block-end, border-inline-start, border-inline-end Value: <<'border-top-width'>> || <<'border-top-style'>> || <These properties correspond to the 'border-top', 'border-bottom', 'border-left', and 'border-right' properties. The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.>
Name: border-block, border-inline Value: <<'border-block-start'>>These two shorthand properties set the 'border-block-start' & 'border-block-end' and 'border-inline-start' & 'border-inline-end', respectively.
Name: border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius Value: <<'border-top-left-radius'>> Initial: Same as 'border-top-left-radius' Applies to: all elements Inherited: no Percentages: Same as 'border-top-left-radius' Computed value: Same as corresponding physical 'border-*-radius' properties Animation type: by computed value typeThese properties correspond to the 'border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius', and 'border-bottom-right-radius' properties. The mapping depends on the element's 'writing-mode', 'direction', and 'text-orientation'.
The proposed syntax for this feature is under discussion and is almost guaranteed to change from what is described here. This section remains in the draft to promote discussion of alternatives, to document the affected properties, and to specify the expected impact on the interpretation of whatever syntactic switch is ultimately chosen. The following [[!CSS21]] shorthand properties accept the ''margin/logical'' keyword:
<value-type>{1,4}
with
logical? <value-type>{1,4}
When the ''margin/logical'' keyword is present in the value,
the values that follow are assigned to its flow-relative longhands
as follows:
blockquote {
margin: logical 1em 2em 3em 4em;
}
blockquote {
margin-block-start: 1em;
margin-inline-start: 2em;
margin-block-end: 3em;
margin-inline-end: 4em;
}