Skip to content

Add logical properties support #166

@sroucheray

Description

@sroucheray

Logical properties and values provide the author with the ability to control layout through logical, rather than physical, direction and dimension mappings. Logical dimensions help design content for LTR/RTL languages. There are defined by CSSWG in this draft documentation
It consists in :

  • margin-block-start, margin-block-end, margin-inline-start, margin-inline-end
  • offset-block-start, offset-block-end, offset-inline-start, offset-inline-end
  • padding-block-start, padding-block-end, padding-inline-start, padding-inline-end
  • border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width
  • border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style
  • border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color
  • border-block-start, border-block-end, border-inline-start, border-inline-end

Physical values can also be modified with the logical keyword for shorthand properties :
margin: logical 1em 2em 3em 4em;

Some of those logical properties are already implemented either directly or with vendor prefix : https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end#Browser_compatibility

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