Skip to content

[css-values] New units for <percentage> based on existing usage #5551

@Crissov

Description

@Crissov

<percentage> can be used interchangeably in some places with other numeric notations. In other properties, unitless numeric notation is used exclusively although it looks and works a lot like percentages. I propose that this be generalized and harmonized.

  • font-weight before Level 3 had "numeric keywords" 100, 200 through 900 and now accepts an integer number with one to three digits, [1, 1000].
  • some <color> components, in particulkar inside color(), can be provided as floating point numbers in the range [0.0, 1.0], either specified as <number> or as <number-percentage>
  • sRGB <color> components can be provided as integer numbers in the 8-bit (i.e. 1-byte) range [0, 255], optionally in hexadecimal notation [00h, FFh]
  • sRGB <color> components can be provided as hexadecimal integer numbers in the 4-bit (i.e. 1-nibble) range [0, F], i.e. [0, 15], although this is only supported in three- and four-char hexcodes and not in common functional notation
  • font-feature-settingsand similar oney kind of accept integers as boolean values in the range [0, 1], i.e. out of the set {0, 1}

In order to accommodate 10-bit and 12-bit color channels, the byte integers are to be relaxed to become floating point numbers. Alternatively, they would have needed some way to represent the ranges [0, 1023] and [0, 4095], respectively. #480

I propose that we treat all of the cases mentioned above as special cases where it is allowed to omit the unit, as it is for deg in <hue>s. They would thus become special cases of the <percentage> value type. Therefore, we would need units for them elsewhere. Here is a first suggestion:

  • pm, per mille (‰) for <font-weight>: [0, 1000]
  • u, unity: [0.0, 1.0]
  • b or byte, byte: [0, 255]
  • h, hex hexadecimal or n nibble: [0, 15]
  • k, kibibit: [0, 1023]
  • t tribble or perhaps w, word: [0, 4095]
  • bool, boolean: [0, 1] (true and false global keywords are a non-starter)

The following examples would become valid then:

  • color: rgba(50%, 0.5u, 500pm, 7h);
  • color: rgb(127b, 1023k, 2047t);
  • font-weight: 50%;

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions