Logical Gradients

A Collection of Interesting Ideas, 16 August 2017

To the extent possible under law, the editors have waived all copyright and related or neighboring rights to this work. In addition, as of 16 August 2017, the editors have made this specification available under the Open Web Foundation Agreement Version 1.0, which is available at http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0. Parts of this work may be from another specification document. If so, those parts are instead covered by the license of that specification document.

1. Introduction

Because different writing systems are written in different directions, a variety of writing modes exist: left to right, top to bottom; right to left, top to bottom; bottom to top, right to left; etc. logical concepts like the “start” of a page or line map differently to physical concepts like the “top” of a line or “left edge” of a paragraph. Some aspects of a layout are actually relative to the writing directions, and thus will vary when the page is translated to a different system; others are inherently relative to the page’s physical orientation.

The module defines logical properties and values for the features defined in css-images. These properties are writing-mode relative equivalents of their corresponding physical properties.

1.1. Flow-Relative Values for linear-gradient()

The linear gradient syntax is:

linear-gradient() = linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
  <color-stop-list>
)
<side-or-corner> =
[ [left | right] || [top | bottom] ] |
[ [inline-start | inline-end] || [block-start | block-end ] ]

Name:	side-or-corner
New values:	[ inline-start \| inline-end ] \|\| [ block-start \| block-end ]

The mapping on this property 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.

1.1.1. Flow Relative Linear Gradient Examples

All of the following linear-gradient() examples are presumed to be backgrounds applied to a box that is 200px wide and 100px tall.

For example, the two rules are equivalent in left-to-right page progressions:

header {
  background-image: linear-gradient(to inline-end, yellow 0%, blue 100%);
}

header {
  background-image: linear-gradient(to right, yellow 0%, blue 100%);
}

This would also be equivalent in right-to-left page progressions as:

header {
  background-image: linear-gradient(to left, yellow 0%, blue 100%);
}

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

Logical Gradients

A Collection of Interesting Ideas, 16 August 2017

Abstract