Skip to content

Add logical properties support #166

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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