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/2018/WD-css-logical-1-20180827/ 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 [[CSS2]]. 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]].
Note that this requires implementations to maintain relative order of declarations within a CSS declaration block, which was not previously required for CSS cascading. It also requires that 'writing-mode', 'direction', and 'text-orientation' be computed as a prerequisite for cascading together the [=flow-relative=] and [=physical=] declarations of a [=logical property group=] to find their [=computed values=].
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 each individual property
in such a pair.
Note: Depending on the element’s own writing mode
for mapping every flow-relative property
to its physical equivalent
simplifies the cascading calculations
and gives a straightforward model for authors to reason about.
However, it is problematic in many cases,
see for example this discussion.
Authors may need to use nested elements
to get the correct mapping behavior
when changing an element’s writing mode from its parent.
Inheritance of each property is from its corresponding property on the parent.
For example, although the [=inline-start=] margin of an''direction/rtl'' box is its right margin,
'margin-inline-start' on this box will inherit
the 'margin-inline-start' of an ''direction/ltr'' parent
even though that happens to be the parent’s left margin.
[=Shorthand properties=] that encompass both logical and physical longhands
(such as the 'all' shorthand)
set omitted values first,
and otherwise set the physical values last.
For example, ''all: inherit'' will set all of the 'margin' properties to ''inherit'',
but since the physical longhands are set last,
the child's margins will inherit from their physical counterparts in the parent.
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: Same as 'padding-top' 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: Same as 'border-top-width' 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: Same as 'border-top-style' 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: Same as 'border-top-color' 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 color,
and the second value represents the end edge color.
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' or 'border-inline-start' & 'border-inline-end', respectively, both to the same style.
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: Same as 'border-top-left-radius' 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', with the first start/end giving the block axis side, and the second the inline-axis side (i.e. patterned as 'border-block-inline-radius').
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 [[!CSS2]] 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;
}