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.

Sign up for GitHub

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

Jump to bottom

Fix #6 RTL support with Logical properties #2882

Closed
wants to merge 3 commits into from
Closed

Fix #6 RTL support with Logical properties #2882

wants to merge 3 commits into from

Conversation

jgthms
Copy link
Owner

@jgthms jgthms commented Mar 23, 2020 •
edited
Loading

Fixes #6.

This is a new feature.

Proposed solution

A lot of help from https://www.rtlstyling.com/

This PR adds RTL support by making use of CSS Logical Properties, specifically:

  • margin-inline-start
  • margin-inline-end
  • padding-inline-start
  • padding-inline-end
  • border-inline-start

Because other properties like border-start-start-radius or inset-inline-start are still poorly supported (< 75%), this PR also introduces 4 mixins:

  • =ltr which only outputs content if $rtl is false
  • =rtl which only outputs content if $rtl is true
  • =inset-inline-start($spacing) as a replacement for inset-inline-start
  • =inset-inline-end($spacing) as a replacement for inset-inline-end

And a new flag: $rtl set to false by default.

This means you can build a RTL version of Bulma by simply setting the flag to true and importing Bulma:

@charset "utf-8"
$rtl: true
@import "bulma"

As a result, 3 new CSS files exist:

  • bulma-rtl.css
  • bulma-rtl.css.map
  • bulma-rtl.min.css

Tradeoffs

Where margin-right was, there is now margin-inline-end. So compatibility is slightly reduced, but still > 90%.

Only properties highly supported by browsers were used directly.
image

Testing Done

Adding <html dir="rtl"> to pages and seeing the result.

Changelog updated?

No.

@jgthms jgthms changed the title Logical properties Fix #6 RTL support with Logical properties Mar 23, 2020
@jgthms jgthms mentioned this pull request Mar 23, 2020
Closed
@Nemesis19
Copy link

Hello, any ETA on this feature? Thanks!

@jtommy jtommy mentioned this pull request Apr 19, 2020
Closed
@jgthms
Copy link
Owner Author

jgthms commented Sep 22, 2020

RTL has been merged through another PR.

@jgthms jgthms closed this Sep 22, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Don't forget about RTL direction please
2 participants
@jgthms @Nemesis19