Introduction

See [CSS3-WRITING-MODES] Abstract Layout for details on how to map between logical and physical terms. This mapping controls the interpretation of logical keywords and properties.

1. Logical Directional Values: block-start, block-end, inline-start, inline-end

Properties that accept physical directional keyword values (top, bottom, left, or right) are redefined to also accept the appropriate logical directional keywords. In such cases, the logical values can be used in place of the corresponding physical values. For properties that take multiple keywords, combinations of logical and physical values are not allowed (unless otherwise specified in a future specification).

Properties can be either 1-dimensional or 2-dimensional. When contextually constrained to one dimension, the logical keywords are shortened.

1.1. Logical Values for the caption-side Property

The caption-side property is 1-dimensional in CSS2.1, but was 2-dimensional in CSS2.0, (and presumably will be 2-dimensional again in the next update to CSS tables). It therefore accepts the full set of logical directions. However, the inline-start and inline-end properties (which correspond to the behavior of the left and right values in CSS2.0) are only required to be supported by UAs that support left and right.

1.2. Logical Values for the float and clear Properties

Is this a 2-directional property? Should these just be start/end?

1.3. Logical Values for the text-align Property

These values are normatively defined in [CSS3TEXT].

float needs coordination with GCPM where it defines page floats

1.4. Logical Values for the resize Property

2. Logical Page Classifications

In CSS, all pages are classified by user agents as either left pages or right pages. [CSS21] Which page is first in a spread, however, depends on whether the page progression is left-to-right or right-to-left.

To allow control of page breaking to the page that is on the earlier or later side of a spread, rather than to the left or right side of a spread, this module introduces the following additional keywords for the page-break-after and page-break-before properties [CSS21]:

recto

Equivalent to right in left-to-right page progressions and left in right-to-left page progressions.

verso

Equivalent to left in left-to-right page progressions and right in right-to-left page progressions.

These values are further defined in [CSS3-BREAK].

Logical page selectors are also added to support logical page selection. Authors typically place page numbers using physical placements, but the contents of headers often follows conventions depending on which page in the spread is earlier.

Following page selectors are added to support this scenario:

:recto

Equivalent to ':right' in left-to-right page progressions and ':left' in right-to-left page progressions.

:verso

Equivalent to ':left' in left-to-right page progressions and ':right' in right-to-left page progressions.

The logical page selectors have specificity equal to the ':left' and ':right' page selectors.

3. Logical Box Model Properties

This specification introduces new CSS properties that are logical equivalents of physical box model properties.

The specified values of these properties are separate from the specified values of the parallel physical properties, but the logical and physical properties share computed values. Which pairs of properties share computed values depends on the computed values of writing-mode, text-orientation, and direction. For a summary of these dependencies, see Abstract-to-Physical Mappings in [CSS3-WRITING-MODES].

A computed value that has logical and physical properties is determined by applying the CSS cascade to declarations of both. Overriding is not determined by whether a declaration is logical or physical, but only by the rules of the CSS cascade [CSS3-CASCADE].

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;
}

How do computed value APIs, e.g., getComputedStyle() work? Can they be used with either logical or physical properties, or only with the physical ones?

3.1. Logical Height and Logical Width: the block-size and inline-size properties

These properties correspond to the width and height properties. The mapping depends on the element’s writing-mode.

These properties correspond to the min-width and min-height properties. The mapping depends on the element’s writing-mode.

These properties correspond to the max-width and max-height properties. The mapping depends on the element’s writing-mode.

3.2. Logical Margins and Offsets: the margin- and offset- block-start/block-end/inline-start/inline-end properties

These properties correspond to the margin-top, margin-bottom, margin-left, and margin-right properties. The mapping depends on the parent element’s writing-mode, direction, and text-orientation.

These properties correspond to the top, bottom, left, and right properties. The mapping depends on the parent element’s writing-mode, direction, and text-orientation.

3.3. Logical Padding and Border: the padding- and border-*- block-start/block-end/inline-start/inline-end properties

These 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.

These 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.

These 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.

These 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.

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.

3.4. Shorthand Properties with logical Keyword

The shorthand properties for margin, padding, and border set values for physical properties by default. But authors can specify the logical keyword at the beginning of the property value to indicate that the values map to the logical properties instead of the physical ones.

other candidates of the keyword are: relative, script, writing-mode, beas, or the value itself (e.g., vertical-lr-ltr)

The following [CSS21] shorthand properties accept the logical keyword:

• margin
• padding
• border-color
• border-style
• border-width

The syntax for these properties is effectively changed by replacing

<value-type>{1,4}

with

logical? <value-type>{1,4}

When the logical keyword is present in the value, the values that follow are assigned to the logical properties as follows:

• If only one value is set, the value applies to all four logical sides.
• If two values are set, the first is for block-start and block-end, the second is for inline-start and inline-end.
• If three values are set, the first is for block-start, the second is for inline-start and inline-end, and the third is for block-end.
• If four values are set, they apply to the block-start, inline-end, block-end, and inline-start sides in that order.

Should the shorthand also reset the physical properties to their initial values?

blockquote {
  margin: logical 1em 2em 3em 4em;
}
blockquote {
  margin-block-start:  1em;
  margin-inline-end:   2em;
  margin-block-end:    3em;
  margin-inline-start: 4em;
}

4. Logical Background and Border Images

[CSS3BG] is handled separately because it can fill an area with specified images, and the area to fill can be rotated or flipped depending on the text flow.

4.1. Background Image Transform: The background-image-transform property

is this the right default? we need to investigate which is more common

This property defines whether background images are transformed to match to the value of writing-mode property, and whether background-size widths and heights are logical or physical. Values have the following meanings:

logical

The values for the background-size property are logical. The background images are transformed to match to the logical axis.

physical

The values for the background-size property are physical. The background images remain unchanged.

rotate

Similar to logical, except that the inline direction is ignored. The result is affected only by the block flow direction.

4.2. The background-repeat property

The repeat-x and repeat-y values are logical, but in CSS3 this property can also accept double values to specify horizontal and vertical behaviors separately. The double values are considered logical if the logical keyword is specified, otherwise physical.

should also add repeat-horizontal and repeat-vertical for the physical value?

4.3. Border Image Transform: The border-image-transform property

is this the right initial default?

This property defines whether border images are transformed to match to the value of writing-mode property, with the reference writing mode being writing-mode: horizontal-tb; direction: ltr. Values have the following meanings:

logical

The values for the border-image-* properties are logical. The border images are transformed to match to the logical axis.

physical

The values for the border-image-* properties are physical. The border images remain unchanged.

rotate

Similar to logical, except that the inline direction is ignored. The result is affected only by the block flow direction.

The following properties use the value of this property to determine how directional mappings are done:

• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat
• border-image