Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add logical properties support #166

Open
sroucheray opened this issue Sep 23, 2015 · 0 comments
Open

Add logical properties support #166

sroucheray opened this issue Sep 23, 2015 · 0 comments

Comments

@sroucheray
Copy link

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

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

No branches or pull requests

2 participants